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

Cipriano.Freitas@devscope.netwww.ciprianofreitas.com

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.