Bienvenidos !!!

Programación con Angulas 2

Instructor: Borja Cabeza

Herramientas: Visual Studio 2015

Visual Studio Code
Brackets

Duración: 20 Horas
1. Introducción a Angular 2

¿ Qué es Angular 2 ?
Diferencias entre Angular JS y Angular 2
¿ Qué es TypeScript ?
Arquitectura MVC y MVVM
Instalación de Angular 2
Hola Mundo !!! Con Angular 2
¿ Qué es Angular 2 ?
• Nuevo Framework escrito desde cero
• Utiliza TypeScript (sintaxis Java y C#)
• ECMAscript 6 = ECMAscript 5 con Babel
• Lazy SPA
• Renderizado Universal y en el Servidor
• Data Binding Flow
• Componente Estancos
Angular JS y Angular 2
• Estructura MVC
• Separación HTML de la lógica
• Lado cliente
• Plantillas
• Ligero y eficiente (155kb)
• Sintaxis sencilla en JavaScript
• Estructura MVVM
• Componentes basado UI
• Diseño más modular
• Más rápido e eficiente
• Plantillas más potentes
• Sintaxis sencilla en TypeScript
• Capa de aplicación y render
en Server-Side
5
¿ Qué es TypeScript ?

• Lenguaje de código abierto desarrollado por

Microsoft (Anders Hejlsberg).
• Sintaxis próxima a Java y C#
• Al compilar genera un Superset en JavaScript
• Añade tipado estático
• Añade objetos basados en clases
• Se apoya en transpiladores (Babel, Traceur, …)
• Leguaje utilizado en proyectos como Angular 2,
NativeScript, Ionic 2, …

6
Arquitectura MVC

Model-View-Controller
Arquitectura MVVM

Model-View-ViewModel
Instalación de Angular 2

• Instalamos node js
https://nodejs.org/dist/v7.4.0/node-v7.4.0-x64.msi
npm install –g npm ver. 4.0.5

• Instalamos TypeScript
npm install -g typescript ver. 2.1.5
tsc --version

• Creamos un proyecto Angular 2

npm install

Ficheros: package.json, tsconfig.json, typings.json

systemjs.config.js

git clone https://github.com/angular/quickstart.git quickstart

Instalación de Ionic + Angular 2

• Instalamos node js, TypeScript

• Instalamos ionic 2

npm install -g cordova ionic ver. 2.2.1

ionic --version

• Creamos un proyecto ionic 2

ionic start myApp blank | tabs | sidemenu

Laboratorio 1
Crear un proyecto Angular 2 mediante Quickstart de Angular.

Instrucciones para realizar el Laboratorio

• Clonamos el contenido de Github
• Ejecutamos el comando de instalación de Nodejs
• Limpiamos el proyecto:
for /f %i in (non-essential-files.txt) do del %i /F /S /Q
rd .git /s /q
rd e2e /s /q

• Compilamos y ejecutamos el proyecto mediante Nodejs

Ficheros para realizar el Laboratorio

• Ubicación: http://github.com/angular/quickstart

Tiempo Estimado: 8 minutos

12
TypeScript, tipos de funciones y variables
En TypeScript podemos especificar el tipo de la información devuelta por
una función y tipo de información contenida en una variable.

• PRIMITIVE: number, boolean, string, void, Date, null, undefined

• ANY: equivalente a Object
• ARRAY
• ENUM function identity<T>(arg: T): T {
return arg;
• HTMLElement
}
• GENERICO
let output = identity<string>("myString");

En TypeScript podemos declarar variables con var (globales), let (bloque)

o const (constantes).

13
TypeScript, clases y objetos
En TypeScript podemos programar un clase que utilizaremos como
patrón para crear objetos. Cada clase constituye un nuevo tipo de dato.

class Saludo {
private mensaje: string;

constructor(mensaje: string) {
this.mensaje = mensaje;
}

public saluda() {
return "Hola, " + this.mensaje;
}
}

let msg = new Saludo("mundo");

console.log(msg.saluda())
14
TypeScript, clases y objetos II
En TypeScript podemos programar un clase definiendo la visibilidad de
las propiedades ya sean funciones o variables, con los siguientes
valores:

• public
• protected
• private

La visibilidad determina en que modo y desde donde se puede acceder

a las propiedades de los objetos.
15
 TypeScript, interfaces
Las interfaces en TypeScript tiene las propiedades mínimas que debe tener
las clases que las implementen para construir la estructura de un objeto.

interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}

class Clock implements ClockInterface {

currentTime: Date;

setTime(d: Date) {
this.currentTime = d;
}

constructor(h: number, m: number) {

}
}
16
 TypeScript, interfaces II
