Temas tratados:

Creación de componentes
Creación de módulos.
Routing

Estructura de la aplicación
app/
componentes: Irán componentes generales
servicios: Aquí irán los servicios de la aplicación
pipes: Pipes personalizados.
comun: Objetos comunes entre el resto de la aplicación como: listas, clases
(DTO), constantes, baseURL, etc.
directivas: Directivas personalizadas
animaciones: Animaciones personalizadas
app.component.ts: Es el componente principal de la aplicación.
app.module.ts: Módulo principal de la aplicación, en el cual se “matricularán”
los servicios, componentes, directivas, animaciones, pipes y módulos que la
aplicación requiera.

Header

Inicio

Footer

app.component
1.Generación de componentes
ng generate component componentes/header
ng generate component componentes/footer
ng generate component componentes/inicio

2 . Generación de módulo para Routing

Este módulo se encargará de gestionar las rutas (routes) principales de la
aplicación.
Para esto es necesario declarar una constante de tipo Routes, donde irán las
declaraciones de las rutas y luego se instanciará el módulo RouterModule para
más adelante ser exportado.

ng generate module app-routing

Dentro de la carpeta app-rounting creamos un archivo llamado routes.ts, en el

cual irán las declaraciones de las rutas generales para la aplicación.

import { Routes } from '@angular/router';

import { InicioComponent } from '../componentes/inicio/inicio.component';

export const routes: Routes = [

{ path: 'inicio', component: InicioComponent },
{ path: '', redirectTo: '/inicio', pathMatch: 'full' }
];
Esto traduce: Si la ruta es /inicio o vacío ‘’, instancia el componente
InicioComponent

Ahora, dentro de app-routing.module.ts importamos

import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';

En el decorador de imports, instanciamos el Router para la aplicación

RouterModule.forRoot(routes)

y se agrega en el decorador del módulo para luego exportarlo:

exports: [
 RouterModule
]
Resumen: se crean unas rutas de tipo Routes, con las cuales se instanciará un
objeto de la clase Router que se usará en toda la aplicación y luego para que el
resto de la aplicación tenga acceso a él se exporta.

@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
declarations: [],
exports: [
RouterModule
]
})

3. Matricular el AppRoutingModule en el módulo principal

Ahora es necesario que en el app.module importemos el módulo de routing

import { AppRoutingModule } from './app-routing/app-routing.module';

y actualizamos el decorador de imports:

AppRoutingModule

4. Configurar el componente principal para implementar el routing

Ahora en el app.component ponemos:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
El router-outlet será reemplazado por el componente indicado en los routes.
Ejemplo, si la ruta es /inicio, router-outlet cargará el componente InicioComponent
Módulo de Administrador
Se creará un módulo de Administrador en el cual se crearán videos, usuarios y se asignarán
videos a usuarios.
Se decide crear un nuevo módulo puesto que la sección del Administrador puede crecer y
requerir sus propios componentes, directivas,serivicos, routing etc. De esta manera la lógica
del Administrador estará en un solo lugar, lo cual lo hará más fácil de administrar.
 Header

Administrador

Crear Crear Asignar videos

video usuario

router-outlet del administrador

Footer

El módulo de administrador tendrá un componente llamado también administrador

para indicar que es el componente principal de dicho módulo. Además contará con
su propio routing.

ng generate module administrador

ng generate component administrador/administrador
ng generate module administrador/administrador-routing

El administrador-routing queda de la siguiente forma:

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { AdministradorComponent } from './administrador/administrador.component';

const adminRoutes: Routes = [

{
path: '',
 component: AdministradorComponent
}
];

@NgModule({
imports: [
RouterModule.forChild(adminRoutes)
],
exports: [
RouterModule
]
})
export class AdministradorRoutingModule { }

Luego se matricula el AdministradorRoutingModule en el administrador.module

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';
import { AdministradorComponent } from './administrador/administrador.component';

import { AdministradorRoutingModule } from './administrador-routing.module';

@NgModule({
imports: [
CommonModule,
AdministradorRoutingModule
],
declarations: [AdministradorComponent]
})
export class AdministradorModule { }

Ahora se crearán los componentes hijos del módulo administrador

ng generate component administrador/admin-usuarios

ng generate component administrador/admin-videos
ng generate component administrador/admin-asignaciones
Ahora se actualiza el routing del módulo de administración:

import { AdminVideosComponent } from './admin-videos/admin-videos.component';

import { AdminUsuariosComponent } from './admin-usuarios/admin-
usuarios.component';
import { AdminAsignacionesComponent } from './admin-asignaciones/admin-
asignaciones.component';

const adminRoutes: Routes = [

{
path: '',
component: AdministradorComponent,
children: [
{
path: '',
children: [
{ path: 'videos', component: AdminVideosComponent },
{ path: 'usuarios', component: AdminUsuariosComponent },
{ path: 'asignaciones', component: AdminAsignacionesComponent }
]
}
]
}
];

Ahora es necesario actualizar las rutas del app-routing (routing principal) para que
cuando se detecte la ruta /administrador, instancie el AdministradorModule:
{
path: 'administrador',
loadChildren: 'app/administrador/administrador.module#AdministradorModule'
}
Actualizamos el administrador.component con las rutas de los hijos

<h3>Administración</h3>
<a routerLink="./videos" routerLinkActive="active" >Videos</a>
<a routerLink="./usuarios" routerLinkActive="active" >Usuarios</a>
<a routerLink="./asignaciones" routerLinkActive="active" >Asignar
Videos</a>
<router-outlet></router-outlet>

Con el routerLink indicamos la ruta del enlace. De esta manera el router-outlet será
reemplazado por el componente correspondiente que se estableció en el routing
del administrador. .
Y con routerLinkActive indicamos que clase se implementará cuando el link sea el
activo
Establecemos estilos para el link activo en style.css:
a, a:visited{
text-decoration: none;
color: blue;
}
.active{
color: green !important;
}

Recomendación: hacer commit describiendo lo realizado

Recursos extras
● Angular Components
● Angular Component Styles
● Angular Templates
● Angular Routing and Navigation