2013-10-19 38 views
2

我是AngularJS的新手。在我的学习努力中,我依赖于AngularJS教程。现在,我正在尝试使用AngularSeed项目模板构建一个应用程序。我试图让我的项目尽可能模块化。出于这个原因,我的控制器分成几个文件。目前,我有以下几点:在Angular中加载模块

/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:app is not defined'。有时它发生在homeCtrl.js中。

我在做什么错?感觉就像我需要在模块中放置我的控制器,并在app.js文件的app.config中传递该模块。但是,a)我不确定是否允许,b)我不知道如何去做。

+0

看到这个链接,可能会帮助你,将'resolve'添加到提供者:http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker –

+0

它似乎正在为我工​​作。你使用什么服务器? login.html的外观如何? – vinaut

回答

1

angular-seed在过时的loader.js(它处理$ script)时发生了问题(问题:https://github.com/angular/angular-seed/pull/111)。这导致你正在看到的问题。

尝试获取最新的加载程序。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细节)

1

那么我不知道如何$script工作,但如果它的工作是加载js文件异步,那么你不能确定文件加载和执行的顺序。

在你的情况下,你需要先加载一些脚本才能加载其他脚本。因此,angular*脚本需要在加载应用程序脚本之前加载并执行。我觉得顺序应该是

  1. Angular.min.js
  2. 角route.min.js
  3. ,则脚本app.js以任意顺序
  4. 然后控制器\指令\服务脚本。
+1

$ script是一个异步加载器。所以它确保在调用它的函数之前加载所有脚本(在这种情况下是引导程序)。 $脚本使它,所以你不必担心订单。 – KayakDave