Las interfaces en TypeScript puede extenderse y ser utilizada para crear
objetos con todas las propiedades especificadas.

interface Shape {
color: string;
}

interface Square extends Shape {

sideLength: number;
}

let square = <Square>{};

square.color = "blue";
square.sideLength = 10;

17
 TypeScript, herencia
Las interfaces en TypeScript puede extenderse y ser utilizada para crear
objetos con todas las propiedades especificadas.
class Animal {
nombre: string;
constructor(nombre: string) {
this.nombre = nombe;
}
move(distanciaMetros: number = 0) {
console.log(this.nombre + “ se mueve ” + distanciaMetros + “m.”);
}
}

class Caballo extends Animal {

constructor(nombre: string) {
super(nombre);
}
move(distanciaMetros = 45) {
console.log("Galopando...");
super.move(distanciaMetros);
}
}
18
TypeScript, herencia II
class Serpiente extends Animal {
private longitud:number;
constructor(nombre: string) {
super(nombre);
}
move(distanciaMetros = 45) {
console.log(“Reptando...");
super.move(distanciaMetros);
}
getLon():number {
return this.longitud;
}
setLon(long:number) {
this.longitud = long;
}
}

let sam = new Serpiente("Sammy la Pitón");

let tom: Animal = new Horse("Tommy el Caballo");
sam.move();
tom.move(34);
19
2. Componentes
Los componentes son los principales elementos dentro de Angular 2.
Se encarga de controlar una vista que se corresponde con una porción de
la pantalla.

• Una plantilla representa el código HTML de la vista.

• Contiene la lógica y los datos
• Controla en flujo de datos hacia la vista
• Se representa mediante una nueva etiqueta HTML
• Creamos un componente con el decorador @Component
• La clase que se crea funciona como un controlador

20
2.1 Sintaxis de un Componente

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

@Component({
selector: 'my-app',
templateUrl: ‘templates/formulario-alta.html‘,
styleUrls: [‘css/form-alta.css’]
})

export class AppComponent {

private propiedad:tipo;
public método(param:tipo) { }
}

Referencia: https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html

21
2.2 Ciclo de vida de los Componentes
Los componentes presentan un ciclo de vida. Nosotros utilizando hooks
podemos actuar cuando estos se produce.

• Tenemos que importar lo clase que

representa el hook.
• Creamos el método donde que se
ejecuta cuando se produce el evento del
ciclo de vida.

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

export class SudaderaComponent {

constructor() {
}

ngOnInit(): void {
}
}

22
 2.2 Ciclo de vida de los Componentes
ngOnInit, es llamado cuando se inicializa el componente una vez Angular
haya mostrado las propiedades vinculadas a datos. Es llamado solo una vez,
después del primer llamado a ngOnChanges.
ngDestroy, es llamado justo antes de que Angular destruya el componente.
ngDoCheck, es llamado ante cualquier detección de cambio, justo después
de ngOnChanges.
ngOnChanges, es llamado cuando cambian las propiedades de entrada
vinculadas a datos. El método recibe un objeto SimpleChanges con los
valores de las propiedades actuales y anteriores.
ngAfterContentInit, es llamado después de cargar el contenido en la vista. Se llama
después del primer ngDoCheck.
ngAfterContentChecked, es llamado después de que Angular comprueba el contenido
cargado. Se llama después de ngAfterContentInit y después de cada ngDoCheck.
ngAfterViewInit, es llamado ante después de cargar todas las vistas, después de
ngAfterContentChecked.
ngAfterViewChecked, es llamado después de comprobar todas las viastas, después de
ngAfterViewInit y después de cada ngAfterContentChecked.
 2.3 Relación de los Componentes
@Input, crea un atributo al selector funcionando como canal de entrada de
información. Binding de una propiedad del componente padre con una
propiedad del componente hijo.
@Output, crea un evento en el componente hijo que puede ser suscrito por
el componente padre. El componente hijo dispara el evento utilizando el
método Emit del objeto EventEmitter.
@ViewChild, almacena un selector en una propiedad. Si el selector
representa un componente nos permite acceder a todas sus Propiedades y
Métodos pudiéndolos modificar e invocar desde el componente padre.
import {Component, Input, Output, EventEmitter, ViewChild} from '@angular/core’;
import {AppComponent2} from ‘,/app.component2’;

export class AppComponent {

@Input() datos:string;
@Output() cambios = new EventEmitter();
@ViewChild(‘i1’) element = new AppComponent2();
constructor() {
}
}
3. Filtros para formatear contenido
Los filtros (pipes) nos permiten formatear los datos cuando los mostramos en
la vista. Su funcionamiento es igual o similar al de Angular 1.x.

• Usamos lowercase y uppercase para transformar alfanuméricos.

• Usamos currency para la representación de divisas.
• Usamos number para la representación de números formateando
su parte entera y decimal.
• Usamos date para formatear la representación de fechas.
• Usamos slice (anterior limitTo) para determinar el número de
elementos que se representan.
• Usamos json para serializar un objeto javascript a JSON
• Desaparecen filter y orderBy
• Aparecen percent y decimal. De forma experimental i18nPlural.
Filtros para formatear contenido

• Usamos lowercase y uppercase para

transformar alfanuméricos:
<p>{{ t1 | uppercase }}</p>

• Usamos currency para la representación de

divisas.
<p>B: {{b | currency:'USD':true:'4.2-2'}}</p>

• Usamos number para la representación de

números formateando su parte decimal.
<p>PI: {{pi | number:'3.5-5'}}</p>
Filtros para formatear fechas

• Usamos date para formatear la representación

de fechas:
<p>{{ fecha | date : format : timezone }}</p>

{{ date| date }}
// output is 'Jun 15, 2015'

{{ date | date:'medium' }}
// output is 'Jun 15, 2015, 9:43:11 PM'

{{ date | date:'shortTime' }}
// output is '9:43 PM'

{{ date | date:'mmss' }}
// output is '43:11'
Referencia: https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html
Filtros para datos actualizaciones asincronas

• Usamos async para suscribirnos a un objeto

Observable o Promise y así poder recibir
constantemente el último valor de la variable.

<h3>Hora: {{ time | async | date: 'hh:mm:ss' }}</h3>

time = new Observable<string>(

(observer: Subscriber<string>) => {
setInterval(() =>
observer.next(new Date().toString()), 1000);
});
3.1 Filtros personalizados

• Creamos un nuevo filtro personalizado

utilizando el decorador @Pipe.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'siono‘, pure: true })

export class SionoPipe implements PipeTransform {

transform(value, arg) {
return (value == true ? 'Si' : 'No');
}

}
4. Servicios

• Los servicios son contenedores de código.

• Los servicios están pensado para reutilizar modelo de
datos y lógica por los demás componentes.
• Son instancia en cada uno de los componentes de los
reutilizan.
import { Injectable } from '@angular/core';

@Injectable()
export class DemoService {
public testService():string {
return 'Servicio Demo';
}
}

export conts MODELO: Registros[] = [{…}, {…}, …];

30
4. Directivas
Los directivas son funcionalidades aplicables a los elementos HTML de las
plantillas de los componentes.

• Usamos [ngClass] incluye o excluye clases a los elementos.

• Usamos (click) para enlazar el evento click con una función.
• Usamos [href] para enlazar el atributo href con una propiedad.
• Usamos [(ngModel)] two-way binding de con una propiedad.
• Usamos *ngIf el elemento se muestra si se cumple la condición.
• Usamos *ngFor para mostrar el contenido de arrays.
• Usamos [ngStyle] para hacer binding del valor de los estilos.
• Usamos [ngSwitch], *ngSwitchCase y *ngSwitchDefault para
implementar un switch en función del valor de una propiedad.

<div [ngStyle]="{color: colorPreference}">

<div [style.color]="colorPreference">
4.1 Directivas Sintaxis

• {{ }} se inserta un valor, hacia el DOM

• [ ] eventos, atributos y propiedades definidas por el
decorador @Input, hacia el DOM
• ( ) captura de eventos resueltos por métodos de la clase
del componente, desde el DOM.
• [( )] two-way binding de eventos y atributos, desde y
hacia el DOM
<div><p>{{ nombre }}</p></div>

<div><a [href]=“url”>Detalle</a></div>

<div><button (click)=“enviar($event)”>Enviar</button></div>

<input [(ngModel)]=“nombre” placeholder=“nombre“ />

32
4.2 Directivas Personalizadas

• Las directivas son clases que cambian el comportamiento

de los elementos del DOM.
• Mediante host podemos mapear eventos y atributos.
• Puede recibir parámetros mediante @Input.
• Tenemos que declararlas en el modulo.

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

@Directive(selector: [nombre])
export class DemoDirective {
constructor(private el: ElementRef) {
el.nativeElement.style.color = ‘red’;
}
}

33
5. Esquema de Angular 2

34
6. Routing o Single-Page Applications
Utilizando el Routing de Angular podemos crear aplicaciones de una sola página.
Estás aplicaciones se caracterizan por:

• Carga única de la estructura de la aplicación.

• Mejor experiencia de usuario.
• Los componentes que se muestran depende de
la URL (ruta).
• Las rutas puede contener parámetros.
• Los datos dinámicos se cargan utilizando AJAX
• Los datos también se envía o reciben del
servidor con WinSocket.
6.1 Configurar Routing

• Añadimos a código html <base href=“/” />

• Creamos un componente para cada una de las rutas.
• Definimos las rutas:

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

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

import { MiComponent } from './mi.component';

const appRoutes: Routes = [

{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: AppComponent },
{ path: '**', redirectTo: 'home' }];

export const routing: ModuleWithProviders =

RouterModule.forRoot(appRoutes);
6.1 Configurar Routing II

• Importamos los componentes en el modulo.

• Declaramos los componentes en el modulo.
• Importamos la constante routing.
• Utiliza las directivas routerLink y routerLinkActive.

...

import { MiComponent } from './mi.component';

import { routing } from './app.routes';

@NgModule({
imports: [ BrowserModule, FormsModule, routing ],
declarations: [ AppComponent, MiComponent ],
bootstrap: [ AppComponent ],
})

...
Instalación de Angular CLI

Instalamos Angular CLI

npm install –g angular-cli
version 1.0.0-beta.28.3

Comandos
ng new <nombre-proyecto>
ng init <nombre-proyecto>

ng generate component | directive | route | pipe | service

ng e2e (protractor)
ng test (karma)

ng serve
7. Unit Testing en Angular 2
Utilizamos JASMINE para programar las pruebas unitarias (Unit-Testing) de
javascript. Se caracteriza por:

• Síntesis natural para probar comportamientos.

• Soporte pruebas asíncronas.
• No requiere DOM.
• Cada test es una función javascript o método
TypeScript
• Adaptado para Angular 2
• Incluido de forma estándar en los módulos de
Angular 2
• Listo para utilizar cuando usamos quickstart
7. Unit Testing en Angular 2
Utilizamos KARMA para ejecutar las pruebas unitarias (Unit-Testing) de javascript
con NodeJS. Se caracteriza por:

• Se integra con frameworks como Jasmine, Moncha,

Qunit, …
• Las pruebas se lanzan sobre navegadores reales.
• Las pruebas se pueden lanzar sobre dispositivos.
• Altamente configurable
• Adaptado para Angular 2
• Incluido de forma estándar en los módulos de
Angular 2
• Listo para utilizar cuando usamos quickstart
7.1 Trabajando con Jasmine

• Suites, sección o bloque que agrupa expectativas.

• Las Suites se definen mediante la función global describe()
• Función Global beforeEach()
• Función Global afterEach()

describe(‘descripción de la Unit-Test’, function() {

beforeEach(() => { ... });

afterEach(() => { ... });

});

41
7.1 Trabajando con Jasmine

• Expectativas, son afirmaciones que pueden ser verdaderas

o falsas dependiendo del resultado esperado por el
programador.
• Las expectativas se definen mediante la función it()
• Las expectativas se analizan mediante la función expect()
• La función expect() retorna un objeto Jasmine.Matchers

it(‘mensaje de la expectativa', function() {

expect(true).toBe(true);

});

