Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introducción a Angular

944 views

Published on

Introducción al framework Angular 2 para el desarrollo de aplicaciones Web. Revisión a sus conceptos principales y su alineación con el estándar Web Components.
Charla impartida el 26 de enero de 2017 para SevillaJS.

Published in: Software
  • Be the first to comment

Introducción a Angular

  1. 1. Introducción a Angular Dr. Pedro J. Molina http://pjmolina.com @pmolinam
  2. 2. Agenda Origen Soporte en navegadores Conceptos y arquitectura angular-cli Módulos, Componentes Servicios, Directivas Navegación Web Components
  3. 3. Prerrequisitos  NodeJS  https://nodejs.org  Editor de textos: tu editor favorito (con soporte a TS)  VS Code https://code.visualstudio.com  Atom https://atom.io  SublimeText 3 https://www.sublimetext.com/3  WebStorm https://www.jetbrains.com/webstorm/  Chrome Web Browser p.e. (cualquier evergreen browser nos sirve)  Git
  4. 4. Angular 2  Framework para capa cliente  Impulsado por Google  Diseñado para móvil primero, desktop después  AngularJS v. 1.0 tuvo una gran cuota de mercado. Ng2 reescrito desde cero.  Abraza TypeScript como su principal lenguaje recomendado
  5. 5. Soporte en navegadores Desktop Móvil
  6. 6. Ng2 Breve Historia  Ng1 2009  Ng2 Alfa, Abril 2015  AtScript  TypeScript (acuerdo con Microsoft)  Entrada y Salida Rob Eisenberg @eisenbergEffect  Versiones rc.* (~)  Versión final 2.0 14 Septiembre, 2016  Versión actual 2.4.4  En preparación 4.x (Compatible con Ng2)
  7. 7. ¿¡Typescript!?
  8. 8. Arquitectura
  9. 9. Organización de ficheros y carpetas  Nombrado de ficheros  PascalCase  camelCase  snake_case  kebab-case  Organización en carpetas por módulos y componentes
  10. 10. Prerrequisitos  NodeJS v. 4.x o superior  NPM v. 3.x.x o superior node -v npm -v npm i –g npm
  11. 11. Angular-cli Herramienta de línea de comando para agilizar la creación de proyectos NG2 Generador de código sencillo semilla (scaffolding) tipo Ruby On Rails https://cli.angular.io npm i –g angular-cli
  12. 12. Angular-cli Creada por el equipo de NG2 Sigue las buenas practicas recomendadas por el equipo Referencia de comandos: https://cli.angular.io/reference.pdf
  13. 13. Angular-cli. Comandos ng newCrear proyecto Generar Lanzar en desarrollo Construir ng generate <name> ng serve ng build
  14. 14. ng-cli con preprocesadores de CSS Soportados: Sass/scss Less Stylus https://github.com/angular/angular-cli#css-preprocessor-integration ng new app0 --style=sass
  15. 15. Angular-cli. Comandos de generación ng g component <nombre> ng g directive <nombre> ng g pipe <nombre> ng g service <nombre> ng g class <nombre> ng g interface <nombre> ng g enum <nombre> ng g module <nombre> Nuevo: Componente Directiva Tubería Servicio Clase Interfaz Enumerado Modulo
  16. 16. Angular-cli. Comandos deTest ng testLanzar Tests de Unidad Lanzar Tests Extremo a Extremo ng e2e
  17. 17. Módulos  Unidad lógica de organización de código en AngularJS2 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 { }
  18. 18. Bootstraping  Punto de entrada y arranque import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
  19. 19. Librerías AngularJS2  Se instalan con npm  Se importan con import import { Component } from ‘@angular/core';
  20. 20. Componentes  Clases que controlan el comportamiento, interacción con el usuario y pintado de controles @Component(…) 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; } }
  21. 21. Propiedades  Propiedades de un control visibles desde el exterior export class UserComponent { @Input() name: string; @Input() surname: string; } <my-user name="Jesica" surname="Alba"> </my-user>
  22. 22. Eventos  Eventos públicos del componente export class UserComponent { @Output() selected = new EventEmitter(); … this.selected.emit(params); } <my-user name="Jesica" (selected)="onSelected()"> </my-user>
  23. 23. Ciclo de vida del componente  Eventos que se disparan durante la inicialización y cierre de un componente.  https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
  24. 24. Plantillas  HTML con extensiones de plantillas para NG2 <h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let h of heroes" (click)="selectHero(h)"> {{h.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"> </hero-detail>
  25. 25. Metadatos  Los metadatos son atributos (datos) que indican a NG2 como procesar cada clase. @Component({ moduleId: module.id, selector: 'hero-list', templateUrl: ‘./hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
  26. 26. Enlace de datos  Hay tres modos de enlazar datos al DOM  One way [] o {{}}  Eventos ()  Two-way [()] Banana en la caja <li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero- detail> <li (click)="selectHero(hero)"></li> <input [(ngModel)]="hero.name">
  27. 27. Enlace de datos
  28. 28. Directivas  Permiten extender el comportamiento de los componentes Angular a nivel de estructural y de atributo.  Estructurales:  Atributo: *ngFor *ngIf <input [(ngModel)]="hero.name">
  29. 29. Servicios  Encapsulan comportamiento: calculo, comunicaciones (generalmente sin interacción de UI) (lógica de negocio).  Se implementan con clases export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } } export class HeroComponent { constructor(private logger: Logger) { } }
  30. 30. Inyección de Dependencias  Patrón de arquitectura que permite flexibilizar el reemplazo de servicios en diferentes contextos (p.e. producción vs test) @Injectable() export class Logger { log(msg: any) { console.log(msg); } error(msg: any) { console.error(msg); } warn(msg: any) { console.warn(msg); } } export class HeroComponent { constructor(private logger: Logger) { } }
  31. 31. Inyección de Dependencias  NG2 resuelve como inyectar dependencias usado la configuración de proveedores. providers: [ BackendService, HeroService, Logger ]
  32. 32. Inyección de Dependencias  El alcance de un servicio depende de donde se registra.  Se comportan como singleton (instancia única) a nivel de módulo o componente raiz.  Se comportan como múltiples instancias si se registran a nivel de componente (cada nuevo componente recibe una nueva copia inyectada del servicio).
  33. 33. Sintaxis de plantillas  Interpolación  Calculo de cadenas en HTML y valores de atributos. <p>My current hero is {{currentHero.firstName}}</p> <h3> {{title}} <img src="{{heroImageUrl}}" style="height:30px"> </h3>
  34. 34. Expresiones en plantillas  Solo pueden referencias propiedades del componente.  Sin ámbito global. Sin acceso a window  Recomendaciones para expresiones:  Sin efectos secundarios (no side effects)  Ejecución rápida  Simplicidad  Idempotencia <p>Longitud: {{2 * pi * radio}}</p>
  35. 35. Chuleta de trucos / Cheatsheet Para tener a mano y actualizada: https://angular.io/docs/ts/latest/guide/cheatsheet.html
  36. 36. Guía de Estilo NG2 Guía de estilo. Nombrado y estilo de código https://angular.io/docs/ts/latest/guide/style-guide.html
  37. 37. Tuberías / Pipes  Una tubería permite formatear y filtrar datos.  Se pueden componer. En Ng1 se llamaban filtros. Ejemplo de uso: import { Component } from '@angular/core'; @Component({ selector: 'hero-birthday', template: `<p>Born date: {{ d1 | date:shortDate }}</p>` }) export class HeroBirthdayComponent { d1 = new Date(1988, 3, 15); // April 15, 1988 }
  38. 38. Tuberías / Pipes Ejemplo de implementación: import { Pipe, PipeTransform } from '@angular/core'; /* Raise the value exponentially * Takes an exponent argument that defaults to 1. * Example: {{ 2 | exponentialStrength:10}} */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); } }
  39. 39. Tuberías / Pipes Ejemplo de uso como filtro de una colección: <div *ngFor="let hero of (heroes | flyingHeroes)"> {{hero.name}} </div> import { Pipe, PipeTransform } from '@angular/core'; import { Hero } from './heroes'; @Pipe({ name: 'flyingHeroes' }) export class FlyingHeroesPipe implements PipeTransform { transform(allHeroes: Hero[]): Hero[] { return allHeroes.filter(hero => hero.canFly); } }
  40. 40. Directivas Estructural *ngIf Permite añadir contenido de forma condicional <div *ngIf="condicion"> {{contenido}} </div> <div *ngIf="obj"> <p>{{obj.name}}</p> </div>
  41. 41. Directivas Estructural *ngFor Permite iterar una colección insertando contenido para cada elemento <div *ngFor=“let hero of heroes"> {{hero.name}} {{hero.lastname}} </div>
  42. 42. Cliente HTTP Nos permite salir del browser a la peligrosa Internet Para usarlo tenemos que: Importar el módulo HttpModule desde @angular/http Importar las operaciones para Observables (dependencia) import 'rxjs/operator';
  43. 43. Cliente HTTP. Ejemplo de uso en Servicio Versión con Observables import { Http, Headers, Response } from ‘@angular/http’; … constructor(private http: Http) {} … getCountries(): Observable<Country[]> { return this.http.get(this.serviceUrl) .map(this.extractData) .catch(this.handleError); }
  44. 44. Cliente HTTP. Ejemplo de uso en Servicio Versión con Promesas import { Http, Headers, Response } from ‘@angular/http’; … constructor(private http: Http) {} … getCountries (): Promise<Country[]> { return this.http.get(this.serviceUrl) .map(this.extractData) .catch(this.handleError) .toPromise();
  45. 45. Navegación / Router ¿Cómo navegar entre paginas? El router proporciona mecanismo para navegar dentro de la aplicación (SPA) reescribiendo la URL en el navegador Es una de las piezas que mas cambios (roturas de compatibilidad) ha tenido durante las betas y versiones RC Ya está estabilizada, afortunadamente.
  46. 46. Navegación / Router Index.html añadir <head> … <base href="/"> … </head>
  47. 47. Navegación / Router app.routing.ts import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; import { AboutComponent } from './about/about.component'; const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent}, { path: ‘city/:id', component: CityDetailComponent}, ]; export const routing = RouterModule.forRoot(routes);
  48. 48. Navegación / Router El Router es una tabla de rutas que mapea rutas a componentes para resolver que componente debe mostrarse al navegar a esa ruta. El orden importa (precedencia de rutas) first-match-wins No se pone ‘/’ al comienzo de ruta ‘’ = ruta por defecto ‘**’ = cualquier otra ruta Se permiten parámetros en la ruta
  49. 49. Navegación / Router Añadiendo la definición de rutas en el Module.ts import { routing } from './app.routing'; … @NgModule({ imports: [routing, …
  50. 50. Navegación / Router app.component.html <header> <nav> <a [routerLink]="['home']">Inicio</a> <a [routerLink]="['about']">Acerca de…</a> <a [routerLink]="['city/AGP']">Málaga</a> <a [routerLink]="['city/SVQ']">Sevilla</a> </nav> </header> <main> <router-outlet></router-outlet> </main>
  51. 51. Navegación / Router Composición de rutas Si la aplicación esta compuesta por diversos módulos, cada modulo puede (y debe) gestionar sus rutas como “sub-rutas” Única diferencia, el registro: export const routing = RouterModule.forRoot(routes); export const citiesRoutes = RouterModule.forChild(routes);
  52. 52. WebComponents La “moda”/estandar a punto de llegar Recomendación de la W3C. Polymer (impulsor) Establece de modo estándar unas APIs mínimas para permitir componentes en los navegadores. Intro a Webcomponents. https://component.kitchen/tutorial
  53. 53. WebComponents Tecnologías subyacentes 1. Custom HTML Elements 2. HTML Templates 3. Shadow DOM DOM into DOM 4. HTML Imports <link rel="import" href="my-element/my-element.html"> <my-tag> </my-tag> <template>…
  54. 54. WebComponents Con la popularalización de WebComponents veremos: Portales compuestos por componentes hechos con diversas tecnologías como: Polymer, AngularJS2, React, AngularJS1, Aurelia, jQuery, … Los componentes se comunican con el resto vía eventos y propiedades (con o sin data-binding)
  55. 55. Desarrollo de aplicaciones móviles con Angular Ionic2  Angular2 + Cordova = Ionic2 http://ionic.io/2
  56. 56. Referencias  AngularJS 2 https://angular.io  Tutorial https://angular.io/docs/ts/latest/tutorial  Angular-CLI https://cli.angular.io  Plantilla con webpack https://github.com/preboot/angular2- webpack  Ejemplo https://github.com/pjmolina/lemoncity-ng2
  57. 57. ¡Gracias! http://pjmolina.com @pmolinam

×