Angularjs中啟動(dòng)過(guò)程的示例分析

js

 /**
  * 第一個(gè)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']);
 // });

 /**
  * 第二個(gè)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，如果發(fā)現(xiàn)導(dǎo)入了jQuery ，則使用導(dǎo)入的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
  });

測(cè)試

  

    
      {{Name}}
    
  

js

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

查看執(zhí)行流程

步驟四

發(fā)布ng提供的API

in angular.js line 2162 : publishExternalAPI(angular);

//構(gòu)建模塊加載器
angularModule = setupModuleLoader(window);
 try {
  angularModule('ngLocale');
 } catch (e) {
  angularModule('ngLocale', []).provider('$locale', $LocaleProvider);
 }

模塊加載器的實(shí)現(xiàn)原理

in angular.js function setupModuleLoader(window)

function setupModuleLoader(window) {

 var $injectorMinErr = minErr('$injector');
 var ngMinErr = minErr('ng');

 function ensure(obj, name, factory){
 return obj[name] || (obj[name] = factory());
 }
 var angular = ensure(window, 'angular', Object);
 // We need to expose `angular.$$minErr` to modules such as `ngResource` that reference it during bootstrap
 angular.$$minErr= angular.$ $minErr || minErr;
 //把module方法放到angular的全局對(duì)象上，ensure就是一個(gè)屬性拷貝的過(guò)程
return ensure(angular, 'module', function(){
  //模塊緩存
  var modules = {};
}

把工具函數(shù)給載到模塊里

return function module(name, requires, configFn) {
......
}

查看模塊里所包含的內(nèi)容

JS

/**
 * 定義模塊
 */
var myModule = angular.module("myModule", []);

/**
 * 從debug的過(guò)程可以看到，angular中的“模塊”只是一個(gè)閉包空間（或者叫命名空間）
 * 所有模塊都被注冊(cè)在modules這個(gè)對(duì)象上
 */
console.log(myModule);

查看控制臺(tái)

構(gòu)建內(nèi)置模塊ng

in angular.js line 2169 publishExternalAPI(angular)

 angularModule('ng', ['ngLocale'], ['$provide',
  function ngModule($provide) {
   // $ $sanitizeUriProvider needs to be before $compileProvider as it is used by it.
   $provide.provider({
    $ $sanitizeUri: $$SanitizeUriProvider
   });
   $provide.provider('$compile', $CompileProvider).
    directive({
      a: htmlAnchorDirective,
      input: inputDirective,
      ......

加載了所有內(nèi)置的directive,provider.注冊(cè)ng內(nèi)核Provider：兩個(gè)最重要的$parser 和 $rootScope

總結(jié)

1. 工具函數(shù)拷貝到angular全局對(duì)象上；

2. 調(diào)用setupModuleLoader方法創(chuàng)建模塊定義和加載工具（掛在全局對(duì)象window.angular上）；

3. 構(gòu)建內(nèi)置模塊ng；

4. 創(chuàng)建ng內(nèi)置的directive和provider；

5. 兩個(gè)重要的provider：$parse 和 $rootScope；

步驟五

初始化Angular - 查找Ng-app

 jqLite(document).ready(function() {
  angularInit(document, bootstrap);
 });

bootstrap

創(chuàng)建injector，拉起內(nèi)核和啟動(dòng)模塊，調(diào)用compile服務(wù)(一個(gè)ng-app只有一個(gè)injector)

in angular.js line 1415

function bootstrap(element, modules, config){
....
}

以上是“Angularjs中啟動(dòng)過(guò)程的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！