Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:angular:basics [2016/07/14 12:03]
alfred [Interfaces]
+++ wiki2:angular:basics [2020/05/09 09:25] (actual)
@@ Línea 60: / Línea 60: @@
   name: 'Windstorm'
 };
+</code>
+Una propiedad a la que se le asigna un array vacío:
+<code>
+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>
 ===== Elements =====
@@ Línea 156: / 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>
@@ Línea 191: / Línea 224: @@
  directives: [MissionDetailComponent]
 })
+</code>
+=== Template en fichero ===
+En vez de usar la propiedad ''template'' usaremos la propiedad ''templateUrl'':
+<code javascript>
+templateUrl: 'app/dashboard.component.html',
 </code>
 ==== Templates for components ====
@@ Línea 322: / Línea 361: @@
 }
 </code>
+==== Routing ====
+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:
+<code javascript>
+import { provideRouter, RouterConfig }  from '@angular/router';
+import { HeroesComponent } from './heroes.component';
+const routes: RouterConfig = [
+  {
+    path: 'heroes',
+    component: HeroesComponent
+  }
+];
+export const appRouterProviders = [
+  provideRouter(routes)
+];
+</code>
+La ''RouterConfig'' es un array de definiciones de ruta. Aquí únicamente tenemos una definición, pero podemos añadir más. Una difinición tiene un path (el path con el que hace match la URL, en este caso ''/heroes'') y un componente (el componente que se crea en esa ruta).
+El router ha de ser importado en el bootstrap:
+<code javascript>
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { AppComponent } from './app.component';
+import { appRouterProviders } from './app.routes';
+bootstrap(AppComponent, [
+  appRouterProviders
+]);
+</code>
+Una de las directivas de router (''ROUTER_DIRECTIVES'') es ''<router-outlet>''. Si lo añadimos en una template (ejemplo de app.component):
+<code javascript>
+import { Component } from '@angular/core';
+import { ROUTER_DIRECTIVES } from '@angular/router';
+import { HeroService }     from './hero.service';
+@Component({
+  selector: 'my-app',
+  template: `
+    <h1>{{title}}</h1>
+    <a [routerLink]="['/heroes']">Heroes</a>
+    <router-outlet></router-outlet>
+  `,
+  directives: [ROUTER_DIRECTIVES],
+  providers: [
+    HeroService
+  ]
+})
+export class AppComponent {
+  title = 'Tour of Heroes';
+}
+</code>
+También podemos crear una redirección:
+<code javascript>
+const routes: RouterConfig = [
+  {
+    path: 'missions',
+    component: MissionsComponent
+  },
+  {
+    path: '',
+    redirectTo:'/dashboard',
+    pathMatch: 'full'
+  },
+  {
+    path: 'dashboard',
+    component: DashboardComponent
+  }
+];
+</code>
+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 ====

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página