Angular 2 Routing

Angular 2 - RoutingPor Andrés Ciceri

Temas a tratar...

● Presentación.● Angular 2 y su estructura.● RouteConfig, Directivas & Params.● Niveles & subniveles.● Demo.● Conclusiones & recomendaciones.

Quien soy?

HUGO ANDRES ESCOBAR CICERI

Ing. Telemático

U. ICESI

Cargo:

Full Stack Developer -> Frontend Developer

Empresa:

Instituto Humboldt - SIB Colombia -> Techno Apes

En Curso:

Maestría Ing. Software - Uniandes.

Contacto:

Mail : [email protected]

Github: andresciceri

Twitter: @Sibun_freak

Site : andresciceri.co (Coming Soon)

mailto:[email protected]

Angular 2

Angular 2 - Que nos ofrece...

Components

Views

Models

Services

Routers

Templates Styles Interfaces

Params Data

Directives Providers

Angular 2 - Definición Componenteimport {Component, OnInit} from 'angular2/core';

import {Location, RouteConfig, RouterLink, Router,ROUTER_DIRECTIVES,ROUTER_PROVIDERS} from 'angular2/router';

import {HouseComponent} from './house.component';

@Component({

selector: 'serviceHome',

templateUrl: 'templates/service-home.html',

cssUrl: ['css/service.css'],

directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

{

path: '/',

name: 'House',

component: HouseComponent,

useAsDefault : true

}

])

export class ServiceFormComponent implements OnInit {

constructor(private _router: Router){}

ngOnInit(){ }

}

...AntesRouting Angular 1

Angular 1 - Routing

Angular 1 - Routing

JS:

var app = angular

.module('myApp', [

'ngRoute'

]).config(function ($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'views/home.html',

controller: 'HomeCtrl',

controllerAs: 'home',

label: 'Inicio'

})

.when('/results/collections/:idCol', {

templateUrl: 'views/main.html',

controller: 'MainCtrl',

controllerAs: 'main',

label: 'Resultados'

})

}

HTML:

<!doctype html>

<html lang="en" ng-app="myApp">

<head>

...

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/angular-route/angular-route.js"

></script>

<script src="js/app.js"></script>

<script src="js/controllers.js"></script>

</head>

<body>

<div ng-view></div>

</body>

</html>

@RouteConfig

Angular Component Router

● Servicio adicional ( router.dev.js )● <base href> : Método pushState.● Directivas:

○ router-outlet○ routerLink

● Definición del RouteConfig

Definición del @RouteConfig

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({

...

})

@RouteConfig([

{

path: '/catalogo/...',

name: 'Catalogo',

component: CatalogoComponent,

useAsDefault: true,

data: { option : 3 }

},

{path: '/ventas', name: 'Ventas', component: VentasComponent},

{path: '/ventas/:id', name: 'VentaDetalle', component: VentaComponent},

{path: '/pagos', name: 'Pagos', redirectTo: ['Catalogo', 'Producto', {id:1}]}

])

Directivas del Router

Template:

<h1 class="title">Componente template</h1>

<nav>

<a [routerLink]="['Ventas']">Listado de Ventas</a>

<a [routerLink]="['/ventas',{id : 1}]">Venta Detalle</a>

<a [routerLink]="['/catalogo','Producto',{idProducto : 2}]">Producto Detalle</a>

</nav>

<router-outlet></router-outlet>

Params & Data

Importar componentes:

import {Router,RouteParams,ROUTER_PROVIDERS,ROUTER_DIRECTIVES,RouteData} from 'angular2/router';

Inyectar en el constructor:

export class ProductoComponent {

constructor(params : RouteParams, data: RouteData, private _router: Router){

if (data.get('search') !== null){

this.dataSearch = params.get('text');

} else if (data.get('supplier') !== null) {

this.dataSupplier = params.get('supplier');

} else {

this.category = params.get('category');

}

}

}

Niveles & Subniveles

Niveles & Subniveles

‘/...’

‘/nivel1/...’‘/item/:id’

‘/category/:id’

‘/profile/:id’

Demo...

Conclusiones

Velocidad en desarrollo

Abstracción

Aislamiento

Organización y legibilidad del código

Experiencia de usuario

@Gracias