angular应用执行过程

最新推荐文章于 2021-09-16 16:33:25 发布

achicuo3542

最新推荐文章于 2021-09-16 16:33:25 发布

阅读量130

点赞数

文章标签： javascript 人工智能 ViewUI

原文链接：http://www.cnblogs.com/koushikan/p/5939383.html

版权

angular 会在document上设监听函数监听DOMContentLoaded事件。

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

所有当所有脚本执行完毕，构建好angular的module之后。就会执行到该监听函数。
接下来会去寻找angular应用根元素（rootElement）.从指定元素上(默认是window.document)去找ng-app属性的值作为模块的标识符，也就是模块名。
实际上这些['ng-', 'data-ng-', 'ng:', 'x-ng-']前缀 +‘app’ 都是可以的,我们这里只提ng-app.
如果在document上没找到ng-app属性,会在子孙中找，并将找到的元素作为应用（application）根元素。

找到之后就会执行启动（bootstrap）函数

function bootstrap(element, modules, config) {
  var doBootstrap = function() {
    element = jqLite(element);  //将element用jqlite  warpped，以便操作
    ...
    modules.unshift('ng');
    var injector = createInjector(modules, config.strictDi);
    injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector',
       function bootstrapApply(scope, element, compile, injector) {
        scope.$apply(function() {
          element.data('$injector', injector);
          compile(element)(scope);
        });
      }]
    );
    return injector;
  };

知道这个的过程我们通常可以自己手动的来执行angular应用

     angular.element(document).ready(function(){
            angular.bootstrap(document,['myapp']);
     })

代码分析 :
创建注入器injector 。并使用它来执行编译链接rootElement的函数。
至此angular的启动流程结束。我们看到angular呈现的页面。rootElement比作身体的话，element上的响应事件构成了神经网络。让页面有了灵动。这神经网络的灵动都在编译链接过程中赋予element的。

下章分析injector.

转载于:https://www.cnblogs.com/koushikan/p/5939383.html