SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
Novidades do AngularJS 2.0
Mudanças, melhorias e muito mais
@_ntakashi
/ntakashii
ntakashi.net
nicolas.tcs@hotmail.com
Tópicos
 AngularJS 1.x
 O que é o AngularJS 2.0?
 Motivação
 Princípios
 Promessas
 Diga adeus
 Quick FAQ
 DEMO
AngularJS 1.x
 Framework JavaScript Open Source
 Iniciado em 2009
 Baseado no ECS5 e jqLite (subset JQuery)
 Performance questionável
 Famosão
O que é o AngularJS 2.0?
 Framework MVW – Model View Whatever
 Inspirado no AngularJS 1.x
 Totalmente reescrito
 Performático
 Flexível
 Open Source
Motivação
 AngularJS 2.0 é até 5x mais rápido que a
versão atual;
 Muito mais simples de aprender;
 Novos padrões.
Princípios
Mobilidade Flexibilidade Agilidade
Promessas
 Cross Platform;
 Performance;
 Migração simples;
 Flexibilidade;
 Older browsers support
Melhorias – Framework DI
 Melhor controle sobre escopo dos objetos;
 Child injectors;
 Depêndencias opcionais.
Melhorias – Diretivas
 Component Directives;
 Decorator Directives;
 Template Directives.
Melhorias – Rotas
 JSON baseado em Route Config;
 Convenção de configuração opcional;
 Parâmetros Estáticos;
 Padrões de rotas parametrizados;
 URL resolver;
 Suporte a Query String;
 Navigation Model;
 Manipulação de erro 404;
 Location Service;
 Manipulação de histórico.
Diga adeus.
 $Scope
 Controller
 Two-way Data Binding
 Muitas Diretivas
Diga adeus
 Ng-bind;
 Ng-class;
 Ng-show;
 Ng-src;
 Ng-href;
 Ng-style;
 Ng-Hide;
 Ng-click
Bootstraping – AngularJS 1.x
 Criar um módulo
 Declarar o ng-app
 Criar um Controller
 Declarar o ng-Controller
 Criar um template
Bootstraping – AngularJS 2.0
 Criar um componente
 Criar um template
 Chamar o método BootStrap – (Angular2/Core)
 Transpilar
Quick FAQ
 Sou obrigado a utilizar TypeScript?
 Posso utilizar Flux?
 Então o AngularJS 2.0 é o ReactJS do Google?
Quick FAQ
 Angular-Translate vai ser compatível com a nova versão?
 A checagem de tipo torna a app mais lenta?
 Vou precisar reescrever tudo da app feita com a versão 1.x?
Quick FAQ
 Eu vou ter que escrever HTML inline?
 Começo meu projeto com AngularJS 2.0?
Quick FAQ
 Todo List App utilizando AngularJS 2.0
Referências
 angular.io
 Evolução do AngularJS – Rodrigo Branas
 Minko Gecheve

Mais conteúdo relacionado

Mais procurados

Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJSWilson Mendes
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas MobileHugo Iuri
 
Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!Mariana Elisa Moisés , CTFL-AT,MBA
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSWaldyr Felix
 
Protractor, por Daniel Amorim
Protractor, por Daniel AmorimProtractor, por Daniel Amorim
Protractor, por Daniel AmorimThoughtworks
 
Protractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endProtractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endDaniel Amorim
 
Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSHenrique Limas
 
Protractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endProtractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endDaniel Amorim
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideSergio Azevedo
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UICleiton Francisco
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!José Barbosa
 
ASP.Net MVC no VS 2010
ASP.Net MVC no VS 2010ASP.Net MVC no VS 2010
ASP.Net MVC no VS 2010Giovanni Bassi
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webRodrigo Branas
 
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Renato Groff
 
Suporte a macros na sua aplicação com PowerShell
Suporte a macros na sua aplicação com PowerShellSuporte a macros na sua aplicação com PowerShell
Suporte a macros na sua aplicação com PowerShellIgor Abade
 

Mais procurados (19)

Performance com AngularJS
Performance com AngularJSPerformance com AngularJS
Performance com AngularJS
 
