Proyecto generado con Angular CLI version 1.0.0-rc.0.

Aplicación para establecer criterios sobre las rutas anidadadas. Se utiliza:

• Routing (programática y declarativa)
• Nested Routing
• Lazy-loading
• Angular Material
• Compodoc
• Comunicación entre componentes
• Interface
• Directivas estructurales
• ngIf-else
• ngFor
• ngSwitch

Desplegada en firebase aquí

En esta aplicación se define un componente padre (se utiliza el app.component) y hijos (RedComponent, BlueComponent y GreenComponent. El app.component dispondrá de un router-outlet para renderizarlos. Se cargan con lazy-loading en este caso (se explica a continuación...)

 { path: 'blue', loadChildren: 'app/blue/blue.module#BlueModule' }, { path: 'red', loadChildren: 'app/red/red.module#RedModule' }, { path: 'green', loadChildren: 'app/green/green.module#GreenModule' }

Cada uno de los componentes tiene otros 3 componentes hijos (dentro de su módulo correspondiente)

• BlueComponent:
  • BlueComponentLight
  • BlueComponentMedium
  • BlueComponentDark
• RedComponent:
  • RedComponentLight
  • RedComponentMedium
  • RedComponentDark
• GreenComponent:
  • GreenComponentLight
  • GreenComponentMedium
  • GreenComponentDark

Las rutas hijas de Redcomponent se definen de la siguiente forma:

 const routes: Routes = [ { // Los componentes contenedores (RedComponent) necesitan tener un router-outlet para cargar sus hijos path: '', component: RedComponent, children: [ // los componentes de las rutas hijas se renderizarán en el router-outlet definido siempre en el componente contenedor { path: 'light', component: RedLightComponent }, { path: 'medium', component: RedMediumComponent }, { path: 'dark', component: RedDarkComponent }, // cuando pongan en el navegador pongan localhost:8080/red/ cargará el RedComponent ya que así lo mapeamos con el path '' // y en su router-routlet renderizará el dark por defecto, ya que con el path '' redireccionamos a /red/dark { path: '', redirectTo: 'dark', pathMatch: 'full'} ] }

Así queda el mapa de navegación (extensión Augury)

Las rutas pueden ir precedidas de /, ../ o nada. Establece la url.

Prefijos:

• '/' Añade la ruta a la raíz de la aplicación
• '' añade la ruta a partir del componente contenedor
• '../' añade ruta a la url a partir del componente padre del componente contenedor

Ejemplo: partiendo que la ruta para el componente contenedor es http://my-server/../componenteContenedor/

<a [routerLink]="['route-one']">Route One</a> -> http://my-server/../componenteContenedor/route-one <a [routerLink]="['../route-two']">Route Two</a> -> http://my-server/../route-two <a [routerLink]="['/route-three']">Route Three</a> ->http://my-server/route-three

Los módulos son cargados dinámicasmente. Se genera bundle (chunks) de cada uno y se cargan bajo demanda Módulos red, blue, green cargados mediante lazy-loading ({ path: 'path', loadChildren: 'lazy-path#lazy-module' },)

 { path: 'blue', loadChildren: 'app/blue/blue.module#BlueModule' }, { path: 'red', loadChildren: 'app/red/red.module#RedModule' }, { path: 'green', loadChildren: 'app/green/green.module#GreenModule' }

En el gráfico se pueden ver los chunk, al recargar la aplicación se cargan los bundles y el '2.chunk.js' que se corresponde con el bundle para el módulo por defecto (blue.module). Al pulsar sobre 'red' se carga 0.chunk.js que se corresponde con el bundle del módulo 'red.module' y al pulsar sobre 'green' se carga el 1.chunk.js (green.module)

Se utiliza Angular Material para las templates.

Instalar angular material

npm install --save @angular/material

Instalar modulo de animaciones, algún componente de AM lo utiliza en transiciones

npm install --save @angular/animation

Importar módulo de material en principal y modulo de animaciones:

imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(routes), MaterialModule.forRoot(), BrowserAnimationsModule ]

Importar en css uno de los temas del prebuilt y la material icons . Para ello en styles.css

En el resto de módulos no se añadiría el forRoot()...

@import '~https://fonts.googleapis.com/icon?family=Material+Icons'; @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Ver Documentacion de la aplicación aqui

Se utiliza compodoc

Instalación global

npm install -g @compodoc/compodoc

Instalación local

npm install --save-dev @compodoc/compodoc

Definir script en package.json (se añade -a screenshots para llevar la carpeta de screenshots al generado, y el theme)

"scripts": { "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -a screenshots" }

Lanzar script

npm run compodoc

Se genera carpeta /documentation

Se crea script en el package.json que borra /dist, genera el build para prod, documentación y despliega en firebase

"scripts": { ... "compodoc": "./node_modules/.bin/compodoc -p tsconfig.json -a screenshots", "deploy-firebase": "del dist && ng build --env=prod --aot && npm run compodoc && move documentation dist && firebase deploy" }