Angular 2 Routing
0 likes821 views
This document discusses routing in Angular 2. It introduces routing concepts like RouteConfig, directives, parameters and nested levels. It provides examples of defining component routes and using routing directives. Key aspects covered include defining route configurations with @RouteConfig, accessing parameter and route data, and supporting nested and child routes. The document concludes that the Angular 2 router improves development speed, abstraction, code organization and readability, and the overall user experience compared to routing in Angular 1.
![Angular 2 - Definición Componente
import {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(){ }
}](https://image.slidesharecdn.com/ls8uygjnqhcqageh4mg5-signature-be277632a287be74402f2e1d8dae1b52673bda905695730e02c1473fbdfdccc7-poli-160430165609/85/Angular-2-Routing-7-320.jpg)
![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>](https://image.slidesharecdn.com/ls8uygjnqhcqageh4mg5-signature-be277632a287be74402f2e1d8dae1b52673bda905695730e02c1473fbdfdccc7-poli-160430165609/85/Angular-2-Routing-10-320.jpg)
![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}]}
])](https://image.slidesharecdn.com/ls8uygjnqhcqageh4mg5-signature-be277632a287be74402f2e1d8dae1b52673bda905695730e02c1473fbdfdccc7-poli-160430165609/85/Angular-2-Routing-13-320.jpg)
![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>](https://image.slidesharecdn.com/ls8uygjnqhcqageh4mg5-signature-be277632a287be74402f2e1d8dae1b52673bda905695730e02c1473fbdfdccc7-poli-160430165609/85/Angular-2-Routing-14-320.jpg)
Angular 2 Routing
- 1. Angular 2 - Routing Por Andrés Ciceri
- 2. Temas a tratar... ● Presentación. ● Angular 2 y su estructura. ● RouteConfig, Directivas & Params. ● Niveles & subniveles. ● Demo. ● Conclusiones & recomendaciones.
- 3. Quien soy?
- 4. 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)
- 5. Angular 2
- 6. Angular 2 - Que nos ofrece... Components Views Models Services Routers Templates Styles Interfaces Params Data Directives Providers
- 7. Angular 2 - Definición Componente import {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(){ } }
- 9. Angular 1 - Routing
- 10. 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>
- 11. @RouteConfig
- 12. Angular Component Router ● Servicio adicional ( router.dev.js ) ● <base href> : Método pushState. ● Directivas: ○ router-outlet ○ routerLink ● Definición del RouteConfig
- 13. 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}]} ])
- 14. 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>
- 15. 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'); } } }
- 18. Demo...
- 19. Conclusiones
- 20. Velocidad en desarrollo Abstracción Aislamiento Organización y legibilidad del código Experiencia de usuario
- 21. @Gracias