React Native - Plataformas Mobile
React Native - Plataformas MobileReact Native - Plataformas Mobile
React Native - Plataformas Mobile
 
Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!Visual Regression Tests - Dando um Upload nos seus testes de UI!
Visual Regression Tests - Dando um Upload nos seus testes de UI!
 
Protractor
ProtractorProtractor
Protractor
 
Diego Narducci - React + Angular
Diego Narducci - React + AngularDiego Narducci - React + Angular
Diego Narducci - React + Angular
 
ASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJSASP.NET SignalR + SPA com AngularJS
ASP.NET SignalR + SPA com AngularJS
 
Protractor, por Daniel Amorim
Protractor, por Daniel AmorimProtractor, por Daniel Amorim
Protractor, por Daniel Amorim
 
Protractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endProtractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to end
 
Material Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJSMaterial Design simples e rapido com AngularJS
Material Design simples e rapido com AngularJS
 
Protractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to endProtractor - Testando aplicações AngularJS end to end
Protractor - Testando aplicações AngularJS end to end
 
AngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-SideAngularJS Abraçando o MVC Client-Side
AngularJS Abraçando o MVC Client-Side
 
React - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UIReact - Biblioteca Javascript para criação de UI
React - Biblioteca Javascript para criação de UI
 
React - Introdução
React - IntroduçãoReact - Introdução
React - Introdução
 
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
Vuejs Angularjs e Reactjs. Veja as diferenças de cada framework!
 
ASP.Net MVC no VS 2010
ASP.Net MVC no VS 2010ASP.Net MVC no VS 2010
ASP.Net MVC no VS 2010
 
Introdução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações webIntrodução ao desenvolvimento de aplicações web
Introdução ao desenvolvimento de aplicações web
 
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
Arquitetura de Microserviços - Stone Tech Saturday - Março/2017
 
Suporte a macros na sua aplicação com PowerShell
Suporte a macros na sua aplicação com PowerShellSuporte a macros na sua aplicação com PowerShell
Suporte a macros na sua aplicação com PowerShell
 
É possível desenvolver com Windows
É possível desenvolver com WindowsÉ possível desenvolver com Windows
É possível desenvolver com Windows
 

Destaque

Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...
Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...
Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...Mr.Allah Dad Khan
 
Tampa Ad Connect Preso - Future of Advertising
Tampa Ad Connect Preso - Future of AdvertisingTampa Ad Connect Preso - Future of Advertising
Tampa Ad Connect Preso - Future of AdvertisingBrandon Murphy
 
Video is kind of big deal
Video is kind of  big dealVideo is kind of  big deal
Video is kind of big dealJoe Edwards
 
Mary Teed Resume.1
Mary Teed Resume.1Mary Teed Resume.1
Mary Teed Resume.1Mary Teed
 
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...Albert-Jan den Butter
 
20 items to keep in women handbag
20 items to keep in women handbag20 items to keep in women handbag
20 items to keep in women handbagTrendy Bharat
 
Caryn final resume 100216
Caryn final resume 100216Caryn final resume 100216
Caryn final resume 100216Caryn Jarmusz
 

Destaque (12)

Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...
Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...
Packaging and canning of mushroom By Mr Allah Dad Khan Visiting Professor the...
 
Tampa Ad Connect Preso - Future of Advertising
Tampa Ad Connect Preso - Future of AdvertisingTampa Ad Connect Preso - Future of Advertising
Tampa Ad Connect Preso - Future of Advertising
 
Experiencia de Aprendizaje
Experiencia de AprendizajeExperiencia de Aprendizaje
Experiencia de Aprendizaje
 
Video is kind of big deal
Video is kind of  big dealVideo is kind of  big deal
Video is kind of big deal
 
Mary Teed Resume.1
Mary Teed Resume.1Mary Teed Resume.1
Mary Teed Resume.1
 
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...
Samen sterker eindscriptie onderwijswetenschappen albert jan den butter versi...
 
AE21 J Greer Reference
AE21 J Greer ReferenceAE21 J Greer Reference
AE21 J Greer Reference
 
It's gotime!
It's gotime!It's gotime!
It's gotime!
 
20 items to keep in women handbag
20 items to keep in women handbag20 items to keep in women handbag
20 items to keep in women handbag
 
