启动过程（v1.3.9）
步骤一
用自执行函数的形式让整个代码在加载完成之后立即执行
in angular.js Line6
(function(window, document, undefined)
在window上暴露一个唯一的全局对象angular，Line250
angular = window.angular || (window.angular = {})
获得其它工具模块 Line 2129
function publishExternalAPI(angular) { extend(angular, { 'bootstrap': bootstrap, 'copy': copy, 'extend': extend, 'equals': equals, 'element': jqLite, 'forEach': forEach, 'injector': createInjector, 'noop': noop, 'bind': bind, .....
我们来看看angular全局对象都有什么东西
接着，我们使用全局对象中的isFunction 来遍历一下angular全局对象上的属性，函数
var counter = 0; for (var p in angular) { counter++; if (angular.isFunction(angular[p])) { console.log("function->" + p); } else { console.log("property-->" + p + "-->" + angular[p]); } } console.log(counter);
有两个property，其它都是function
我们再来看看injector里都有什么
/** * angular.injector(); */ var injector = angular.injector(); console.log(injector);
一共有5个方法
annotate：分析函数签名(不要new的原因)
步骤二
检查是不是多次导入Angular：window.angular.bootstrap(通过检查指定的元素上是否已经存在injector进行判断)
in angular.js line 26041
if (window.angular.bootstrap) { //AngularJS is already loaded, so we can return here... console.log('WARNING: Tried to load angular more than once.'); return; }
angular的三种启动方式
自动启动
Angular会自动的找到ng-app，将它作为启动点，自动启动
<!DOCTYPE html> <html ng-app="myModule"> <head> <title>New Page</title> <meta charset="utf-8" /> <script type="text/javascript" src=""></script> <script type="text/javascript" src="https://www.jb51.net/article/02.boot1.js"></script> </head> <body> <div ng-controller="MyCtrl"> <span>{{Name}}</span> </div> </body> </html>
js
var myModule = angular.module("myModule", []); myModule.controller('MyCtrl', ['$scope', function($scope) { $scope.Name = "Puppet"; } ]);
手动启动
在没有ng-app的情况下，只需要在js中添加一段注册代码即可
<body> <div ng-controller="MyCtrl"> <span>{{Name}}</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']); });
多个ng-app
ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)
<body> <div ng-app="myModule1"> <div ng-controller="MyCtrl"> <span>{{Name}}</span> </div> </div> <div ng-app="myModule2"> <div ng-controller="MyCtrl"> <span>{{Name}}</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']); });
步骤三
尝试绑定jQuery，如果发现导入了jQuery ，则使用导入的jQuery，否则，使用Angular自己封装的JQLite
in angular.js line 1521：
bindJQuery();
in angular.js line 1534:
jQuery = window.jQuery; if (jQuery && jQuery.fn.on) { jqLite = jQuery; extend(jQuery.fn, { scope: JQLitePrototype.scope, isolateScope: JQLitePrototype.isolateScope, controller: JQLitePrototype.controller, injector: JQLitePrototype.injector, inheritedData: JQLitePrototype.inheritedData });
测试