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

Solution 1

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"]);

Solution 2

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

Solution 3

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>

Solution 4

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>

Solution 5

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

View more solutions

Comments

[Erik]

@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.

[Naila Akbar]

what is "other_module"?

[FAvIo41]

an example of calling other module

[JimiSweden]

I also found this to be my solution I use "angular.min.js" and "angular-route.min.js" from cdn 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