AngularJS sigue una serie de pasos cuando se carga dentro de cualquier página, al objeto de establecer el contexto de la aplicación, inicializar los objetos fundamentales de trabajo, revisar el DOM y unas cuantas cosas más .
A este proceso se le denomina fase de Bootstrapping.
Comprender dicho proceso nos puede ayudar a hacernos una idea muchos más clara del modo en que opera AngularJS, y por lo tanto, de cómo y dónde debemos intervenir en nuestro código.
Una vez que entiendas cómo se produce este proceso, muchos de los detalles de implementación del marco tendrán sentido. La razón de esto es que el proceso de arranque proporciona una idea de la forma en que se enlazan muchos de los componentes del marco de trabajo.
Como se ve en la siguiente figura, el diagrama de flujo ilustra este proceso paso a paso:
Cuando se carga una página HTML que incluye una referencia a AngularJS, este framework comienza su trabajo recorriendo el árbol DOM buscando el elemento que contiene la directiva ng-app.
Una vez que se encuentra ng-app, Angular utilizará el objeto $injector, que es la forma en que implementa el Patrón de Diseño conocido como Inyección de Dependencias (DI). Aunque el término puede sonar complejo, la verdad es que no es así. En pocas palabras, un objeto será el encargado de suministrar las instancias de otros en lugar de tenerlo que hacer nosotros mismos.
El $injector de Angular actúa como un "centro de registro" para el objeto $provide y es responsable de mantener las referencias a todos los objetos registrados, de crear instancias de tipos, invocar métodos y cargar módulos. Lo importante es que el inyector inicializa el objeto raíz $scope, que servirá como contexto para el modelo de aplicaciones.
El siguiente paso es revisar los objetos básicos de Angular e ir relacionándolos entre sí.
En AngularJS, podemos definir 5 piezas fundamentales. A saber:
- Módulos: Mediante ellos, podemos crear las distintas "áreas de la aplicación" (o contextos de trabajo, si se quiere), además de servir como mecanismos de ayuda en la creación de otros objetos (que se asocian con esas áreas de forma automática).
- Servicios: Son los que contienen la lógica de negocio y que -igualmente- podemos construir a partir de unos patrones de diseño.
- Controladores: Responden a las acciones sobre el modelo e implican la respuesta de la Interfaz de Usuario
- Directivas: Extienden el HTML en forma de atributos personalizados.
- Filtros: Nos permiten modificar las salidas de la información, las cuales podemos personalizar a nuestro gusto.
Esto no significa que no existan otros objetos importantes, pero estos son los fundamentales. Ten presente que en AngularJS existe un entramado y un conjunto de relaciones muy grande entre los objetos, necesario para conseguir el modelo de programación declarativo, donde se tiende a decir qué se quiere obtener, más que cómo se deben hacer las cosas para obtenerlo