Capítulo 4 - Compilación
Capítulo 5 - NgModules
Capítulo 6 - Directivas
Capítulo 7 - Componentes Avanzados
Capítulo 8 - Router
Capítulo 9 - Inyección de Dependencias
Capítulo 10 - LifeCycle
Capítulo 11 - Pipes
Capitulo 12 - HTTP
Capítulo 13 - UI AngularMaterial \/ PrimeNG
Final
5 - NgModule
Capaz que una de las grandes mejoras en las betas y RC, fue el manejo del NgModule ... Este es quien maneja los hilos de la aplicación, es quien lleva la batuta , basicamente es quien orquesta a nuestra aplicación en Angular.
NgModule es la unidad de compilación y distribución de los componentes y pipes de Angular. En muchas cosas es similar a los modulos de ES6, porque tenemos declaraciones, imports, y exports.
Para ello vamos a ver como esta compuesta y para que sirve cada uno de los datos que recibe:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot(APPROUTER)
],
providers: [myService],
bootstrap: [InitComponent]
})
Esta declaración que vemos arriba es lo mas "comun" o inicial que podriamos ver...
NgModule es un decorador que se utiliza en app.module.ts @NgModule toma un objeto de metadatos que indica a Angular cómo compilar y ejecutar código de módulo.
Vamos a ir viendo paso a paso como funciona y que requiere cada función.
  • Declarations: este arreglo sirve para incluir todos los Componentes que creamos a lo largo de nuestro desarrollo para poder utilizarlo, si no declaramos nuestro componente, no vamos a poder utilizarlo, ya sea por el router o por llamarlo como un tag especifico. Tambien vamos a declarar nuestras Directivas
  • Imports: este arreglo va a tener "normalmente" lo que contiene *Module , lo que quiere decir es que normalmente todo lo que termina con Module va a estar ahi, normalmente son librerias y funcionalidades CORE, aca va a estar la composición de la funcionalidad que vamos a utilizar... Por ejemplo, RouterModule lo importamos para poder utilizar el router de Angular, y con el foorRoot le indicamos un tipo de objeto que tiene las rutas de cada uno de los componentes.
  • Providers: aquí tendremos otro arreglo en el cual vamos a poner todos nuestros servicios, nuestros providers, todo lo que contenga "@Injectable", estos servicios se levantan en el momento que se crea la APP en el navegador y son singletons, esto quiere decir que se instancian en una porción de memoria y se mantienen ahi hasta que se termine la app.
  • Bootstrap: Este arreglo va a tener nuestro componente inicial, nuestro "Init" por decirlo de alguna manera... donde vamos a tener el router por ejemplo... quien sea el contenedor inicial para nuestra aplicación.
El NgModule, cuando entro fue algo raro... antes estabamos acostumbrados a hacer otro tipo de cosas...
( Aquí esta el código del bootcamp que hicimos antes de que apareciera el NgModule https://github.com/jorgeucano/bootcamp )
Pero esto sirve para organizarnos un poco... realmente si no funciona los errores se entienden, y el NgModule ( y los IDE's y Editores de texto) ya saben que te falta y te lo marcan antes de que hagas nada.. te avisan =>
Entonces de esta forma vamos a estar mas "contenidos" a la hora de escribir nuestro codigo y sentir que podemos avanzar sin tener tantos problemas con el NgModule, digo esta claro el "error" que nos esta mostrando... Consider adding it to a NgModule declaration ... hace falta mas ???
Angular Modules help organize an application into cohesive blocks of functionality
"... ayudan a organizar una aplicación en bloques cohesivos de funcionalidad" .. esta claro, nos ayudan a ser cohesivos y funcionales...
Por lo tanto, este archivo lo vamos a tener abierto a lo largo de nuestro desarrollo ( algunas veces nos dara dolor de cabeza) pero sabemos que si este archivo no esta actualizado la app no funciona :-D ... primer punto para ver ...
Copy link