angularjs - 在 Angular 中加载模块

Question

我是 AngularJS 新手。在我的学习过程中，我依赖于 AngularJS 教程。现在，我正在尝试使用 AngularSeed 项目模板构建一个应用程序。我正在努力使我的项目尽可能模块化。因此，我的 Controller 被分成几个文件。目前，我有以下内容:

/app
 index.html
 login.html
 home.html
 javascript
   app.js
   loginCtrl.js
   homeCtrl.js

我的 app.js 文件具有以下内容:

'use strict';

var app = angular.module('site', ['ngRoute']);
app.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/login', {templateUrl: 'app/login.html', controller:'loginCtrl'});
    $routeProvider.when('/home', {templateUrl: 'app/home.html', controller:'homeCtrl'});

    $routeProvider.otherwise({redirectTo: '/login'});
});

我的loginCtrl.js 文件目前非常基本。它只有:

'use strict';

app.controller('loginCtrl',
    function loginCtrl($scope) {
    }
);

我的 homeCtrl.js 几乎是一样的，除了名字。它看起来像下面这样:

'use strict';

app.controller('homeCtrl',
    function homeCtrl($scope) {
    }
);

我的index.html 文件是 angularSeed index-async.html文件。但是，当我加载依赖项时，我有以下内容:

// load all of the dependencies asynchronously.
$script([
  'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js',
  'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-route.min.js',
  'javascript/app.js',
  'javascript/loginCtrl.js',
  'javascript/homeCtrl.js'
], function() {
  // when all is done, execute bootstrap angular application
  angular.bootstrap(document, ['site']);
});

我的问题是，有时我的应用程序可以运行，有时则不能。这几乎就像某些东西先于其他东西加载一样。

偶尔，我会收到此error 。其他时候，我在控制台窗口中收到错误消息:loginCtrl.js 中“ Uncaught ReferenceError :应用程序未定义”。有时 homeCtrl.js 也会发生这种情况。

我做错了什么？感觉就像我需要将 Controller 放在一个模块中，并将该模块传递到 app.js 文件的 app.config 中。然而，a)我不确定这是否允许，b)我不知道该怎么做。

Answer 1

Angular-seed 因过时的 loader.js(处理 $script)而出现问题(问题: https://github.com/angular/angular-seed/pull/111 )。这正是您所看到的问题的原因。

尝试获取最新的 loader.js ( https://github.com/angular/angular.js/blob/master/src/loader.js )

并抓取前缀https://github.com/angular/angular.js/blob/master/src/loader.prefix

和后缀https://github.com/angular/angular.js/blob/master/src/loader.suffix

或者您可以使用常规 <script>标记方法，并确保所有内容都按正确的顺序包含(如 @Chandermani 详细信息)