Angular 2 & TypeScriptCipriano Freitas
04-03-2015DevScope CSI Cipriano Freitas
• 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
Porquê Angular 2?
• 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
Existe alguém a usá-lo?
www.devscope.net 6
Em breve…
Setup inicial
www.devscope.net 8
SystemJS
Conceitos básicos
@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) }}
@Injectable (Serviço)
www.devscope.net 11
import {HEROES} from './mock-heroes';import {Injectable} from 'angular2/core';@Injectable()export class HeroService {
getHeroes() { return HEROES; }}
Só deves prestar atenção a este slide se trabalhaste com o ng1 www.devscope.net 12
$scope Controllers
Observables vs Promises
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
TypeScript
• 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
Demo
Angular 1.x para Angular 2
• 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
Q/A?
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.