Diferencias

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

--- wiki2:angular:basics [2016/07/14 09:22]
alfred [Components]
+++ 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 180: / Línea 213: @@
 <code javascript>
 <mission-detail [mission]="selectedMission"></mission-detail>
+</code>
+:!: Recuerda que para que funcione has de incluir el nuevo selector como directiva en la lista de directivas de ese componente:
+<code javascript>
+@Component({
+  selector: 'newskid-app',
+  template: `
+  `,
+  styles: [`
+`],
+ 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 257: / Línea 307: @@
 </html>
 </code>
+==== Services ====
+Para hacer un servicio, una clase que se pueda instanciar automáticamente en el constructor, añadimos ''@Injectable()'' a la clase:
+<code javascript>
+import { Injectable } from '@angular/core';
+import { MISSIONS } from './mock-missions';
+@Injectable()
+export class MissionService {
+    getMissions () {
+        return Promise.resolve(MISSIONS);
+    }
+}
+</code>
+A partir de ahora puede ser usado en la clase:
+<code javascript>
+@Component({
+  selector: 'newskid-app',
+  ...
+ providers: [MissionService]
+})
+export class AppComponent implements OnInit {
+...
+  constructor(private missionService: MissionService) { }
+</code>
+Esto agrega una propiedad a la clase denominada ''missionService''. Fíjate que también hay que añadirlo en el array de ''providers''.
+==== Interfaces ====
+=== ngOnInit ===
+<code javascript>
+import { OnInit } from '@angular/core';
+export class AppComponent implements OnInit {
+  ngOnInit() {
+  }
+}
+</code>
+==== Promises ====
+Devolver\declarar una promise (función que hace algo en algún momento, que tarda algún tiempo y que, cuando le sale, devuelve algo):
+<code javascript>
+getHeroes() {
+  return Promise.resolve(HEROES);
+}
+</code>
+Usar lo que devuelve (HEROES es un array):
+<code javascript>
+getHeroes() {
+  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+}
+</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