Para poder iniciar una app angular, lo podemos hacer de varias formas.

 

1. De forma declarativa(Inicialización automática). Para ello solo necesitamos crear un archivo html de la siguiente forma.

bootstrap01

 

Fijate que en la etiqueta body hemos puesto ng-app y referenciado el script angular.js. Se recomienda que el script se ponga al final del documento para no bloquear la carga de html mientras se carga Angular. En este caso no estamos utilizando la versión minimificada del archivo, para ello simplemente tienes que cambiar angular.js por angular.min.js.

 

ng-app. Aunque en un principio te puede llevar a pensar que se trata de una directiva, no es más que un marcador para decirle a angular por donde tiene que empezar y es requerido, si quieres cargar de forma automática.

 

Se puede declarar de las siguientes formas:

  1. ng-app
  2. data-ng-app
  3. x-ng-app
  4. class=”ng-app”
  5. ng:app

 

La última de las formas no se recomienda y simplemente es por compatibilidad con IE en versiones antiguas, si necesitas utilizarla tienes que declarar un namespace en el html.

bootstrap02

 

La primera de las formas ng-app es la más habitual y fijate que utiliza el prefijo “ng” con lo cual en tus módulos de angular evita la utilización de este prefijo, por evitar colisiones con Angular.

 

La utilización de data-ng-app te permite la utilización del atributo data-* de HTML5

 

HTML5 Custom Data Attributes (data-*)

 

La última de las formas x-ng-app es por la extensibilidad propuesta en HTML5 donde “x” es reservada para un atributo y “ng” sería el vendor/browser.

 

Extensibility

bootstrap03

 

Por último también puedes utilizarlo en un atributo class de la siguiente forma.

Si quieres profundizar en el inicio de angular puedes ir al archivo angularjs y ver el código de la función AngularInit.

bootstrap04

 

 

 

 

 

 

 

 

 

 

 

La forma automática realiza internamente los siguientes pasos.

 

  1. Se suscribe al evento DOMContentLoaded y comprueba que document.readyState esté establecido en “complete”.
  2. Carga el módulo asociado a ng-app, en este caso no tenemos cargado ninguno, puesto que es optional, si quieres cargar un módulo que veremos en el siguiente capítulo sería de la siguiente forma “ng-app=myModule”.
  3. Crea el inyector de dependencias.
  4. Compila el DOM.

 

Si nos centramos en nuestro ejemplo y viendo en el explorador el resultado sería este.

bootstrap05

 

Una cosa que no puedes pasar por alto y que debes de tener en cuenta es en el elemento donde introduces ng-app y observar el valor devuelto por la función data.

 

Desde la consola del explorador ejecuta las siguientes líneas de JavaScript.

 

var data = angular.element(document.querySelector(‘body’)).data();

data;

 

Observa como puedes acceder al injector de dependencias y al scope de tu app.

bootstrap06

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Inicialización manual. La forma de inicializar una app de angular de forma manual es a través de JavaScript.

bootstrap07

 

Como puedes observar llamamos siempre después de cargar angular.js y todos nuestros archivos a angular.bootstrap.

 

Esta función recibe dos parámetros:

 

  1. El elemento del dom que será nuestro elemento de inicio.
  2. Un array con el nombre de los módulos que quieres cargar en tu app.

 

Qué sentido tiene hacer esto cuando lo puedo hacer de forma automática/declarativa. Pues sencillo, de esta forma puedes cargar no sólo un módulo, sino varios. O bien poder ejecutar en el mismo html varias app’s de Angular, para ello tendrías que llamar las veces que necesites a angular.bootstrap con diferentes elementos del DOM.

bootstrap08

 

Una vez que esto se ejecuta con éxito, se ejecutan los pasos 3 y 4 de la forma automática.

 

  1. Crear el inyector de dependencias.
  2. Compilar el DOM.

 

La función angular.bootStrap devuelve  el inyector de dependencias($inject).

 

Como recomendación y excepto que en algún caso lo necesites por necesidades de tu app, no te recomendamos la utilización de esta forma.

 

3.Inicialización diferida. Por motivos de una carga previa que requiera de una gran carga de componentes o módulos se puede diferir la carga de angular haciendo lo siguiente.

 

  1. Establecer la propiedad “window.name” a valor “NG_DEFER_BOOTSTRAP!”.
  2. Llamar a la función angular.resumeBootStrap(); a la que le puedes pasar un array de módulos.

bootstrap09

 

 

 

 

 

 

 

 

Observa que el resultado en el explorador es distinto a cualquiera de las otras cargas, es decir no se ha llamado a la función interna doBootstrap y por tanto tu aplicación no se ha iniciado.

bootstrap10

 

 

 

 

 

 

 

 

Es justo después de llamar a angular.resumeBootstrap([]); cuando empieza a ejecutarse tu app Angular como puedes observar en la consola.

 

Pues esto junto con la selección de JQuery por Angular o en su defecto como es nuestro caso la utilización de jqLite, es el inicio de cualquier app Angular.  Si quieres utilizar JQuery no tienes más que agregar esta antes de la carga de Angular.

 

Te recomiendo que al igual que hemos accedido a data con jqLite, hagas el mismo proceso para los siguientes selectores.

 

angular.element(document.querySelector(‘input’)).data()

angular.element(document.querySelector(‘strong’)).data()

 

Eso unido a ver la propiedad ng339 de cualquiera de estos elementos te hará comprender esa magia que es el data() en cualquier elemento JQuery. Vamos que internamente se guarda una caché con todos los objetos y en el elemento DOM un key y en el caso de angular se almacena en la propiedad ng339. Esto no tiene otro objetivo que almacenar información ligada al DOM y de esa forma en próximas ejecuciones o ante cambios hacer más efectivo el acceso a objetos ligados al DOM.

 

 Ejemplo.

document.querySelector(‘input’).ng339

 

Referencias.

Bootstrap

angular.bootstrap

@_PedroHurtado y @XaviPaper

Vinculo hacia el anterior capitulo: (2) Arquitectura

Y aqui hacia el siguiente: (4) Modulo 

No hay comentarios

Dejar respuesta