angular启动过程分析

启动过程

步骤一

用自执行函数在代码完成加载后立即执行
```
function(window, document, undefined)
```

在window上暴露一个唯一的全局对象angular，Line250

 /** @name angular */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,'toJson': toJson,'fromJson': fromJson,'identity': identity,'isUndefined': isUndefined,'isDefined': isDefined,'isString': isString,'isFunction': isFunction,'isObject': isObject,'isNumber': isNumber,'isElement': isElement,'isArray': isArray,'version': version,'isDate': isDate,'lowercase': lowercase,'uppercase': uppercase,'callbacks': {counter: 0},'$$minErr': minErr,'$$csp': csp});

我们来看看angular全局对象都有什么东西

接着，我们使用全局对象中的isFunction 来遍历一下angular全局对象上的属性，函数
我们再来看看injector里都有什么

步骤二

检查是不是多次导入Angular：window.angular.bootstrap(通过检查指定的元素上是否已经存在injector进行判断)

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="../../vendor/bower_components/angular/angular.min.js"></script><script type="text/javascript" src="./02.boot1.js"></script>
</head><body><div ng-controller="MyCtrl"><span>{{Name}}</span></div>
</body>
</html>

var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',function($scope) {$scope.Name = "Puppet";}
]);

方式2：手动启动

在没有ng-app的情况下，只需要在js注册一段代码即可

<body><div ng-controller="MyCtrl"><span>{{Name}}</span></div>
</body>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：多个ng-app

ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)

<body><div id="app1" ng-app="myModule1"><div ng-controller="MyCtrl"><span>{{Name}}</span></div></div><div id="app2" ng-app="myModule2"><div ng-controller="MyCtrl"><span>{{Name}}</span></div></div>
</body>/*** 第一个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

bindJQuery();

转自：http://segmentfault.com/a/1190000002788586

转载于:https://www.cnblogs.com/startmyways/p/angular.html

angular启动过程分析相关推荐

嵌入式linux启动过程分析,嵌入式Linux裸机开发（二）——S5PV210启动过程分析
嵌入式Linux裸机开发(二)--S5PV210启动过程分析一.iROM启动方式简介友善之臂Smart210开发板的SoC为三星S5PV210,S5PV210采用iROM启动方式进行启动,通过查阅 ...
OpenWrt启动过程分析+添加自启动脚本【转】
一.OpenWrt启动过程分析转自: http://www.eehello.com/?post=107 总结一下OpenWrt的启动流程:1.CFE->2.linux->3./etc/p ...
pixhawk PX4FMU和PX4IO最底层启动过程分析
摘要: pixhawk PX4FMU和PX4IO最底层启动过程分析1.1 主处理器和协处理器的固件烧写和运行流程首先,大体了解PX4IO 与PX4FMU各自的任务.PX4IO(STM32F100)为P ...
linux 重定位arm,Arm linxu启动过程分析（一）
本文着重分析 FS2410 平台 linux-2.6.14 内核启动的详细过程,主要包括: zImage 解压缩阶段. vmlinux 启动汇编阶段. startkernel 到创建第一个进程阶段三个 ...
linxu 启动过程分析
linxu 启动过程分析 Linux启动过程如下:当用户打开PC的电源,BIOS开机自检,按BIOS中设置的启动设备(通常是硬盘)启动,接着启动设备上安装的引导程序lilo或grub开始引导Linux ...
开机SystemServer到ActivityManagerService启动过程分析
开机SystemServer到ActivityManagerService启动过程一从Systemserver到AMS zygote-> systemserver:java入层口: /*** ...
AliOS Things的启动过程分析（一）
AliOS Things的启动过程分析(一) 在本篇文章中,我们以developerkit开发板为例,介绍AliOS Things的启动过程.AliOS Things支持多种工具链进行编译链接的方式生 ...
Chromium的GPU进程启动过程分析
Chromium除了有Browser进程和Render进程,还有GPU进程.GPU进程负责Chromium的GPU操作,例如Render进程通过GPU进程离屏渲染网页,Browser进程也是通过GPU ...
Android开发入门教程2-Android init 启动过程分析
Android init 启动过程分析分析android的启动过程,从内核之上,我们首先应该从文件系统的init开始,因为 init 是内核进入文件系统后第一个运行的程序,通常我们可以在linu ...

angular启动过程分析

angular启动过程分析相关推荐

最新文章

热门文章