Question

[Solved] AngularJs ReferenceError: angular is not defined

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

Enquirer: FAvIo41

||

Solution #1:

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

Respondent: Vũ Ngô

Solution #2:

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>
Respondent: nsk

Solution #3:

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>
Respondent: NagarajKaundinya

Solution #4:

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

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

Respondent: Mark Rajcok

Solution #6:

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
Respondent: Timo

Solution #7:

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.

Respondent: Michael Bushe

Solution #8:

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

Respondent: Elad Amsalem

Solution #9:

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!

Respondent: Chris

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy