Angular kicks in
Démole una mirada al proyecto y cómo angular aparece en la imagen. Todos los archivos relevantes en esta etapa existen dentro de la carpeta src.
Lee mas sobre los archivos autogenerados por Angular CLI en el Apéndice 1: Generando un nuevo proyecto.
Abre el archivo index.html. El contenido que es renderizado en la ventana del navegador tiene todo lo que ves dentro del elemento <body>. Todo lo que puedes ver ahora es otro elemento no HTML: <todo-root>. Este elemento es actualmente un componente de Angular, definido en el archivo app/app.component.ts con la clase llamada AppComponent. (Vamos a revisar esto en el siguiente capítulo).
Nota: Si tu creaste este proyecto sin la bandera --prefix todo o -p todo entonces el elemento que verás será <app-root>. app es el prefijo por defecto para los componentes selectores del proyecto. Puedes cambiar la configuración en el archivo angular-cli.json.
Angular puede ser definido de muchas maneras. Una de ellas es código Javascript que se ejecuta cuando la aplicación es presentada en el navegador. Todo el código que tu escribas, componentes, módulos, servicios, etc. serán reconocidos por Angular. Angular ejecutará acciones acordemente. Por ejemplo, los componentes que tu escribas serán compilados en funciones de Javascript. Estas funciones insertan el contenido del componente en el DOM - Document Object Model el cual usa el navegador para mostrar la aplicación. Esto es como veras el componente que creaste en pantalla.
Entonces <todo-root> no es un elemento HTML, es un Componente de Angular. Cuando la aplicación está lista, el contenido del componente es insertadno en el lugar de la etiqueta <todo-root>.
Dentro de la etiqueta <todo-root> verás el texto "Loading...". todo lo que está dentro de la etiqueta será renderizado por el navegador después que Angular compile la aplicación. Cuando Angular termina, ya no verás "Loading..." en la pantalla. En lugar de esto, verás el componente <todo-root> y su contenido, el cual es "**todo works".
Angular necesita que nosotros definamos cuando queremos que compile. Para esto definimos módulos de Angular, o ngModules, los cuales son paquetes relacionados con cosas. Estos paquetes pueden incluir componentes, servicios, directivas, flujos y otros Módulos Angular. Nosotros ya tenemos un módulo raiz definido en el archivo app/app.module.ts. Vamos a ver este archivo.
La última lína en este arcihivo define una clase Javascript:
export es una palabra reservada en Javascript que dice que lo que sea que esté definido después debe ser expuesto a otros archivos que lo importen usando la sentencia import. Puedes ver ejemplos de estas clases importadas desde otros archivos en las primeras lineas de este archivo.
La clase AppModule está vacía. Esta obtendrá su funcionalidad de Angular, el cual identificará su rol con el código precedente a esta lúna, comenzando con @ngModule({}).
Cada entidad en Angular (ngModule, componentes, servicios, directivas y flujos) son solamente clases con un decorador. El decorador le dice a Angular cual es el rol de esta clase.
@ngModule({...}) es un decorador. Un decorador es solo una función. Cuando lo usamos colocamos @ antes de su nombre. De esta manera se convierte en un decorador: el toma lo que está escrito justo después de esta función y lo recibe como argumento. Los decoradores usualmente hacen algo con lo que vana decorar, por ejemplo, ngModule recive la clase AppModule y le agrega métodos y miembros que mas tarde son usados por Angular. De esta manera, Angular reconocerá que esta clase representa un ngModule.
Lo que pasa con la funcion decorador es usado por Angular para decorar la clase. Tu puedes ver que nosotros pasamos un objeto con miebros, cada miembro es una lista de otras clases. Explicaremos cortamente lo que cada miembro representa.
declaraciones: Una lista de elementos de Angular que son relevantes en este módulo. Ellos harán uso entre ellos (por ejemplo, una directiva usada en un componente). Nosotros pasamo aquí únicamente el componente - AppComponent, porque es todo lo que nuestra aplicación tiene actualmente.
importaciones: Una lista de ngModules los cuales son necesitados por este módulo. Por ejemplo, podemos usar elementos de FormsModule - directivas y servicios, dentro de AppComponent.
proveedores: Una lista de servicios los cuales son proveidos por la raiz de la aplicación. Un servicio es también una clase, y al proveer una sola instancia (singleton) es creado para toda la aplicación. Nosotros hablaremos sobre servicios mas tarde.
bootstrap: Este miembro es relevante únicamente a al módulo raiz. Tu no lo encontrarás en los módulos o en la lista de importaciones por ejemplo. Esto le dice a Angular que componente va a ser usado como componente raiz que comenzará la estructura completa. Así que actualmente tenemos un estructura de árbol d elos componentes que contruyen nuestra aplicación. En este caso, el componente raiz es AppComponent (con el selector todo-root). Nosotros vimos que es usado en index.html como el único componente dentro del <body>.
Cómo angular sabe que AppModule es el módulo raiz? Esto está definido en el archivo main.ts en la última línea:
Nosotros le pasamos nuestro módulo raiz al rederizador. Esta es la manera de decirle a Angular cual es el módulo inicial para comenzar nuestra aplicación. Y también escogemos un rederizador: platformBrowserDynamic. Este sabe como tomar nuestro código y agregar la información relevante (elementos, atributos, etc) al DOM del navegador.
También podemos usar diferentes renderizadores en este punto, por ejemplo uno que renderiza a elementos nativos de Android o OS! Nosotros solo necesitamos renderizador que sepa como tomar los templates (que usan notación HTML) y código Javascript, y crear elementos de una aplicación nativa moóvil. Un ejemplo de estos rederizadores es NativeScript por Telerik.
También hay renderizadores para Arduino, con los que te puedes conectar con sensores, botones, LEDs y otro hardware a tu aplicación. Puedes ver un gran ejemplo aquí [Construyendo Simon con Angular2-IOT].(https://medium.com/@urish/building-simon-with-angular2-iot-fceb78bb18e5#.430qu216w)
Nosotros hemos visto como decirle a Angular como comenzar a trabajr. como definir el módulo raiz y los componentes raízm y como usar el componente raiz.
En el siguiente capítulo vamos a ver como un componente es definido en Angular.
Last updated