Uncaught ReferenceError: angular is not defined app.js

Question

我到处搜索这个问题的答案，但这个问题的每个实例似乎都相当独特。也许多几双眼睛可以帮助阐明这一点。

我在我的控制台中收到一条错误消息：

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

我的 angular 应用程序工作正常，但无论我做什么，这个错误仍然存在。我认为错误是在我重构代码以遵循 Todd Motto 编写的风格指南时出现的。无论如何，我的app.js如下：

(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);

})();

我的依赖如下：

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

通过反复试验，我一次省略了每个依赖项。我尝试重新排列每个依赖项的加载顺序，甚至尝试重新排列我的每个应用程序特定文件的列出顺序，但无济于事。

对此有什么想法吗？

Answer 1

感谢@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')

Uncaught ReferenceError: angular is not defined app.js

Uncaught ReferenceError: angular is not defined app.js

javascript

materialize

angularjs

bower

pug