Damos a un repaso a las principales características de Angular 2 y como aprovechas las nuevas revoluciones en el desarrollo frontend: Web components y TypeScript
12. Variables de bloque
var tipo = ‘gato’
if (tipo){
var tipo = ‘perro’
console.log(tipo)
}
console.log(tipo)
let tipo = ‘gato’
if (tipo){
let tipo = ‘perro’
console.log(tipo)
}
console.log(tipo)
@raguilera82
13. Template Strings
let nombre = ‘Mateo’
let cadena = `
<div>
<p>Hola ${nombre}</p>
</div>`
console.log(cadena)
let nombre = ‘Mateo’
let cadena = ‘<div><p>Hola
${nombre}</p></div>’
let cadena = ‘<div>’ +
<p>Hola $nombre</p> +
‘</div>’
console.log(cadena)
@raguilera82
14. Arrow Functions
let animal = {
nombre: 'Coco',
identificar: function (){
setTimeout(() => {
console.log(`Identifico a ${this.nombre}`)
},1000)
}
}
animal.identificar()
@raguilera82
15. Promesas (I)
function obtenerDatos () {
return new Promise((resolve, reject) => {
let n = Math.floor(Math.random() * 2) + 1
setTimeout(() => {
if (n === 1) resolve('Datos obtenidos');
else reject(new Error('Error'))
}, 1000);
});
}
@raguilera82
19. Clases (Herencia)
class Gato extends Animal{
constructor(nombre){
super(nombre, 'Gato')
}
conquistarMundo(){
console.log(`${this.nombre} puede conquistar el mundo`)
}
}
@raguilera82
20. Modules (I)
export class Calculadora{
sumar(a, b){
return a + b
}
restar(a, b){
return a - b
}
}
@raguilera82
21. Modules (II)
import {Calculadora} from 'calc/Calculadora';
describe('Calculadora', function() {
it ('Should sumar', function() {
let a = 1;
let b = 3;
let calc = new Calculadora();
expect(calc.sumar(a,b)).toBe(4);
});
});
@raguilera82
22. Tipos de datos
let height: number = 6
let name:string = ‘Luis’
let isDone:boolean = false
let notSure:any = 4
notSure = ‘cuatro’
function warnUser(): void{
console.log(‘Warn user’)
}
enum Color{Red, Blue}
let c:color = Color.Red
let twoTypes: string | null
@raguilera82
23. Clases (atributos privados)
class Animal {
private nombre:string
constructor(nombre:string){
this.nombre = nombre
}
toString(){
return `${this.nombre}`
}
}
class Animal {
constructor(private
nombre:string){}
toString(){
return `${this.nombre}`
}
}
@raguilera82
27. Simplicidad
Simplifica el diseño de AngularJS
Elimina los 5 tipos de servicios,
el $scope, el DDO, los modules,
directivas propias (ng-click)
La sintaxis es más legible
gracias a TypeScript y los templates
¡Aumenta la productividad de los equipos!
@raguilera82
31. Inyección de dependencias
Heredado de AngularJS
Menor acoplamiento entre clases
Favorece las pruebas unitarias con dobles
Favorece la utilización de TDD
@raguilera82
34. Inyección de dependencias en los tests
import {beforeEachProviders,beforeEach} from ‘angular2/testing’
import {provide} from ‘angular2/core’
beforeEachProviders(()=>[
CarService,
provide(EngineService, {useClass: EngineServiceMock})
])
beforeEach(inject([CarService], (_carService)=>{
carService = _carService
}))
35. Mejoras en el router
Rutas relativas en hijos
Rutas auxiliares con más de un
área de renderizado
Identificadores en cada ruta
para hacer el link por nombre
Paso de cualquier tipo de parámetro
@raguilera82
39. Conclusiones
Sigue y aprovecha todos los estándares web de la W3C
Es una tecnología que no nos limita en ningún campo
Tiene un rendimiento óptimo
Es más simple y comprensible
Permite tener todo nuestro código bajo una red de seguridad
de tests
@raguilera82
43. Estrategias de migración
Big Bang Incremental
Aplicaciones pequeñas Aplicaciones grandes
Pocas dependencias Muchas dependencias
Tenemos tiempo No hay tiempo
44. Incremental
Más sencillo si se ha seguido la guia de estilo de John Papa (controller as syntax,
$inject, ...) y estamos en la versión 1.5, todo lo nuevo se va implementando con
TypeScript y Angular 2
Los servicios de AngularJS se reutilizan como clases en Angular 2 lo que cambia
es la forma de inyectar las dependencias. Los controladores se diluyen.
Las directivas con template se tienen que convertir a componentes y las que no
tienen template en directivas de Angular 2