de__bug de__bug - 28 days ago 9
AngularJS Question

Uncaught ReferenceError: angular is not defined app.js

I've searched high and low for an answer to this, but every instance of this problem seems to be fairly unique. Perhaps a couple extra sets of eyes can help shed some light on this.

I'm receiving an error in my console:


app.js:23 Uncaught ReferenceError: angular is not defined


My angular application is working just fine, but this error continues to persist despite what I do. I think the error came about when I restructured my code to follow a style guide written by Todd Motto. In any event, my app.js is as follows:

(function() {

function config($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partial/main'
})
.when('/assignment/:id', {
templateUrl: 'partial/assignment',
controller: 'SubmissionController'
}).otherwise({
redirectTo: '/'
});
}
angular
.module('myApp', ['ngRoute', 'ui.materialize', 'ngAnimate'])
.config(config);

})();


My dependencies are as follows:

doctype html
html(ng-app="myApp")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible", content="IE=edge")
meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")

title= title

link(rel='icon', type='image/png', href='favicon.ico')

// bower:css
link(rel='stylesheet', href='../bower_components/animate.css/animate.css')
// endbower

script(src='js/app.js') styles
link(rel="stylesheet", href="css/app.css")
link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")

body(ng-controller="AssignmentController")
block content

//- lib js
// bower:js
script(src='../bower_components/jquery/dist/jquery.js')
script(src='../bower_components/angular/angular.js')
script(src='../bower_components/Materialize/bin/materialize.js')
script(src='../bower_components/angular-route/angular-route.js')
script(src='../bower_components/angular-animate/angular-animate.js')
script(src='../bower_components/angular-materialize/src/angular-materialize.js')
// endbower

//- app js
script(src='js/app.js')
script(src='js/controllers.js')
script(src='js/services.js')
script(src='js/directives.js')
script(src='//localhost:35729/livereload.js')


Through trial and error I've omitted each dependency one at a time. I've tried rearranging the order in which each dependency is loaded and I've even tried rearranging the order in which each of my application specific files are listed, but to no avail.

Any thoughts on this?

Answer

Thanks to @JJJ

"Well you're loading app.js twice: once in the head before Angular has been loaded, and second time in the body after Angular. The first script throws an error but the app works because it runs without error the second time it's loaded:"

doctype html
html(ng-app="myApp")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1.0, maximum-scale=1.0")

    title= title    

    link(rel='icon', type='image/png', href='favicon.ico')

    // bower:css
    link(rel='stylesheet', href='../bower_components/animate.css/animate.css')
    // endbower

    // - [FIX] removed: script(src='js/app.js')         
    link(rel="stylesheet", href="css/app.css") 
    link(href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet")

  body(ng-controller="AssignmentController")
    block content 

    //- lib js
    // bower:js
    script(src='../bower_components/jquery/dist/jquery.js')
    script(src='../bower_components/angular/angular.js')
    script(src='../bower_components/Materialize/bin/materialize.js')
    script(src='../bower_components/angular-route/angular-route.js')
    script(src='../bower_components/angular-animate/angular-animate.js')
    script(src='../bower_components/angular-materialize/src/angular-materialize.js')
    // endbower  

    //- app js 
    script(src='js/app.js')
    script(src='js/controllers.js')
    script(src='js/services.js')
    script(src='js/directives.js')        
    script(src='//localhost:35729/livereload.js')  
Comments