AngularJs ReferenceError: angular is not defined

Question

I trying to add a custom filter, but if I use the following code:

angular.module('myApp',[]).filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

But if I do so, I get: "ReferenceError: angular is not defined" in firebug.

The rest of application is working fine, I am using ng-app in a tag div not in tag html, and https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js

do you mean include some angular js file or put the code inside of filter.js? — FAvIo41, Jan 10 '13 at 14:53
"In order to create a new filter, you are going to create a phonecatFilters module and register your custom filter with this module:" http://docs.angularjs.org/tutorial/step_09 — Andrea Ligios, Jan 10 '13 at 15:05
Are you sure you're loading the angular.js script? Can you provide a jsfiddle with an example? — bmleite, Jan 10 '13 at 16:00
Well, finally I realize the problem. This is a single page with legacy code. I was injecting angular in a ajax partial page. If you have the same problem, put the angular.js in the base html and do workround with the $scope. Cheers and tks to every one. — FAvIo41, Jan 11 '13 at 13:51

score 47 · Answer 1 · edited Jun 14 '17 at 10:44

47

You should put the include angular line first, before including any other js file

edited Jun 14 '17 at 10:44

Mel

5,837
10
37
42

answered Apr 12 '13 at 15:20

Vũ Ngô

601
6
7

1

@lborgav because Angular needs to load before it is utilized. Hence if you don't put it at the top, a reference error will occur. – Erik May 20 '15 at 18:20

score 10 · Answer 2 · answered Nov 02 '15 at 17:48

I faced similar issue due to local vs remote referencing

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>

As ui-grid.js is dependent on angular.js, ui-grid requires angular.js by the time its loaded. But in the above case, ui-grid.js [locally saved reference file] is loaded before angularjs was loaded [from internet],

The problem was solved if I had both angular.js and ui-grid referenced locally and as well declaring angular.js before ui-grid

<script src="lib/js/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>

I also found this to be my solution I use "angular.min.js" and "angular-route.min.js" from cdn https://code.angularjs.org/1.5.0/ and ui-bootstrap-tpls.min.js from cdnjs.cloudflare.com, When using only local references it works as expected — JimiSweden, Feb 19 '16 at 12:32

score 5 · Accepted Answer · edited Jun 14 '17 at 10:44

5

Well in the way this is a single page application, the solution used was:

load the content with AJAX, like any other controller, and then call:

angular.bootstrap($('#your_div_loaded_in_ajax'),["myApp","other_module"]);

edited Jun 14 '17 at 10:44

Mel

5,837
10
37
42

answered Apr 23 '13 at 13:08

FAvIo41

271
1
3
11

what is "other_module"? – Naila Akbar Dec 11 '15 at 12:13
1

an example of calling other module – FAvIo41 Jan 04 '16 at 11:22

score 5 · Answer 4 · edited Nov 02 '16 at 12:56

Always make sure that js file (angular.min.js) is referenced first in the HTML file. For example:

----------------- This reference will THROW error -------------------------

< script src="otherXYZ.js"></script>
< script src="angular.min.js"></script>

----------------- This reference will WORK as expected -------------------

< script src="angular.min.js"></script>
< script src="otherXYZ.js"></script>

score 2 · Answer 5 · answered Jan 10 '13 at 16:25

As @bmleite already mentioned in the comments, you probably forgot to load angular.js.

If I create a fiddle with angular directives in it, but don't include angular.js I get the exact same error in the Chrome console: Uncaught ReferenceError: angular is not defined

score 2 · Answer 6 · answered May 25 '13 at 02:22

2

In case you'd happen to be using rails and the angular-rails gem then the problem is easily corrected by adding this missing line to application.js (or what ever is applicable in your situation):

//= require angular-resource

answered May 25 '13 at 02:22

Timo

3,335
30
25

score 1 · Answer 7 · answered Sep 05 '13 at 19:20

I ran into this because I made a copy-and-paste of ngBoilerplate into my project on a Mac without Finder showing hidden files. So .bower was not copied with the rest of ngBoilerplate. Thus bower moved resources to bower_components (defult) instead of vendor (as configured) and my app didn't get angular. Probably a corner case, but it might help someone here.

Elad Amsalem · Answer 8 · 2013-10-23T21:00:31.360

0

I think this will happen if you'll use 'async defer' for (the file that contains the filter) while working with angularjs:

<script src="js/filter.js" type="text/javascript" async defer></script>

if you do, just remove 'async defer'.

edited Oct 23 '13 at 21:00

answered Oct 23 '13 at 20:53

Elad Amsalem

1,490
1
12
14

score 0 · Answer 9 · answered Feb 20 '16 at 12:31

If you've downloaded the angular.js file from Google, you need to make sure that Everyone has Read access to it, or it will not be loaded by your HTML file. By default, it seems to download with No access permissions, so you'll also be getting a message such as:

GET http://localhost/myApp/js/angular.js

This maddened me for about half an hour!

AngularJs ReferenceError: angular is not defined

9 Answers9

Linked