SlideShare uma empresa Scribd logo
Cipriano Freitas
04-03-2015DevScope CSI Cipriano Freitas
•
•
•
•
•
•
•
•
•
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
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
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)
}
}
www.devscope.net 11
import {HEROES} from './mock-heroes';
import {Injectable} from 'angular2/core';
@Injectable()
export class HeroService {
getHeroes() { return HEROES; }
}
www.devscope.net 12
$scope Controllers
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
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
www.devscope.net 19
/app
/articles
/directives
/services
/controllers
/products
/directives
/services
/controllers
Q/A?
www.ciprianofreitas.com
www.devscope.net

Mais conteúdo relacionado

Destaque

Single-Page Web Application Architecture
Single-Page Web Application ArchitectureSingle-Page Web Application Architecture
Single-Page Web Application Architecture
Eray Arslan
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
Sirar Salih
 
Angular 2 with TypeScript
Angular 2 with TypeScriptAngular 2 with TypeScript
Angular 2 with TypeScript
Shravan Kumar Kasagoni
 
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesUsing Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Tracy Lee
 
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
Tracy Lee
 
Single page application
Single page applicationSingle page application
Single page application
Jeremy Lee
 
Angular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code levelAngular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code level
Anuradha Bandara
 
Single page application
Single page applicationSingle page application
Single page application
Ismaeel Enjreny
 
Getting started with Angular CLI
Getting started with Angular CLIGetting started with Angular CLI
Getting started with Angular CLI
Sasha Vinčić
 
02 Node introduction
02 Node introduction02 Node introduction
02 Node introduction
Ahmed Elbassel
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
Jim Lynch
 
Node js for beginners
Node js for beginnersNode js for beginners
Node js for beginners
Arjun Sreekumar
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
Joseph de Castelnau
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
Mike Melusky
 
Node js
Node jsNode js
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
GDG Odessa
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
C...L, NESPRESSO, WAFAASSURANCE, SOFRECOM ORANGE
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2
Knoldus Inc.
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
Akshay Mathur
 
SPA: Key Questions
SPA: Key QuestionsSPA: Key Questions
SPA: Key Questions
Volodymyr Voytyshyn
 

Destaque (20)

Single-Page Web Application Architecture
Single-Page Web Application ArchitectureSingle-Page Web Application Architecture
Single-Page Web Application Architecture
 
Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!Angular 2 + TypeScript = true. Let's Play!
Angular 2 + TypeScript = true. Let's Play!
 
Angular 2 with TypeScript
Angular 2 with TypeScriptAngular 2 with TypeScript
Angular 2 with TypeScript
 
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesUsing Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
 
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...
 
Single page application
Single page applicationSingle page application
Single page application
 
Angular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code levelAngular 1.x vs 2 - In code level
Angular 1.x vs 2 - In code level
 
Single page application
Single page applicationSingle page application
Single page application
 
Getting started with Angular CLI
Getting started with Angular CLIGetting started with Angular CLI
Getting started with Angular CLI
 
02 Node introduction
02 Node introduction02 Node introduction
02 Node introduction
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
Node js for beginners
Node js for beginnersNode js for beginners
Node js for beginners
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
An afternoon with angular 2
An afternoon with angular 2An afternoon with angular 2
An afternoon with angular 2
 
Node js
Node jsNode js
Node js
 
Angular 2 vs Angular 1
Angular 2 vs Angular 1Angular 2 vs Angular 1
Angular 2 vs Angular 1
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Getting started with typescript and angular 2
Getting started with typescript  and angular 2Getting started with typescript  and angular 2
Getting started with typescript and angular 2
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
SPA: Key Questions
SPA: Key QuestionsSPA: Key Questions
SPA: Key Questions
 

Semelhante a Angular 2 with TypeScript

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
Rodrigo Branas
 
Introdução Play framework
Introdução Play frameworkIntrodução Play framework
Introdução Play framework
Keuller Magalhães
 
Google AppEngine: Desafios da adoção de cloud no mercado de seguros
Google AppEngine: Desafios da adoção de cloud no mercado de segurosGoogle AppEngine: Desafios da adoção de cloud no mercado de seguros
Google AppEngine: Desafios da adoção de cloud no mercado de seguros
Gustavo Concon
 
Introdução ao struts 2
Introdução ao struts 2Introdução ao struts 2
Introdução ao struts 2
Fernando Oliveira
 
