FAvIo41
FAvIo41

Reputation: 271

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

Upvotes: 16

Views: 112642

Answers (9)

FAvIo41
FAvIo41

Reputation: 271

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

Upvotes: 5

Vũ Ngô
Vũ Ngô

Reputation: 601

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

Upvotes: 47

NagarajKaundinya
NagarajKaundinya

Reputation: 51

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>

Upvotes: 5

Chris
Chris

Reputation: 1

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!

Upvotes: 0

nsk
nsk

Reputation: 1463

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>

Upvotes: 10

Elad Amsalem
Elad Amsalem

Reputation: 1871

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

Upvotes: 0

Michael Bushe
Michael Bushe

Reputation: 1553

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.

Upvotes: 1

Timo
Timo

Reputation: 3404

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

Upvotes: 2

Mark Rajcok
Mark Rajcok

Reputation: 364677

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

Upvotes: 2

Related Questions