Caryn final resume 100216
Caryn final resume 100216Caryn final resume 100216
Caryn final resume 100216
 
GLB-2
GLB-2GLB-2
GLB-2
 
A question of trust
A question of trustA question of trust
A question of trust
 

Semelhante a Novidades AngularJS 2.0

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJSRodrigo Branas
 
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoGDGFoz
 
Angular.JS - Estado Atual
Angular.JS - Estado AtualAngular.JS - Estado Atual
Angular.JS - Estado AtualGustavo Costa
 
Angular.JS Basic concepts. Meetup FloripaJS
Angular.JS Basic concepts. Meetup FloripaJSAngular.JS Basic concepts. Meetup FloripaJS
Angular.JS Basic concepts. Meetup FloripaJSLuiz Henrique Estacio
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosFelipe Gadelha Ruoso
 
Migrando para o Angular 2
Migrando para o Angular 2Migrando para o Angular 2
Migrando para o Angular 2Andre Baltieri
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Portal GSTI
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemRodrigo Valerio
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Getúlio Strapazzon
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JSRodrigo Urubatan
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSLeonardo Zanivan
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJSGDGFoz
 

Semelhante a Novidades AngularJS 2.0 (20)

A evolução do AngularJS
A evolução do AngularJSA evolução do AngularJS
A evolução do AngularJS
 
Angular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativoAngular, React ou Vue? Comparando os favoritos do JS reativo
Angular, React ou Vue? Comparando os favoritos do JS reativo
 
Angular js
Angular jsAngular js
Angular js
 
Angular js 4php
Angular js   4phpAngular js   4php
Angular js 4php
 
Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5Angular 4 Ionic 3 Cordova 5
Angular 4 Ionic 3 Cordova 5
 
Angular.JS - Estado Atual
Angular.JS - Estado AtualAngular.JS - Estado Atual
Angular.JS - Estado Atual
 
Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5Workshop ASP.NET MVC 5
Workshop ASP.NET MVC 5
 
Angular.JS Basic concepts. Meetup FloripaJS
Angular.JS Basic concepts. Meetup FloripaJSAngular.JS Basic concepts. Meetup FloripaJS
Angular.JS Basic concepts. Meetup FloripaJS
 
Curso AngularJS - Parte 1
Curso AngularJS - Parte 1Curso AngularJS - Parte 1
Curso AngularJS - Parte 1
 
RubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhosRubyConf 17 - Colocando sua aplicação vue nos trilhos
RubyConf 17 - Colocando sua aplicação vue nos trilhos
 
Migrando para o Angular 2
Migrando para o Angular 2Migrando para o Angular 2
Migrando para o Angular 2
 
Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório Ebook AngularJS | Guia Introdutório
Ebook AngularJS | Guia Introdutório
 
Apresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvemApresentação CEJS - Do nada para a nuvem
Apresentação CEJS - Do nada para a nuvem
 
Angularjs
AngularjsAngularjs
Angularjs
 
Front end architecture
Front end architectureFront end architecture
Front end architecture
 
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
TDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJSTDC 2014 - Arquitetura front-end com AngularJS
TDC 2014 - Arquitetura front-end com AngularJS
 
2° Codelab - Por onde começar com AngularJS
2° Codelab  - Por onde começar com AngularJS2° Codelab  - Por onde começar com AngularJS
2° Codelab - Por onde começar com AngularJS
 

Mais de Nicolas Takashi

Azure api app autenticação e autorização
Azure api app   autenticação e autorizaçãoAzure api app   autenticação e autorização
Azure api app autenticação e autorizaçãoNicolas Takashi
 
Azure api app métricas com application insights
Azure api app métricas com application insightsAzure api app métricas com application insights
Azure api app métricas com application insightsNicolas Takashi
 
Azure api app monitoramento de log
Azure api app   monitoramento de logAzure api app   monitoramento de log
Azure api app monitoramento de logNicolas Takashi
 
Azure api app monitoramento, métricas e cotas
Azure api app   monitoramento, métricas e cotasAzure api app   monitoramento, métricas e cotas
Azure api app monitoramento, métricas e cotasNicolas Takashi
 
