Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

?id=687ce7af-d833-4174-abae-a3ce10c05f9a

¿Cómo es el proceso de carga (Bootstrapping) de AngularJS?

Icono de advertencia ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.

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:

Bootstrap de AngularJS

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

Fecha de publicación:
Marino Posadas Marino es consultor, formador y escritor independiente sobre tecnologías Web y herramientas de desarrollo Microsoft. Durante los últimos 12 años ha sido reconocido por Microsoft como Most Valuable Professional (MVP) en diversas tecnologías, y es formador certificado (MCT) desde 1996. Es autor de 14 libros sobre programación, y ha escrito más de 500 artículos técnicos. También ha participado como “speaker” en conferencias y eventos internacionales para programadores en EE.UU., Méjico, Costa Rica, Inglaterra, Suiza y Portugal. Puedes seguirlo en Twitter o visitar su página web. Ver todos los posts de Marino Posadas
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.