了解 angularJS 的逐步手动引导

Question

我正在学习 angularJS 的基础知识，了解它是如何手动引导的。我遇到了不同的方法，发现 this approach 最合适。

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

再往前走，我遇到了this another way which breaks it to basics。我已经根据我的理解对代码进行了评论，但有人可以向我详细解释一下事情是如何在引擎盖下工作的吗？

window.onload = function (){

  var $rootElement = angular.element(window.document);
  var modules = [
    'ng',       // angular module
    'myApp',    // custom module
    // what are we trying to achieve here?
    function($provide){ 
        $provide.value('$rootElement',$rootElement)
    }
  ];

  var $injector = angular.injector(modules);      // one injector per application
  var $compile = $injector.get('$compile');       // Compile Service: it traverses the DOM and look for directives and  compile and return linking function. No accecess to scope
  var compositeLinkFn = $compile($rootElement);   // collection of all linking function. Here scope is getting accessed

  var $rootScope = $injector.get('$rootScope');   // Hold of the rootscope
  compositeLinkFn($rootScope);

  $rootScope.$apply();
}

此外，请随时通过建议更多方法和改进来启发我更多关于这个主题的知识。

Answer 1

what are we trying to achieve here?

var modules = [
    'ng',       // angular module
    'myApp',    // custom module
    function($provide){ 
        $provide.value('$rootElement',$rootElement)
    }
  ];

这与我们在 angularjs 中到处使用的旧 依赖注入 相同。这里我们注入模块 ng 并向其中注册一个 value。

最后我们将它传递给 angular.injector()

  var $injector = angular.injector(modules)

还不服气？这是更简单的版本（我们在控制器中使用 DI 的方式）

var $injector = angular.injector(['ng','myApp',function($provide){
    $provide.value('$rootElement',$rootElement)
}])

现在有两个问题，

我们为什么要使用 angular.injector？

因为，angular.injector 创建了一个注入器对象，可用于检索服务以及依赖注入。我们需要它来获得 $compile 服务和一个 scope 实例来绑定该模板。
为什么要设置$rootElement？

让angular知道应用程序的根元素。注意到 document 在 angular.bootstrap(document,['myapp']) 中的使用了吗？同样的道理。

根据 official documentation of $rootElement,

$rootElement is either the element where ngApp was declared or the element passed into angular.bootstrap.

因为我们既没有使用 ng-app 也没有使用标准的 angular.bootstrap 方法，所以我们必须手动设置它。

接下来，我们尝试从我们刚刚从上述步骤收到的注入器实例中获取 $compile 服务。

var $compile = $injector.get('$compile');

$compile 服务是用于编译的服务。针对 markup 调用 $compile 将生成一个函数，您可以使用该函数将标记绑定到特定的 scope （Angular 调用link调用函数)

再次获取范围，我们使用 $injector.get('$rootScope') 并将其传递给我们从 $compile 获得的复合 link 函数。

angular.bootstrap(document,[myApp]) 只是上述步骤的语法糖。它创建一个注入器实例，在它的帮助下设置相关服务，创建应用程序范围并最终编译模板。

这从 official documentation for angular.bootstrap 中可以明显看出，它清楚地提到它 returns 一个注入器实例。

auto.$injector Returns the newly created injector for this app

相同的故事在 official bootstrap guide

Note that we provided the name of our application module to be loaded into the injector as the second parameter of the angular.bootstrap function. Notice that angular.bootstrap will not create modules on the fly. You must create any custom modules before you pass them as a parameter.

最后，不用说了..所有这一切都必须在之后完成 HTML-文档已加载并且DOM已准备就绪。

编辑

这是此过程的示意图。
_{（来源：dotnet-tricks.com）}

Image Reference

希望对您有所帮助:)

了解 angularJS 的逐步手动引导

Understanding step wise manual bootstrapping of angularJS

bootstrapping

angularjs