'angular' is not defined while using Codekit

Question

CodeKit keeps giving me a warning every time I save myApp.js. When I load index.html via the CodeKit preview the firstName and lastName variables appear fine. I just want this issue to go away.

"var app = angular.module("myApp", []);
'angular' is not defined"

Here are my two files index.html and myApp.js

index.html:

<html>
<script src="angular/angular.js"></script>
<script src="myApp.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
    <div>
        {{ firstName + " " + lastName }}
    </div>
</body>
</html>

myApp.js:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.firstName    = "John";
    $scope.lastName= "Doe";
});

@RenanLopesFerreira yes I just tried that and I am still getting the warning. — jakethecool1, Jul 12 '15 at 02:28
Is `` ok ? i mean is there a file name `angular.js` in `angular` folder which location in root folder of .html page ? — Anik Islam Abhi, Jul 12 '15 at 02:28
I believe that angular/angular.js is working properly because the data binding is working fine. — jakethecool1, Jul 12 '15 at 02:31

score 4 · Answer 1 · answered Nov 04 '15 at 17:25

I have not tried Claies' solution, but what we do in our project is simply register it as a global so that Codekit does not complain. Only do this if you are sure you have angular defined, else it will hide errors.

Option 1 - for jshint

Put the following in your JS file:

/*global angular:true */

Reference: https://incident57.com/codekit/help.html#jshint

Option 2 - for both jshint and jslint

Alternatively, you can define your globals in the Codekit config:

Within Codekit, open 'Project Settings'
Choose 'Syntax Checkers'
In the 'Custom Globals' textfield you can enter a list of comma separated variables and functions that you know are defined elsewhere outside your JS script.

Reference: https://incident57.com/codekit/help.html#jslint

FYI, I know this is from 3 years ago, but yet I still came across this on Google and felt it needed additional options/further explanation for anyone else coming across it. Else they would think the reference path answer by Claies is the only option. Always best to present multiple options/routes. — redfox05, Nov 04 '15 at 17:27

score 1 · Answer 2 · answered Jul 12 '15 at 03:05

This is occurring due to the Code Linting process which is actively searching for syntax errors. Unfortunately, it doesn't realize that angular is a global variable which is available to your script file, because it is declared in a different file. It actually works in the browser (or the preview pane) but the Linting isn't aware of the existence of angular.

you can add /// <reference path="angular/angular.js" /> at the top of your JavaScript files to inform the syntax checker where the angular variable is actually declared.

'angular' is not defined while using Codekit

2 Answers2