Angularjs中启动过程的示例分析

这篇文章主要介绍Angularjs中启动过程的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

成都创新互联公司主营卢龙网站建设的网络公司,主营网站建设方案,app软件开发公司,卢龙h5小程序定制开发搭建,卢龙网站营销推广欢迎卢龙等地区企业咨询

启动过程（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全局对象都有什么东西

Angularjs中启动过程的示例分析

接着，我们使用全局对象中的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

Angularjs中启动过程的示例分析

我们再来看看injector里都有什么

 /**
  * angular.injector();
  */
 var injector = angular.injector();
 console.log(injector);

一共有5个方法

annotate：分析函数签名(不要new的原因)

Angularjs中启动过程的示例分析

步骤二

检查是不是多次导入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，将它作为启动点，自动启动

 
 

 
   New Page
   
   
   
 

 
   
     {{Name}}

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

手动启动

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


   
     {{Name}}

 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，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)


   
     
       {{Name}}

/** * 第一个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 = 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 });

//构建模块加载器 angularModule = setupModuleLoader(window); try { angularModule('ngLocale'); } catch (e) { angularModule('ngLocale', []).provider('$locale', $LocaleProvider); }

/** * 定义模块 */ var myModule = angular.module("myModule", []); /** * 从debug的过程可以看到，angular中的“模块”只是一个闭包空间（或者叫命名空间） * 所有模块都被注册在modules这个对象上 */ console.log(myModule);

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, ......

重庆分公司，新征程启航

Angularjs中启动过程的示例分析

其他资讯