Comprensión paso a paso de arranque manual de angularJS

bootstrapping

Question

Estaba repasando los conceptos básicos de angularJS sobre cómo se arranca manualmente. Me encontré con un enfoque diferente y encontré que este enfoque está mejor ajustado.

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

Moviéndome más lejos, encontré esta otra forma que lo rompe a lo básico . He comentado el código según mi entendimiento, pero ¿puede alguien explicarme con más detalles sobre cómo funcionan las cosas bajo el capó?

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

Además, no dude en informarme más sobre este tema sugiriendo más formas y mejoras.

Answer 1

¿Qué estamos tratando de lograr aquí?

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

Es la misma inyección de dependencia que usamos en todas partes en angularjs. Aquí estamos inyectando el módulo ng y registrando un value en él.

Y finalmente lo estamos pasando en angular.injector ()

  var $injector = angular.injector(modules)

¿Todavía no está convencido? Aquí está la versión más simple (la forma en que usamos DI en los controladores)

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

Ahora dos preguntas,

1. ¿Por qué estamos usando angular.injector?

   Debido a que angular.injector crea un objeto inyector que puede usarse para recuperar servicios, así como para inyección de dependencia. Necesitaríamos esto para obtener el servicio de $ compilación y una instancia de ámbito para vincular esa plantilla con.

2. ¿Por qué estamos configurando $rootElement ?

   Hacer saber angular el elemento raíz de aplicación. ¿Ha notado el uso del document en angular.bootstrap(document,[''myapp'']) ? Es por la misma razón.

   Según la documentación oficial de $ rootElement ,

   $ rootElement es el elemento donde se declaró ngApp o el elemento pasó a angular.bootstrap.

   Como no estamos usando ng-app ni el método estándar angular.bootstrap, tenemos que configurarlo manualmente.

A continuación, intentamos obtener el servicio de $compile desde la instancia del inyector que acabamos de recibir del paso anterior.

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

El servicio $ compile es el servicio a utilizar para la compilación. Invocar $ compile contra un marcado producirá una función que puede usar para vincular el marcado en un ámbito particular (lo que Angular llama una función de enlace)

De nuevo, para obtener el alcance, usamos $injector.get(''$rootScope'') y lo pasamos a la función de enlace compuesto que obtuvimos de $ compile.

angular.bootstrap(document,[myApp]) es solo un azúcar sintáctico sobre los pasos mencionados anteriormente. Crea una instancia de inyector, establece servicios relevantes con su ayuda, crea un amplio ámbito de aplicación y finalmente compila la plantilla.

Esto es evidente en la documentación oficial de angular.bootstrap , que menciona claramente que devuelve una instancia de inyector.

auto. $ inyector Devuelve el inyector recién creado para esta aplicación.

La misma historia está indicada en la guía oficial de bootstrap.

Tenga en cuenta que proporcionamos el nombre de nuestro módulo de aplicación que se cargará en el inyector como el segundo parámetro de la función angular.bootstrap . Tenga en cuenta que angular.bootstrap no creará módulos sobre la marcha. Debe crear cualquier módulo personalizado antes de pasarlos como un parámetro.

Por último, no hace falta decirlo ... todo esto debe hacerse después de que se haya cargado el documento HTML y el DOM esté listo.

EDITAR

Aquí hay una representación esquemática de este proceso. Proceso angular.bootstrap http://www.dotnet-tricks.com/Content/images/angularjs/bootstrap.png Referencia de imagen

Espero eso ayude :)