Herramientas de usuario
wiki2:angular:basics
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:angular:basics [2016/07/14 20:51] alfred [Routing] |
wiki2:angular:basics [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 65: | Línea 65: | ||
| <code> | <code> | ||
| missions: Mission[] = []; | missions: Mission[] = []; | ||
| + | </code> | ||
| + | |||
| + | Convertir objeto a JSON: | ||
| + | <code> | ||
| + | return JSON.stringify(this.model); | ||
| + | </code> | ||
| + | ==== Listas ==== | ||
| + | Encontrar un elemento en una lista: | ||
| + | <code javascript> | ||
| + | getHero(id: number) { | ||
| + | return this.getHeroes() | ||
| + | .then(heroes => heroes.find(hero => hero.id === id)); | ||
| + | } | ||
| + | </code> | ||
| + | Recoger unos elementos concretos: | ||
| + | <code javascript> | ||
| + | this.heroService.getHeroes() | ||
| + | .then(heroes => this.heroes = heroes.slice(1, 5)); | ||
| </code> | </code> | ||
| ===== Elements ===== | ===== Elements ===== | ||
| Línea 161: | Línea 179: | ||
| } | } | ||
| `] | `] | ||
| + | </code> | ||
| + | |||
| + | También podemos hacerlo desde un fichero externo con: | ||
| + | <code javascript> | ||
| + | styleUrls: ['app/dashboard.component.css'] | ||
| + | </code> | ||
| + | |||
| + | Para añadir los estilos globales de toda la app simplemente añadiremos el link al index.html: | ||
| + | <code html> | ||
| + | <link rel="stylesheet" href="styles.css"> | ||
| </code> | </code> | ||
| Línea 337: | Línea 365: | ||
| AppComponent únicamente debería manejar la navegación. El objeto router es el encargado de gestionarla y es una combinación del ''provideRouter'', directivas y configuración. | AppComponent únicamente debería manejar la navegación. El objeto router es el encargado de gestionarla y es una combinación del ''provideRouter'', directivas y configuración. | ||
| + | |||
| + | Es necesario tener en el index.html: | ||
| + | <code> | ||
| + | <head> | ||
| + | <base href="/"> | ||
| + | </code> | ||
| Crearemos un fichero ''app.routes.ts'' donde añadiremos todas las rutas: | Crearemos un fichero ''app.routes.ts'' donde añadiremos todas las rutas: | ||
| Línea 409: | Línea 443: | ||
| ]; | ]; | ||
| </code> | </code> | ||
| - | O parametrizar una ruta: | + | O parametrizar una ruta (por ejemplo ''/detail/11''): |
| + | <code> | ||
| + | { | ||
| + | path: 'detail/:id', | ||
| + | component: HeroDetailComponent | ||
| + | }, | ||
| + | </code> | ||
| + | Entonces tendremos que recoger el id dentro del componente donde se vaya a leer, para ello leemos de la url en el navegador: | ||
| + | <code javascript> | ||
| + | import { Component, OnInit, OnDestroy } from '@angular/core'; | ||
| + | import { ActivatedRoute } from '@angular/router'; | ||
| + | import { Hero } from './hero'; | ||
| + | import { HeroService } from './hero.service'; | ||
| + | |||
| + | @Component({ | ||
| + | selector: 'my-hero-detail', | ||
| + | templateUrl: 'app/hero-detail.component.html', | ||
| + | }) | ||
| + | export class HeroDetailComponent implements OnInit, OnDestroy { | ||
| + | hero: Hero; | ||
| + | sub: any; | ||
| + | |||
| + | constructor( | ||
| + | private heroService: HeroService, | ||
| + | private route: ActivatedRoute) { | ||
| + | } | ||
| + | |||
| + | ngOnInit() { | ||
| + | this.sub = this.route.params.subscribe(params => { | ||
| + | let id = +params['id']; /* convert id to int */ | ||
| + | this.heroService.getHero(id) | ||
| + | .then(hero => this.hero = hero); | ||
| + | }); | ||
| + | } | ||
| + | |||
| + | ngOnDestroy() { | ||
| + | this.sub.unsubscribe(); | ||
| + | } | ||
| + | |||
| + | goBack() { | ||
| + | window.history.back(); | ||
| + | } | ||
| + | } | ||
| + | </code> | ||
| + | - Necesitamos un observer de la url, para ello accedemos a la ActivatedRoute | ||
| + | - Nos aseguramos que nos subscrivimos a la ActivatedRoute en el ngOnInit y que en el ngOnDestroy nos desubscribimos. | ||
| + | - Necesitamos agregarlo al constructor | ||
| + | - En el ngOnInit nos subscribimos a los ''params'' para obtener la ''id'' de la ruta actual (ActivateRoute); luego se usará el servicio para obtener ese id concreto. | ||
| ==== Http ==== | ==== Http ==== | ||
wiki2/angular/basics.1468529511.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
