一、前言
在AngularJS项目开发过程中，自己将遇到的问题进行了整理。回过头来总结一下 angular 的启动过程。
下面以实际项目为例进行简要讲解。
二、启动过程讲解
2.1 载入 ng 库
2.2 等待，直到 DOM 树构造完毕。
2.3 发现 ng-app，自动进入启动引导阶段。
2.4 根据 ng-app 名称找到相应的路由。
2.5 加载默认地址。
2.6 Js 顺序执行，加载相应模版页
sys_tpls/home.html
在此，可以看到 index 路由中只是填充了 ui-view 为 sys_login 的 div 模块，填充页面内容为 sys_tpls/sys_login.html。
至此，模型、控制器依次登场亮相。可见，此页面关联的控制器为 LoginController。其中用户 ID、密码均进行了 ng-model 的绑定。
至此 angularJS 项目的启动全过程大致讲解完毕。
三、AngularJS 的三种启动方式
3.1 自启动
Angular 会自动的找到 ng-app，将它作为启动点，自动启动。
<!DOCTYPE html><html ng-app="myModule"><head> <title>New Page</title> <meta charset="utf-8" /><script type="text/javascript" src="../../vendor/bower_components/angular/angular.min.js"></script> <script type="text/javascript" src="./02.boot1.js"></script></head><body> <div ng-controller="MyCtrl"> <span></span> </div></body></html>
复制代码
JS
var myModule = angular.module("myModule", []);myModule.controller('MyCtrl', ['$scope', function($scope) { $scope.Name = "Puppet"; }]);
复制代码
3.2 手动启动
在没有 ng-app 的情况下，只需要在 js 中添加一段注册代码即可
<body> <div ng-controller="MyCtrl"> <span></span> </div></body>
复制代码
JS
var myModule = angular.module("myModule", []);myModule.controller('MyCtrl', ['$scope', function($scope) { $scope.Name = "Puppet"; }]);/** * 这里要用ready函数等待文档初始化完成 */angular.element(document).ready(function() { angular.bootstrap(document, ['myModule']);});
复制代码
3.3 多个 ng-app
ng 中，angular 的 ng-app 是无法嵌套使用的，在不嵌套的情况下有多个 ng-app，他默认只会启动第一个 ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)
<body> <div id="app1" ng-app="myModule1"> <div ng-controller="MyCtrl"> <span></span> </div> </div> <div id="app2" ng-app="myModule2"> <div ng-controller="MyCtrl"> <span></span> </div> </div></body>
复制代码
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']);});
复制代码
评论