了解angularJS的逐步手动引导 [英] Understanding step wise manual bootstrapping of angularJS

问题描述

我正在学习有关如何手动引导的angularJS的基础知识.我遇到了不同的方法，发现此方法是最合适的.

I was going through the basics of angularJS about how it is manually bootstrapped. I came across different approach and found this approach to be best fitted.

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

再往前走，我遇到了这是另一种将其分解为基础的方法.根据我的理解，我已经对代码进行了注释，但是有人可以向我详细说明事情是如何进行的.

Moving further, I came across this another way which breaks it to basics. I have commented the code as per my understanding but can someone please explain to me in more details about how things are working under the hood.

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();
}

此外，请随时通过提出更多方法和改进来启发我.

Also, please feel free to enlighten me more on this topic by suggesting more ways and improvements.

推荐答案

我们要在这里实现什么?

what are we trying to achieve here?

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

这与我们在angularjs中到处使用的旧的依赖注入相同. 在这里，我们注入模块ng并注册一个值进入它.

That is same old dependency injection we use everywhere in angularjs. Here we are injecting the module ng and registering a value into it.

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

  var $injector = angular.injector(modules)

仍然不相信吗?这是更简单的版本(我们在控制器中使用DI的方式)

Still not convinced? Here's the simpler version(the way we use DI in controllers)

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

现在有两个问题，

1. 我们为什么要使用angular.injector?

因为 angular.injector 创建了一个注入器对象，该对象可以用于检索服务以及依赖项注入.我们需要它来获取 $ compile 服务和一个作用域实例来将该模板与之绑定.

Because, angular.injector creates an injector object that can be used for retrieving services as well as for dependency injection. We would need this to get $compile service and an instance of scope to bind that template with.

我们为什么要设置$rootElement?

why are we setting $rootElement ?

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

To let angular know the root element of application. Noticed the use of document in angular.bootstrap(document,['myapp'])? It is for the same reason.

根据 $ rootElement的官方文档，

$ rootElement 是声明ngApp的元素或 元素传递到angular.bootstrap中.

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

由于我们既没有使用ng-app也没有使用标准的angular.bootstrap方法，所以我们必须手动进行设置.

Since we are neither using ng-app nor the standard angular.bootstrap method, we have to set this manually.

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

Next, we try to get $compile service from the instance of injector we just received from above step.

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

$ compile服务是用于编译的服务.针对标记调用$ compile将产生一个函数，您可以使用该函数将标记与特定的 scope 绑定(Angular称为链接函数)

The $compile service is the service to use for compilation. Invoking $compile against a markup will produce a function you can use to bind the markup against a particular scope (what Angular calls a linking function)

再次获得作用域，我们使用$injector.get('$rootScope')并将其传递给我们从$ compile获得的复合链接函数.

Again to get the scope, we use $injector.get('$rootScope') and pass it on to composite link function we got from $compile.

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

angular.bootstrap(document,[myApp]) is just a syntactical sugar over above mentioned steps. It creates an injector instance, set relevant services with the help of it, creates application-wide scope and finally compiles the template.

从 angular.bootstrap官方文档中可以明显看出这一点. ，其中明确提到它返回了一个喷射器实例.

This is evident from the official documentation for angular.bootstrap, which clearly mentions that it returns an injector instance.

自动$ injector 返回为此应用程序新创建的注入器

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

官方引导程序指南

请注意，我们提供了要加载的应用程序模块的名称 进入喷射器 作为angular.bootstrap的第二个参数 功能. 请注意，angular.bootstrap不会在 飞.您必须先创建任何自定义模块，然后才能将它们作为 参数.

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准备就绪之后完成.

Finally, needless to say..all this has to be done after HTML-Document is loaded and DOM is ready.

编辑

这是此过程的示意图.
_{(来源: dotnet-tricks.com )}

Here's a diagrammatic representation of this process.
_{(source: dotnet-tricks.com)}

图像参考

希望它会有所帮助:)

这篇关于了解angularJS的逐步手动引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！