A presentation about Angular 2 with TypeScript by Cipriano Freitas

1. Cipriano Freitas
04-03-2015DevScope CSI Cipriano Freitas

2. •
•
•
•
•
•
•
•
•
www.devscope.net 2

3. Porquê Angular 2?

4. • Melhor performance! (Prometem ser até 10x mais rápido do que o ng1)
• Melhor coesão na implementação de standards
• Maior foco no obrigação de nos regermos a boas práticas (Shadow DOM, ...)
• O Angular 1 já tem 6 anos
www.devscope.net 4

5. Existe alguém a usá-lo?

6. www.devscope.net 6
Em breve…

7. Setup inicial

8. www.devscope.net 8
SystemJS

9. Conceitos básicos

10. www.devscope.net 10
import {Component} from 'angular2/angular2'
@Component({
selector: 'my-component',
template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
constructor() {
this.name = 'Max'
}
sayMyName() {
console.log('My name is', this.name)
}
}

11. www.devscope.net 11
import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
@Injectable()
export class HeroService {
getHeroes() { return HEROES; }
}

12. www.devscope.net 12
$scope Controllers

13. Observables vs Promises

14. www.devscope.net 14
• Observables são uma parte do que se chama Reactive Programming
• Observables são Lazy
• Observables podem-se interromper
• Uma web app já não é só submeter um form para o backend

15. TypeScript

16. • Fortemente tipado
• Erros em tempo de compilação
• O debug é fácil
• O suporte de IDEs permite uma melhor experiência de refactoring
• Implementa funcionalidades do ES6 e ES7
www.devscope.net 16

17. Demo

18. Angular 1.x para Angular 2

19. • Utilizar um Module Loader
• Evitar o uso do $scope
• Desenvolver com TypeScript
• Utilizar os Components (chegaram com o Angular 1.5)
• Estrutura de pastas por funcionalidade
www.devscope.net 19
/app
/articles
/directives
/services
/controllers
/products
/directives
/services
/controllers

20. Q/A?

21. www.ciprianofreitas.com
www.devscope.net