not - ¿Qué método debo usar para arrancar manualmente mi AngularJS?

ng-cloak not working

Question

He visto lo siguiente:

angular.bootstrap(document, [''TodoApp'']);
angular.bootstrap(angular.element("body")[0], [''TodoApp'']);

También la documentación de AngularJS menciona esto que realmente no entiendo.

   angular.element(document).ready(function() {
     angular.bootstrap(document);
   });

¿Hay alguna diferencia entre estos métodos? En particular, ¿qué hace el último método de los documentos angulares? ¿Es mejor usar uno que el otro?

Answer 1

Son más o menos iguales, con algunas diferencias:

angular.bootstrap(document, [''TodoApp'']);

Esto funcionará si tienes tus scripts cargados al final de la página (en lugar de en el encabezado).

De lo contrario, el DOM no se cargará en el momento de iniciar la aplicación (no habrá ninguna plantilla para compilar, las directivas no tendrán ningún efecto).

Éste funciona: plnkr

Éste no lo hace: plnkr

angular.bootstrap(angular.element("body")[0], [''TodoApp'']);

Lo mismo que antes, usando body como raíz de la aplicación. Utiliza un selector que no está disponible en jqLite, por lo que necesita tener jQuery completo incluido en la aplicación.

No estoy seguro de cuál es la ventaja de usar body lugar de document , pero probablemente tenga algo que ver con las pruebas e2e , como se explica en este comment

plknr

angular.element(document).ready(function() {
  angular.bootstrap(document);
});

Este realmente espera a que se cargue el DOM , por lo que funcionará incluso si incluye sus scripts en el encabezado.

Básicamente, es el mismo que $(document).ready( jQuery $(document).ready( , pero usando el elemento jqLite de angular.element .

En el último ejemplo, no se están pasando módulos a la función bootstrap, lo más probable es que tenga que declarar su módulo principal, a menos que su aplicación solo incluya controladores en el espacio de nombres global.

Así que la última opción será como la siguiente, para ser similar a las otras dos:

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

plknr

Supongo que la mayoría de las veces la apuesta más segura es usar este último enfoque.