BDD com specflow e selenium webdriver
BDD com specflow e selenium webdriverBDD com specflow e selenium webdriver
BDD com specflow e selenium webdriver
Cristian Mathias
 
Inversão de Controlo e Injecção de Dependência na .NET Framework
Inversão de Controlo e Injecção de Dependência na .NET FrameworkInversão de Controlo e Injecção de Dependência na .NET Framework
Inversão de Controlo e Injecção de Dependência na .NET Framework
C. Augusto Proiete
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
Alexandre Cardoso
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
Mozart Diniz
 
Fisl12
Fisl12Fisl12
Nem tudo é Pepino: Cucumber x Robot Framework
Nem tudo é Pepino: Cucumber x Robot FrameworkNem tudo é Pepino: Cucumber x Robot Framework
Nem tudo é Pepino: Cucumber x Robot Framework
Rodrigo Matola
 
Criando microsserviços em PHP
Criando microsserviços em PHPCriando microsserviços em PHP
Criando microsserviços em PHP
Flávio Lisboa
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
Lambda 3
 
JBossInBossa2011
JBossInBossa2011JBossInBossa2011
JBossInBossa2011
JBossInBossa2011JBossInBossa2011
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
Pablo Dall'Oglio
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
Rodrigo Branas
 
Workshop05
Workshop05Workshop05
Seam 3 e CDI: O futuro do Java EE 6
Seam 3 e CDI: O futuro do Java EE 6Seam 3 e CDI: O futuro do Java EE 6
Seam 3 e CDI: O futuro do Java EE 6
Ricardo Martinelli de Oliveira
 
Android: testes automatizados e TDD
Android: testes automatizados e TDDAndroid: testes automatizados e TDD
Android: testes automatizados e TDD
Dextra
 
XML Free Programming - Brazil
XML Free Programming - BrazilXML Free Programming - Brazil
XML Free Programming - Brazil
Stephen Chin
 

Semelhante a Angular 2 with TypeScript (20)

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Introdução Play framework
Introdução Play frameworkIntrodução Play framework
Introdução Play framework
 
Google AppEngine: Desafios da adoção de cloud no mercado de seguros
Google AppEngine: Desafios da adoção de cloud no mercado de segurosGoogle AppEngine: Desafios da adoção de cloud no mercado de seguros
Google AppEngine: Desafios da adoção de cloud no mercado de seguros
 
Introdução ao struts 2
Introdução ao struts 2Introdução ao struts 2
Introdução ao struts 2
 
BDD com specflow e selenium webdriver
BDD com specflow e selenium webdriverBDD com specflow e selenium webdriver
BDD com specflow e selenium webdriver
 
Inversão de Controlo e Injecção de Dependência na .NET Framework
Inversão de Controlo e Injecção de Dependência na .NET FrameworkInversão de Controlo e Injecção de Dependência na .NET Framework
Inversão de Controlo e Injecção de Dependência na .NET Framework
 
Performance na web, além do framework
Performance na web, além do frameworkPerformance na web, além do framework
Performance na web, além do framework
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
 
Fisl12
Fisl12Fisl12
Fisl12
 
Nem tudo é Pepino: Cucumber x Robot Framework
Nem tudo é Pepino: Cucumber x Robot FrameworkNem tudo é Pepino: Cucumber x Robot Framework
Nem tudo é Pepino: Cucumber x Robot Framework
 
Criando microsserviços em PHP
Criando microsserviços em PHPCriando microsserviços em PHP
Criando microsserviços em PHP
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
 
JBossInBossa2011
JBossInBossa2011JBossInBossa2011
JBossInBossa2011
 
JBossInBossa2011
JBossInBossa2011JBossInBossa2011
JBossInBossa2011
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
Selenium - WebDriver
Selenium - WebDriverSelenium - WebDriver
Selenium - WebDriver
 
Workshop05
Workshop05Workshop05
Workshop05
 
Seam 3 e CDI: O futuro do Java EE 6
Seam 3 e CDI: O futuro do Java EE 6Seam 3 e CDI: O futuro do Java EE 6
Seam 3 e CDI: O futuro do Java EE 6
 
Android: testes automatizados e TDD
Android: testes automatizados e TDDAndroid: testes automatizados e TDD
Android: testes automatizados e TDD
 
XML Free Programming - Brazil
XML Free Programming - BrazilXML Free Programming - Brazil
XML Free Programming - Brazil
 

Último

Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 

Último (7)

Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 

Angular 2 with TypeScript