AngularJS進(jìn)階(三十九)基于項目實戰(zhàn)解析ng啟動加載過程

基于項目實戰(zhàn)解析ng啟動加載過程

前言

在AngularJS項目開發(fā)過程中，自己將遇到的問題進(jìn)行了整理。回過頭來總結(jié)一下angular的啟動過程。

下面以實際項目為例進(jìn)行簡要講解。

1.載入ng庫

2.等待，直到DOM樹構(gòu)造完畢。

3.發(fā)現(xiàn)ng-app，自動進(jìn)入啟動引導(dǎo)階段。

4.根據(jù)ng-app名稱找到相應(yīng)的路由。

5.加載默認(rèn)地址。

6.Js順序執(zhí)行，加載相應(yīng)模版頁

sys_tpls/home.html

7.在此，可以看到index路由中只是填充了ui-view為sys_login的div模塊，填充頁面內(nèi)容為sys_tpls/sys_login.html。

sys_tpls/sys_login.html

至此，模型、控制器依次登場亮相。可見，此頁面關(guān)聯(lián)的控制器為LoginController。其中用戶ID、密碼均進(jìn)行了ng-model的綁定。

至此angularJS項目的啟動全過程大致講解完畢。

注：AngularJS的三種啟動方式

方式1: 自動啟動

Angular會自動的找到ng-app，將它作為啟動點，自動啟動。

JS

var myModule = angular.module("myModule", []);

myModule.controller('MyCtrl', ['$scope',

function($scope) {

$scope.Name = "Puppet";

}

]);

方式2: 手動啟動

在沒有ng-app的情況下，只需要在js中添加一段注冊代碼即可

JS

var myModule = angular.module("myModule", []);

myModule.controller('MyCtrl', ['$scope',

function($scope) {

$scope.Name = "Puppet";

}

]);

/**

* 這里要用ready函數(shù)等待文檔初始化完成

*/

angular.element(document).ready(function() {

angular.bootstrap(document, ['myModule']);

});

方式3:多個ng-app

ng中，angular的ng-app是無法嵌套使用的，在不嵌套的情況下有多個ng-app，他默認(rèn)只會啟動第一個ng-app，第二個第三個需要手動啟動(注意，不要手動啟動第一個，雖然可以運行，但會拋異常)

JS

/**

* 第一個APP

* @type {[type]}

*/

var myModule1 = angular.module("myModule1", []);

myModule1.controller('MyCtrl', ['$scope',

function($scope) {

$scope.Name = "Puppet";

}

]);

// angular.element(document).ready(function() {

// angular.bootstrap(app1, ['MyModule1']);

// });

/**

* 第二個APP

* @type {[type]}

*/

var myModule2 = angular.module("myModule2", []);

myModule2.controller('MyCtrl', ['$scope',

function($scope) {

$scope.Name = "Vincent";

}

]);

angular.element(document).ready(function() {

angular.bootstrap(app2, ['myModule2']);

});

美文美圖

Angular AngularJS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。