Objetivo:
- Aprender como utilizar router-outlet
- Ver la utilidad de routerLink y routerLinkActive
- Abrir el archivo llamado users.component.html y actualizar su contenido como sigue (Debe quedar el contenido completo que se muestra abajo, eliminar lo necesario) :
<div class="row">
<div class="col-sm-4" *ngIf="users">
<ul class="list-group">
<li *ngFor="let u of users" (click)="selectUser(u)" class="list-group-item" [class.active]="u == activeUser">
{{u.name}} {{u.username}}
</li>
</ul>
<app-user-form (userCreatedEvent)="onUserCreated($event)"></app-user-form>
</div>
<div class="col-sm-8">
<div *ngIf="activeUser" class="user-actived">
<div class="col-sm-11"><h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2></div>
<div class="col-sm-1"><h2 (click)="deleteUser()" class="hang glyphicon glyphicon-trash"></h2></div>
</div>
<div *ngIf="!activeUser" class="user-actived">
<h2>Seleccionar un usuario</h2>
</div>
</div>
</div>
Tener en cuenta que se eliminó el header el tag main y se modificó el nombre del class del div principal.
- Crear un nuevo archivo llamado app.router.ts dentro del directorio app y actualizar su contenido como sigue:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { UserFormComponent } from './user-form/user-form.component';
export const ROUTE: Routes = [
{ path: '', redirectTo: 'users', pathMatch: 'full'},
{ path: 'users', component: UsersComponent},
{ path: 'new-user', component: UserFormComponent }
];
export const ROUTES: ModuleWithProviders = RouterModule.forRoot(ROUTE);
- Abrir el archivo llamado app.module.ts y agregar el route anteriormente creado como sigue:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ROUTES } from './app.route';
import { AppComponent } from './app.component';
import { UsersComponent } from './users/users.component';
import { UserFormComponent } from './user-form/user-form.component';
import { UserService } from './shared/services/user.service';
@NgModule({
declarations: [
AppComponent,
UsersComponent,
UserFormComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
ROUTES
],
providers: [
UserService
],
bootstrap: [AppComponent]
})
export class AppModule { }
- Abrir el archivo app.component.html y reemplazar su contenido por el siguiente:
<header>
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Mi Angular App!</a>
</div>
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav">
<li routerLinkActive="active"><a routerLink="/users" >Users</a></li>
<li routerLinkActive="active"><a routerLink="/new-user">New User</a></li>
</ul>
</div>
</nav>
</div>
</header>
<main>
<div class="container">
<router-outlet></router-outlet>
</div>
</main>
- Abrir el archivo users.component.css y actualizar el class llamado user-actived como sigue:
.list-group-item, .hang {
cursor: pointer;
}
.user-actived {
background-color: #ecf0f1;
margin: 0;
padding:10px;
}
- Abrir desde una consola el proyecto utilizando el comando ng serve y se muestra algo parecido a esto:
