Consumiendo un API con Angular

Acerca de mi

 David Fernando Zuluaga A

 

 

 

 

@David_fza

 

@dafer154

 

zuluaaristi@gmail.com

Temas a tocar

 

  • Origen
  • Angular CLI
  • Conceptos y arquitectura
  • Módulos y componentes
  • Servicios
  • Navegación
  • App DEMO

Origen

AngularJS comenzó a ser desarrollado en 2009 por Miško Hevery originalmente era un servicio de almacenamiento online de archivos JSONdonde el cobro dependía del peso en megabytes de cada archivo. Luego de este Angular sufrió una transformación drástica ya que este no era pensado en componentes.

 

Angular 2 -- (2014 )
Angular 4 -- ( 2015 )
Angular 5 -- ( 2016 )
Angular 6 -- (2017 )
Angular 7 -- ( 2018 )

Características de Angular 2 en delante

  • Modularidad: permite desarrollar una aplicación web en componentes
  • Tiempo de desarrollo: Recomiendan usar TypeScript, considerado como un superconjunto de JavaScript, que esencialmente añade tipado estático y objetos basados en clases.
  • Test:  cualquier elemento de la aplicación es fácilmente testeable gracias a frameworks como Karma y Jasmine. 
  • Rendimiento
  • Integración con otras tecnologías
  • Soporte a navegadores

 

Soporte en navegadores

Pre-requisitos

       1) VS code -- https://code.visualstudio.com/

       2) Atom -- https://atom.io/

       3) Sublime Text -- https://www.sublimetext.com/

       4) WebStorm -- https://www.jetbrains.com/webstorm/

  • Chrome Web Browser
  • Git

Pre-requisitos

NodeJS v. 4.x o superior     node -V

 

NPM v 3.x.x o superior       npm -V

 

npm i -g npm

Angular CLI

  • Herramienta de linea de comando para agilizar la creación de proyectos NG2
  • Generador de codigosencillo semilla(scaffolding) tipo Ruby On Rails

npm i -g angular-cli

 

https://cli.angular.io

Angular CLI

  • Creado por el equipo de NG2
  • Sigue las buenas practicas recomendadas por el equipo

 

Comandos

  • crear proyecto    ng new
  • generar ng generate <name>
  • Lanzar en desarrollo ng serve
  • Construir para desplegar a produccion ng build

Angular CLI comandos de generación

Component ng g component <nombre>
Directive ng g directive <nombre>
Pipe ng g pipe <nombre>
Service ng g service <nombre>
Class ng g class <nombre>
Interface ng g interface <nombre>
enum ng g enum <nombre>
Module ng g module <nombre>

Arquitectura

Modulos

Un módulo o NgModule declara un contexto de compilación para un conjunto de componentes. Un NgModule puede asociar sus componentes con código relacionado, como servicios, para formar unidades funcionales.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Componentes

Clases que controlan el comportamiento, interacción con el usuario. Cada componente define una clase que contiene data y lógica, y está vinculada a nuestro template HTML.

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Propiedades

sirve para asignar un valor a una propiedad de un elemento de un template. Generalmente se trata de un valor obtenido a través de una propiedad del componente, de modo que si el estado del componente cambia, también cambie la propiedad del elemento asignada en el template.

export class UserComponent {
    @input() name: string;
    @input() lastName: string
}


<my-user [name]="Jessica" [lastName]="Alba">
</my-user>

Eventos

La sentencia a ejecutar como respuesta a un evento se conoce con el nombre de "statement" en la documentación de Angular. Un statement es la declaración del comportamiento que debe realizarse al dispararse un evento.

<button (click)="procesarEvento($event)">Transmito el objeto evento</button

En el anterior ejemplo, al invocar al método procesarEvento() se le está enviando un $event, que contiene información sobre el evento click que se realizó.

Ciclo de vida del componente

Eventos que se disparan durante la inicializacion y cierre de un componente

Plantillas

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>

Metadatos

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Los metadatos son atributos (datos) que indican como procesar cada clase

Enlace de datos

Hay tres modos de enlazar datos al DOM:

  • One way [] o {{}}
  • Eventos ()
  • Two-way [()] => [NgModel)]
<li>{{hero.name}} </li>

<hero-detail> [hero] = "selectedHero" </Hero-detail>
<li (Click) = "selectHero(hero)"> </li>

<input [(ngModel)] = "hero.name">

Directivas Estructurales

Permiten extender el comportamiento de los componentes Angular. son responsables para la capa del HTML

//Condicional if en HTML

<div *ngIf="hero" class="name">{{hero.name}}</div>

//Ciclo FOR

<ul>
  <li *ngFor="let hero of heroes">{{hero.name}}</li>
</ul>

//Condional Switch

<div [ngSwitch]="hero?.emotion">
  <app-happy-hero    *ngSwitchCase="'happy'"    [hero]="hero"></app-happy-hero>
  <app-sad-hero      *ngSwitchCase="'sad'"      [hero]="hero"></app-sad-hero>
  <app-confused-hero *ngSwitchCase="'confused'" [hero]="hero"></app-confused-hero>
  <app-unknown-hero  *ngSwitchDefault           [hero]="hero"></app-unknown-hero>
</div>

Servicios en angular

Su propósito es contener lógica de negocio, clases para acceso a datos o utilidades de infraestructura. Estas clases son perfectamente instanciables desde cualquier otro fichero que las importe.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CalculatorService {
  constructor() {}

  public fromKilometersToMiles = kilometers => kilometers * 0.62137;
}
export class ConverterComponent implements OnInit {
  public kilometers = 0;
  public miles: number;

  constructor(private calculatorService: CalculatorService) {}

  public ngOnInit() {
    this.convert();
  }

  public convert() {
    this.miles = this.calculatorService.fromKilometersToMiles(this.kilometers);
  }
}

Pipes

  • Un pipe permite formatear y filtrar datos
import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

Cliente HTTP

es un cliente con los métodos REST habituales (a continuación), que está basado en Observables. Básicamente es lo que vas a utilizar para hacer llamadas a una API REST y obtener resultados de la misma.

get(url: string, options: {...}): Observable<any>
delete(url: string, options: {...}): Observable<any>
patch(url: string, body: any|null, options: {...}): Observable<any>
post(url: string, body: any|null, options: {...}): Observable<any>
put(url: string, body: any|null, options: {...}): Observable<any>

head(url: string, options: {...}): Observable<any>
options(url: string, options: {...}): Observable<any>
jsonp<T>(url: string, callbackParam: string): Observable<T>

request(first: string|HttpRequest<any>, url?: string, options: {...}): Observable<any>

Http Client

El nuevo servicio HttpClient te devuelve directamente el body de la respuesta, parseado como JSON. Esta aproximación simplifica el código en la mayoría casos.

//new Angular HttpClient service
http.get('/api/items')
.subscribe(data => {   // data is already a JSON object
    console.log(data['someProperty']);
});

Para usarlo tenemos que:

  • Importar el modulo HttpModule
  • Importar las operaciones para Observables  --  import 'rxjs/operator'

Navegación/ Router

El Router en Angular permite habilitar el sistema de navegación en nuestra App. permite que podamos mostrar ciertos componentes dependiendo de la url que estamos utilizando. Adicionalmente, podremos enviar información a través de la url 

 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Router

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="imagen.jpg">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a routerLink="/dashboard">Dashboard</a></h2>
  </li>
  <li>
    <h2><a routerLink="/view/1">View 1</a></h2>
  </li>
</ul>

<router-outlet></router-outlet>

Router

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-view1',
  templateUrl: './view1.component.html',
  styleUrls: ['./view1.component.scss']
})
export class View1Component implements OnInit {
  protected id: number;

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    this.route.params.subscribe( params => this.id = params.id );
  }

}

Demo TIME

Preguntas

Gracias

Consumiendo API con Angular

By David Fernando Zuluaga

Made with Slides.com

Consumiendo API con Angular

  • 107

More from David Fernando Zuluaga