理解angularJS的逐步手动引导

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

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

再往前走一步，我发现了。根据我的理解，我已经对代码进行了注释，但是有人可以向我解释更多关于如何在引擎盖下工作的细节吗

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

另外，请随时提出更多的方法和改进，以进一步启发我

我们在这里想要实现什么

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

这与angularjs中随处使用的依赖注入相同。 这里我们将注入模块

ng

，并在其中注册一个

最后我们将它传递到angular.injector（）中

还不相信吗？以下是更简单的版本（我们在控制器中使用DI的方式）

现在有两个问题,

为什么要使用angular.injector？

因为，创建了一个可用于检索服务和依赖项注入的注入器对象。我们需要它来获得$compile服务和绑定该模板的scope实例

为什么要设置

$rootElement

？

让angular知道应用程序的根元素。注意到

angular.bootstrap（文档，['myapp']）

中使用了

document

？这是出于同样的原因

据报道,

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

由于我们既不使用ng app，也不使用标准angular.bootstrap方法，因此必须手动设置

接下来，我们尝试从刚刚从上述步骤收到的injector实例中获取

$compile

服务

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

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

同样，为了获得作用域，我们使用

$injector.get（“$rootScope”）

并将其传递给从$compile获得的复合链接函数

angular.bootstrap（document，[myApp]）

只是上述步骤的一个语法糖分。它创建一个注入器实例，在它的帮助下设置相关服务，创建应用程序范围，最后编译模板

从中可以明显看出这一点，其中明确提到它返回一个喷油器实例

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

同样的故事也出现在

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

最后，不用说……所有这些都必须在加载HTML文档并准备好DOM之后完成

编辑

这是这个过程的图示。
（来源：）

---

希望有帮助：）

我想你的问题可能太宽泛了。有没有可能缩小范围？@hkBst:不知道在这个问题上该怎么做。我想了解引擎盖下发生了什么，我已经提供了所有步骤。是的，我在这件事上一直悬赏：（这帮了大忙。谢谢：）

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

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