angularjs - 了解 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)
    }
  ];

还是一样的 依赖注入(inject) 我们在 angularjs 中到处使用。
这里我们注入(inject)模块 ng并注册 value进去。

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

  var $injector = angular.injector(modules)

还是不服气？这是更简单的版本(我们在 Controller 中使用 DI 的方式)

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

现在有两个问题，

为什么我们使用 angular.injector ？

因为，angular.injector创建一个注入(inject)器对象，该对象可用于检索服务以及依赖注入(inject)。我们需要它来获取 $compile 服务和一个范围实例来绑定(bind)该模板。

我们为什么要设置 $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来自我们刚刚从上述步骤收到的注入(inject)器实例的服务。

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

$compile 服务是用于编译的服务。对标记调用 $compile 将生成一个函数，您可以使用该函数将标记绑定(bind)到特定范围(Angular 称之为链接函数)

再次获得范围，我们使用 $injector.get('$rootScope')并将其传递给我们从 $compile 获得的复合链接函数。
angular.bootstrap(document,[myApp])只是上述步骤的语法糖。它创建一个注入(inject)器实例，在它的帮助下设置相关服务，创建应用程序范围，最后编译模板。

从 official documentation for angular.bootstrap 中可以看出这一点。 ，它清楚地提到它返回一个注入(inject)器实例。

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

希望能帮助到你 :)