Angular 2
https://angular.io/
Fernández González, Francisco De Borja
Martínez Lobo, Inmaculada Estrella
Menéndez Barrientos, Pablo
Velasco Sánchez, Luis Emilio
Historia
- Sucesor de AngularJS
- Mejor rendimiento que otros frameworks
- Necesidad de cumplir estándares
- Cerca de Release Candidate
Características
Web Components
- Estándar
- Uso de polyfills para soporte total
- Aplicaciones web más ricas
Está compuesto por:
- Custom elements
- HTML imports
- Templates
- Shadow DOM
http://webcomponents.org/
TypeScript
- Hecho por Microsoft
- Es un superset de ES6
- Tipado, detección temprana de fallos
- Anotaciones o Decoradores
- Actualmente se usan transpiladores para pasar a ES5 y tener soporte total
- En Angular2 también se puede usar sólo JavaScript o Dart
https://www.typescriptlang.org/
Componentes
@Component({
selector: 'alumno',
template: `<div>
<h1>{{nombre}}</h1>
<h2>{{uo}}</h2>
</div>`
})
export class AlumnoComponent {
let nombre:string = 'Bill Gates'
let uo:string = 'UO112233'
constructor() {
console.log(this.nombre + ' ha sido creado')
}
}<body>
<alumno></alumno>
</body>Enlazado de datos
`<h1>Alumno con UO: {{uo}} </h1>`
`<button (click)="validar()">Validar datos</button>`
`<div>
<input type="text" #alumno />
<button (click)="buscar(alumno.value)">Buscar</button>
</div>`DI
Inyección de dependencias
bootstrap(App, [AlumnosService]) // Singleton@Component({
providers: [AlumnosService]
})
export class AlumnoComponent {
constructor(@Inject(AlumnosService) private
alumnosService:AlumnosService) {
}
printAlumno(uo:number) {
console.log(this.alumnosService.getByUO(uo))
}
}Rutas
@RouteConfig([
{path: '/alumnos', name: 'ListadoAlumnos',
component: ListadoAlumnosComponent},
{path: '/alumno/:uo', name: 'AlumnoDetalle',
component: AlumnoDetalleComponent}
])Testabilidad
DI en tests
import {beforeEachProvider, beforeEach} from 'angular2/testing'
import {provide} from 'angular2/core'
beforeEachProvider(() => [
provide(AlumnosService, {useClass: AlumnosServiceMock}),
ProfesoresService
])
beforeEach(inject([AlumnosService], (service) => {
alumnosService = service
}))Integraciones
Soporte
https://saucelabs.com/u/angular2-ci
DEMO
Angular 2
By Luis Emilio Velasco Sánchez
