Angular 2 with TypeScript
-
Upload
cipriano-freitas -
Category
Technology
-
view
208 -
download
0
Transcript of Angular 2 with TypeScript
![Page 1: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/1.jpg)
Angular 2 & TypeScriptCipriano Freitas
04-03-2015DevScope CSI Cipriano Freitas
![Page 2: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/2.jpg)
• Porquê Angular 2?• Já existe alguém a usá-lo?• Setup inicial• Conceitos básicos• Observables vs Promises• TypeScript• Demo• Angular 1.x para Angular 2• Q/A
Agenda
www.devscope.net 2
![Page 3: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/3.jpg)
Porquê Angular 2?
![Page 4: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/4.jpg)
• 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
Ng1 é como os profissionais dizem Angular 1
Razões para mudar
www.devscope.net 4
![Page 5: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/5.jpg)
Existe alguém a usá-lo?
![Page 6: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/6.jpg)
www.devscope.net 6
Em breve…
![Page 7: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/7.jpg)
Setup inicial
![Page 8: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/8.jpg)
www.devscope.net 8
SystemJS
![Page 9: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/9.jpg)
Conceitos básicos
![Page 10: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/10.jpg)
@Component
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) }}
![Page 11: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/11.jpg)
@Injectable (Serviço)
www.devscope.net 11
import {HEROES} from './mock-heroes';import {Injectable} from 'angular2/core';@Injectable()export class HeroService {
getHeroes() { return HEROES; }}
![Page 12: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/12.jpg)
Só deves prestar atenção a este slide se trabalhaste com o ng1 www.devscope.net 12
$scope Controllers
![Page 13: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/13.jpg)
Observables vs Promises
![Page 14: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/14.jpg)
Observables vs Promises
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
![Page 15: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/15.jpg)
TypeScript
![Page 16: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/16.jpg)
• 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
ES = EcmaScript
Vantagens
www.devscope.net 16
![Page 17: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/17.jpg)
Demo
![Page 18: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/18.jpg)
Angular 1.x para Angular 2
![Page 19: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/19.jpg)
• 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
Como nos preparamos?
www.devscope.net 19
/app/articles
/directives/services/controllers
/products/directives/services/controllers
![Page 20: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/20.jpg)
Q/A?
![Page 21: Angular 2 with TypeScript](https://reader034.fdocuments.in/reader034/viewer/2022042611/58819d561a28ab1a398b47e3/html5/thumbnails/21.jpg)
ObrigadoCipriano Freitas
www.devscope.net
© 2012 DevScope. All rights reserved. DevScope, SmartDocumentor, myWebDrive and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of DevScope as of the date of this presentation. Because DevScope must respond to changing market conditions, it should not be interpreted to be a commitment on the part of DevScope, and DevScope cannot guarantee the accuracy of any information provided after the date of this presentation. DEVSCOPE MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.