Azure api apps - Deploy ASP.Net Core
Azure api apps - Deploy ASP.Net CoreAzure api apps - Deploy ASP.Net Core
Azure api apps - Deploy ASP.Net CoreNicolas Takashi
 
TypeScript em Aplicações Modernas
TypeScript em Aplicações ModernasTypeScript em Aplicações Modernas
TypeScript em Aplicações ModernasNicolas Takashi
 
Integração continua e release manegement com asp.net core
Integração continua e release manegement com asp.net coreIntegração continua e release manegement com asp.net core
Integração continua e release manegement com asp.net coreNicolas Takashi
 
Azure api apps – entendendo o que é azure app service
Azure api apps – entendendo o que é azure app serviceAzure api apps – entendendo o que é azure app service
Azure api apps – entendendo o que é azure app serviceNicolas Takashi
 
Azure api apps introdução ao microsoft azure
Azure api apps   introdução ao microsoft azureAzure api apps   introdução ao microsoft azure
Azure api apps introdução ao microsoft azureNicolas Takashi
 
Conhecendo o asp.net core
Conhecendo o asp.net coreConhecendo o asp.net core
Conhecendo o asp.net coreNicolas Takashi
 
Gerenciando recursos com Visual Studio e Azure Resource Manager
Gerenciando recursos com Visual Studio e Azure Resource ManagerGerenciando recursos com Visual Studio e Azure Resource Manager
Gerenciando recursos com Visual Studio e Azure Resource ManagerNicolas Takashi
 
Automatizando tarefas com PSake
Automatizando tarefas com PSakeAutomatizando tarefas com PSake
Automatizando tarefas com PSakeNicolas Takashi
 

Mais de Nicolas Takashi (15)

Azure api app autenticação e autorização
Azure api app   autenticação e autorizaçãoAzure api app   autenticação e autorização
Azure api app autenticação e autorização
 
Azure app service
Azure app serviceAzure app service
Azure app service
 
Azure api app métricas com application insights
Azure api app métricas com application insightsAzure api app métricas com application insights
Azure api app métricas com application insights
 
Azure api app monitoramento de log
Azure api app   monitoramento de logAzure api app   monitoramento de log
Azure api app monitoramento de log
 
Azure api app monitoramento, métricas e cotas
Azure api app   monitoramento, métricas e cotasAzure api app   monitoramento, métricas e cotas
Azure api app monitoramento, métricas e cotas
 
Azure api apps - Deploy ASP.Net Core
Azure api apps - Deploy ASP.Net CoreAzure api apps - Deploy ASP.Net Core
Azure api apps - Deploy ASP.Net Core
 
TypeScript em Aplicações Modernas
TypeScript em Aplicações ModernasTypeScript em Aplicações Modernas
TypeScript em Aplicações Modernas
 
Azure api apps
Azure api appsAzure api apps
Azure api apps
 
Integração continua e release manegement com asp.net core
Integração continua e release manegement com asp.net coreIntegração continua e release manegement com asp.net core
Integração continua e release manegement com asp.net core
 
Azure api apps – entendendo o que é azure app service
Azure api apps – entendendo o que é azure app serviceAzure api apps – entendendo o que é azure app service
Azure api apps – entendendo o que é azure app service
 
Azure api apps introdução ao microsoft azure
Azure api apps   introdução ao microsoft azureAzure api apps   introdução ao microsoft azure
Azure api apps introdução ao microsoft azure
 
Conhecendo o asp.net core
Conhecendo o asp.net coreConhecendo o asp.net core
Conhecendo o asp.net core
 
Gerenciando recursos com Visual Studio e Azure Resource Manager
Gerenciando recursos com Visual Studio e Azure Resource ManagerGerenciando recursos com Visual Studio e Azure Resource Manager
Gerenciando recursos com Visual Studio e Azure Resource Manager
 
Automatizando tarefas com PSake
Automatizando tarefas com PSakeAutomatizando tarefas com PSake
Automatizando tarefas com PSake
 
Azure mobile services
Azure mobile servicesAzure mobile services
Azure mobile services
 

Novidades AngularJS 2.0