42
7.1 Trabajando con Jasmine

• Matchers, son funciones que implementan comparaciones

booleanas entre un valor actual y el valor esperado.

expect(x).toEqual(y);
verifica si ambos valores son iguales.

expect(x).toBe(y);
verifica si ambos objetos son iguales.

expect(x).toMatch(pattern);
verifica si el valor pertenece al patrón establecido.

expect(x).toBeDefined();
verifica si el valor está definido.

expect(x).toBeUndefined();
verifica si el valor es indefinido.

43
7.1 Trabajando con Jasmine

expect(x).toBeNull();
verifica si el valor es nulo.

expect(x).toBeTruthy();
verifica si el valor es verdadero.

expect(x).toBeFalsy();
verifica si el valor es falso.

expect(x).toContain(y);
verifica si el valor actual contiene el esperado.

expect(x).toBeLessThan(y);
verifica si el valor actual es menor que el esperado.

expect(x).toBeGreaterThan(y);
verifica si el valor actual es mayor que el esperado.

44
7.1 Trabajando con Jasmine

• Nesting o Blocks, las anidaciones o bloques nos permite

agrupar diferentes Suites.
• Utilizamos describe() para definir el bloque
• Utilizamos describe() para definir cada suite dentro del
bloque

describe(‘descripción del bloque’, function() {

describe(‘descripción suite’, function() { });

describe(‘descripción suite’, function() { });

});

45
Curso de Angular 2

Curso de Angular 2.
Gracias.
Recuerda Angular 2 es un framework
MVVM de código abierto desarrollado por
Google y escrito en TypeScript.

Referencias:
https://angular.io/