2013-10-19 92 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