Angular 2 - Routing Por Andrés Ciceri
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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)
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
Related Documents
