Question

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

/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中未捕获的ReferenceError：app未定义”。有时它会发生在homeCtrl.js。

我做错了什么？感觉我需要在模块中安装控制器并将该模块传递到app.js文件中的app.config中。但是，a）我不确定是否允许和b）我不知道该怎么做。

Answer 1

我不确定$script是如何工作的，但是如果它的工作是加载js文件异步，那么就无法确定加载和执行文件的顺序。

在您的情况下，您必须先在其他脚本之前加载一些脚本。因此，在加载应用脚本之前，需要加载并执行angular*脚本。我认为订单应该是

Angular.min.js
角route.min.js
然后你的脚本app.js
然后以任何顺序执行您的controller \ directives \ services脚本。

Answer 2

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详细信息）

在Angular中加载模块

2 个答案: