Angular 2 with TypeScript

213 views

Published on

A presentation about Angular 2 with TypeScript by Cipriano Freitas

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
213
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Angular 2 with TypeScript

  1. 1. Cipriano Freitas 04-03-2015DevScope CSI Cipriano Freitas
  2. 2. • • • • • • • • • www.devscope.net 2
  3. 3. Porquê Angular 2?
  4. 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. 5. Existe alguém a usá-lo?
  6. 6. www.devscope.net 6 Em breve…
  7. 7. Setup inicial
  8. 8. www.devscope.net 8 SystemJS
  9. 9. Conceitos básicos
  10. 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. 11. www.devscope.net 11 import {HEROES} from './mock-heroes'; import {Injectable} from 'angular2/core'; @Injectable() export class HeroService { getHeroes() { return HEROES; } }
  12. 12. www.devscope.net 12 $scope Controllers
  13. 13. Observables vs Promises
  14. 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. 15. TypeScript
  16. 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. 17. Demo
  18. 18. Angular 1.x para Angular 2
  19. 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. 20. Q/A?
  21. 21. www.ciprianofreitas.com www.devscope.net

×