本文介绍了Angularjs的启动过程分析，分享给大家

启动过程(v1.3.9)

步骤一

用自执行函数的形式让整个代码在加载完成之后立即执行

in angular.js Line6

（功能（窗口、文档、未定义)在窗户上暴露一个唯一的全局对象角度，线250

angular=窗口。角度| |(窗口。angular={ })获得其它工具模块第2129行

函数PublishExternalapi(angular){ extend(angular){ ' bootstrap ' : bootstrap，' copy': copy，' extend': extend，' equals': equals，' element': jqLite，' forEach': forEach，' injector': createInjector，' noop': noop，' bind': bind，我们来看看有角的全局对象都有什么东西

接着，我们使用全局对象中的是功能来遍历一下有角的全局对象上的属性，函数

定义变量计数器=0;for(var p in angular){ counter；if(棱角分明。IsFunction(angular[p]){ console。log(' function-' p)；} else { console。log(' property-' p '-' angular[p])；} } console.log(计数器);有两个财产，其它都是功能

我们再来看看注射器里都有什么

/** *棱角分明。喷油器();*/var喷油器=有角度。注射器()；console.log(注射器);一共有5个方法

注释：分析函数签名（不要新的的原因)

步骤二

检查是不是多次导入棱角分明：窗户。棱角分明。自举(通过检查指定的元素上是否已经存在注射器进行判断)

in angular.js第26041行

如果(窗口。棱角分明。bootstrap){//angular js已经加载，那么我们可以在这里返回.控制台。日志(' warn :多次尝试加载棱角分明，')；返回；}角度的三种启动方式

自动启动

有角的会自动的找到ng-app，将它作为启动点，自动启动

！DOCTYPE html html ng-app=' my module ' head title new Page/title meta charset=' utf-8 '/script type=' text/JavaScript ' src=' http :/./供应商/bower _ components/angular/angular。量滴js '/script脚本类型=' text/JavaScript ' src=' http :/02 .启动1。js '/脚本/头体div ng-controller=' MyCtrl ' span { { Name } }/span/div/body/html js

var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($scope) { $scope .名称='木偶；} ]);手动启动

在没有ng-app的情况下，只需要在射流研究…中添加一段注册代码即可

body div ng-controller=' MyCtrl ' span { { Name } }/span/div/body js

var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($scope) { $scope .名称='木偶；} ]);/** * 这里要用准备好的函数等待文档初始化完成*/angular.element(文档)。ready(function(){ angular。bootstrap(文档，['我的模块'])；});多个ng-app

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

body div id=' app 1 ' ng-app=' my module 1 ' div ng-controller=' my ctrl ' span { { Name } }/span/div/div id=' app 2 ' ng-app=' my module 2 ' div ng-controller=' my ctrl ' span { { Name } }/span/div/body js

/** * 第一个APP * @ type {[type]} */var my module 1=angular。模块(' mymodule 1 '，[])；myModule1.controller('MyCtrl '，['$scope '，function($scope) { $scope .名称='木偶；} ]);//angular.element(文档)。ready(function(){//angular。bootstrap(app 1，[' my module 1 '])；//});/** * 第二个APP * @ type {[type]} */var my module 2=angular。模块(' mymodule 2 '，[])；myModule2.controller('MyCtrl '，['$scope '，function($scope) { $scope .名字='文森特；} ]);角元素(文档)。ready(function(){ angular。bootstrap(app 2，[' my module 2 '])；});步骤三

尝试绑定jQuery，如果发现导入了jQuery，则使用导入的jQuery，否则，使用有角的自己封装的JQLite

在angular.js第1521行：

bindJQuery()；in angular.js第1534:行

jQuery=window . jQuery yif(jQuery jQuery。fn。on){ jqLite=jQuery；extend(jQuery.fn，{ scope : jqlitetprototype。作用域，isolate scope : jqlitetprototype。isolatescope，控制器： jqlitetprototype。注射器： jqlitetprototype控制器。注射器，inherita ta : jqlitetprototype。inheritadata })；测试

html ng-app='我的模块' body div ng-controller='我的ctrl ' span { { Name } }/span/div/div/body/html js

var myModule=angular。module(' myModule '，[])；myModule.controller('MyCtrl '，['$scope '，function($scope) { $scope .名称='木偶；}]);查看执行流程

步骤四

发布尼日利亚提供的应用程序接口

in angular.js第2162行第：行publishExternalAPI(角形)；

//构建模块加载器angularModule=setupModuleLoader(窗口);尝试{ angularModule(' nglo cale ')；} catch(e){ angularmdule(' nglo cale '，[]).提供程序(' $locale '，$ LocaleProvider)；}模块加载器的实现原理

在angular.js函数setupModuleLoader(窗口)中

函数setupModuleLoader(window){ var $ injectorminer=miner r(' $ injector ')；var ng miner=miner r(' ng ')；函数确保(obj，name，factory){ return obj[name]| |(obj[name]=factory())；} var angular=确保（窗口，‘有角度’，物体)；//我们需要暴露'棱角分明。$ $ minErr '到在引导角度过程中引用它的模块，如ngResource .$ $ minErr=有角度$ $ MINER | | MINER//把组件方法放到有角的的全局对象上，确保就是一个属性拷贝的过程返回确保（角度、'模块、函数(){ //模块缓存定义变量模块={ };}把工具函数给载到模块里

返回功能模块（名称，要求，配置).}查看模块里所包含的内容

！DOCTYPE html html ng-app=' my module '/HTMljs

/** * 定义模块*/var myModule=angular。module(' myModule '，[])；/** * 从调试的过程可以看到有角度的中的"模块"只是一个闭包空间（或者叫命名空间) * 所有模块都被注册在模块这个对象上*/控制台。日志(我的模块)；查看控制台

构建内置模块尼日利亚

in angular.js第2169行publishExternalAPI(角度)

angularModule('ng '，['ngLocale']，[' $ provider '，function ngModule($ provide){/$ $ healthereriprovider需要在$compileProvider之前，因为它正在使用它$提供商。提供程序({ $ $ signaturer i3360 $ $ signatureiprovider })；$提供者。提供程序(' $ compile '，$CompileProvider).指令({ a : html锚定向，input: inputDirective，加载了所有内置的指令，提供程序。注册尼日利亚内核提供商：两个最重要的$parser和$rootScope

总结

工具函数拷贝到有角的全局对象上；调用setupModuleLoader方法创建模块定义和加载工具（挂在全局对象窗户。有角度上);构建内置模块ng；创建尼日利亚内置的管理的和提供者；两个重要的提供者：$parse和$ rootScope步骤五

初始化棱角分明-查找Ng-app

jqLite(文档)。ready(function() { angularInit(文档，引导);});引导程序

创建注射器，拉起内核和启动模块，调用编制服务（一个ng-app只有一个注射器)

在angular.js第1415行

功能引导（元素、模块、配置){ 0.}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。