![E agora, no Angular 2.0?
<element xyz="literal">...
<element [xyz]="expression">...
Com a notação de [], o bind é realizado
diretamente na propriedade do elemento](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/75/A-evolucao-do-AngularJS-68-2048.jpg)
![Comparando os dois mundos!
1.x <div ng-bind="exp"></div>
1.x <div ng-hide="exp"></div>
1.x <div ng-class="{done: exp}"></div>
2.0 <div [text]="exp"></div>
2.0 <div [hidden]="exp"></div>
2.0 <div [class.done]="exp"></div>](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/75/A-evolucao-do-AngularJS-69-2048.jpg)
![E agora, como fica no Angular 2.0?
<element [text]="functionName(abc)">
Com detecção de mudança, sem efeitos colaterais e
supressão de null
<element (click)="functionName(abc)">
Disparo baseado em eventos, com efeito colateral e
sem supressão de null](https://image.slidesharecdn.com/aevolucaodoangularjs-150517123511-lva1-app6892/75/A-evolucao-do-AngularJS-73-2048.jpg)
Carregado porRodrigo Branas
A evolução do AngularJS
O documento descreve a evolução do framework AngularJS, desde sua criação em 2009 até as mudanças trazidas pela versão 2.0. Apresenta os principais recursos de cada versão e explica como alguns conceitos foram modificados ou removidos para aproveitar melhorias na linguagem JavaScript.
Mais conteúdo relacionado
Semelhante a A evolução do AngularJS
A evolução do AngularJS
- 1. A evolução doAngularJS Rodrigo Branas
- 2.
- 4.
- 5. O Angular éum framework para o desenvolvimento de aplicações web utilizando JavaScript ou Dart
- 6. Estrutura a arquiteturada aplicação em camadas bem definidas
- 7. Estimula a criaçãocomponentes reusáveis e modularizáveis
- 8. Fornece a infraestruturanecessária para integrar com o back-end
- 9. Facilita muito aautomação de testes tanto unitários quanto end-to-end
- 10. Criado em 2009por Miško Hevery e Adams Abrons
- 11. Principais commiters doAngular Igor Minar e Miško Hevery
- 12. Facilitar a criaçãode aplicações web
- 13. Já pensou quantocódigo precisamos escrever para criar uma aplicação simples?
- 15. 17.000 linhas e6 meses depois...
- 16. Aposto que consigoreescrever o projeto todo em apenas 2 semanas...
- 17. Eles conseguiram reescrevertudo em apenas 1.500 linhas, 3 semanas depois
- 18. O Google decidiuadotar o projeto...
- 19. É como casarcom mulher rica, o futuro está garantido!
- 20. O interesse peloframework vem crescendo cada vez mais!
- 21.
- 22.
- 23.
- 24.
- 25. O Angular temuma comunidade muito forte e atuante
- 26. Atualmente, o projetotem mais de 1.235 contribuidores
- 27. Todo mês, váriasatualizações são lançadas
- 28. 1.4.0-rc.2 rocket-zambonimation (2015-05-12) v1.4.0-rc.1sartorial-chronography (2015-04-24) v1.4.0-rc.0 smooth-unwinding (2015-04-10) 1.4.0-beta.6 cookie-liberation (2015-03-17) 1.3.15 locality-filtration (2015-03-17) 1.4.0-beta.5 karmic-stabilization (2015-02-24) 1.3.14 instantaneous-browserification (2015-02-24) 1.4.0-beta.4 overlyexplosive-poprocks (2015-02-09) 1.3.13 meticulous-riffleshuffle (2015-02-09) 1.4.0-beta.3 substance-mimicry (2015-02-02) 1.3.12 outlandish-knitting (2015-02-02) 1.4.0-beta.2 holographic-rooster (2015-01-26) 1.3.11 spiffy-manatee (2015-01-26) 1.4.0-beta.1 trepidatious-salamander (2015-01-20) 1.3.10 heliotropic-sundial (2015-01-20) 1.4.0-beta.0 photonic-umbrakinesis (2015-01-13) 1.3.9 multidimensional-awareness (2015-01-13) Oquejáfoilançadoem2015?
- 29. Para cada novaversão é dado o nome de um super poder
- 30.
- 31.
- 32.
- 33.
- 34. Até agora, jáforam lançadas 138 releases do framework!
- 35. Com tanta atualização,não dá medo de quebrar alguma coisa?
- 36. 4.000 testes deunidade executados a cada alteração feita no código...
- 37. Você acha queisso é muito?
- 38. A cada integração,50.000 testes são executados em vários ambientes!
- 39. Agora sim, issoé muito?!
- 40. Atualmente, existem cercade 2.000 aplicativos no Google utilizando Angular e todos os testes deles também são executados
- 42. A performance doframework vem melhorando muito
- 44. Na versão 1.4,os números ainda vão aumentar cerca de 30%
- 45.
- 47. View É o queo cliente vê
- 48. Controller Responsável pelo quea View consome
- 49. Scope Faz a mediaçãoentre a View e o Controller
- 50. AngularJS 1.x Hands-On Pordentro das principais características do framework!
- 51. Está chegando oAngular 2.0
- 53. Quem são? Como vivem? Oque comem? De onde surgiram? Como se reproduzem?
- 54. Estava tudo tãobom, por que o Angular está mudando?
- 55. O framework estáficando velho...
- 56. A versão 1.xiniciou em 2009 e está baseada em muitos conceitos do passado enquanto a nova versão utiliza conceitos do futuro
- 57.
- 58. ECMAScript 6 Utilização denovos recursos
- 59. Utilização de WebComponents Possibilidadede criar componentes
- 60. Performance ainda melhor Anova versão está ainda mais rápida
- 61. Curva de aprendizadoé menor Menos conceitos para aprender
- 62. Será que oAngular mudou tanto assim, em tão pouco tempo?
- 63. A maioria dasdiretivas morreram
- 65.
- 66.
- 67. Como o Angular1.x faz binding? <element xyz="literal">... <element xyz="expression">... <element xyz="{{interpolate}}">...
- 68. E agora, noAngular 2.0? <element xyz="literal">... <element [xyz]="expression">... Com a notação de [], o bind é realizado diretamente na propriedade do elemento
- 69. Comparando os doismundos! 1.x <div ng-bind="exp"></div> 1.x <div ng-hide="exp"></div> 1.x <div ng-class="{done: exp}"></div> 2.0 <div [text]="exp"></div> 2.0 <div [hidden]="exp"></div> 2.0 <div [class.done]="exp"></div>
- 70.
- 71. O que acontecenesse cenário, bind em uma propriedade ou o disparo de um evento? <element xyz="functionName(abc)">...
- 72. O que acontecenesse cenário, bind em uma propriedade ou o disparo de um evento? <element xyz="functionName(abc)">... <element ng-bind="functionName(abc)">... <element ng-click="functionName(abc)">...
- 73. E agora, comofica no Angular 2.0? <element [text]="functionName(abc)"> Com detecção de mudança, sem efeitos colaterais e supressão de null <element (click)="functionName(abc)"> Disparo baseado em eventos, com efeito colateral e sem supressão de null
- 74.
- 75. E o ngModel?Como fica? <input type="text" ng-model="nome" />
- 76. E o ngModel?Como fica? <input type="text" ng-model="nome" /> <input type="text" #nome/>
- 77. Qual é adiferença? <input type="text" #nome/> <button (click)="nome.focus()"> Temos o elemento completo, podendo acessar suas operações, não apenas o seu valor
- 78.
- 79.
- 80. AngularJS 2.0 naprática Vamos analisar o código completo para ver os outros conceitos!
- 81. Em que onovo Angular é escrito?
- 82. Parece que alguémfoi dar uma volta com o pessoal da Microsoft
- 83. Uma parte doAngularJS 2.0 é escrita em TypeScript 1.5 e convertido para ES5 para que possa ser interpretado pelos browsers atuais. O código fonte do framework tem ainda muitas partes escritas em AtScript e Dart.
- 85. E agora, aindavale a pena aprender a versão 1.x?
- 86. A versão 1.xserá abandonada?
- 87. Vou começar umprojeto, devo utilizar a versão 1.x ou 2.0?
- 88. Será possível migraro projeto para a versão 2.0 do framework?
- 89. Que droga, seráque eu devo utilizar TypeScript?
- 90. Por onde euposso começar a estudar AngularJS?
- 92.
- 93.
- 94. Rodrigo Branas Site: http://www.agilecode.com.br E-Mail:rodrigo.branas@gmail.com Twitter: @rodrigobranas SlideShare: http://www.slideshare.com/rodrigobranas YouTube: http://www.youtube.com/rodrigobranas LinkedIn: http://br.linkedin.com/in/rodrigobranas +Plus: https://plus.google.com/+RodrigoBranas GitHub: http://www.github.com/rodrigobranas
Notas do Editor
- #3 Qual é a sua obra?
- #6 Desmotivação
- #7 Desmotivação
- #8 Desmotivação
- #9 Desmotivação
- #10 Desmotivação
- #11 Desmotivação
- #12 Desmotivação
- #13 Velocidade aumenta conforme os desperdícios vão sendo eliminados
- #14 Desmotivação
- #15 Desmotivação
- #16 Desmotivação
- #17 Desmotivação
- #18 Desmotivação
- #19 Desmotivação
- #20 Desmotivação
- #21 Vontade de sair da empresa. Lembra do Belchior?
- #22 Desmotivação
- #23 Desmotivação
- #24 Desmotivação
- #25 Desmotivação
- #26 Desmotivação
- #27 react = 404, ember = 485, knockout = 56,
- #28 Vontade de sair da empresa. Lembra do Belchior?
- #29 Vontade de sair da empresa. Lembra do Belchior?
- #30 Vontade de sair da empresa. Lembra do Belchior?
- #31 Vontade de sair da empresa. Lembra do Belchior?
- #32 Vontade de sair da empresa. Lembra do Belchior?
- #33 Vontade de sair da empresa. Lembra do Belchior?
- #34 Vontade de sair da empresa. Lembra do Belchior?
- #35 Vontade de sair da empresa. Lembra do Belchior?
- #37 Vontade de sair da empresa. Lembra do Belchior?
- #38 Vontade de sair da empresa. Lembra do Belchior?
- #39 Vontade de sair da empresa. Lembra do Belchior?
- #40 Vontade de sair da empresa. Lembra do Belchior?
- #41 Vontade de sair da empresa. Lembra do Belchior?
- #42 Vontade de sair da empresa. Lembra do Belchior?
- #43 Desmotivação
- #44 Desmotivação
- #45 Desmotivação
- #46 Desmotivação
- #47 Desmotivação
- #48 Desmotivação
- #49 Desmotivação
- #50 Desmotivação
- #51 Desmotivação
- #52 Desmotivação
- #53 Desmotivação
- #54 Desmotivação
- #55 Desmotivação
- #56 Desmotivação
- #57 Desmotivação
- #58 Vontade de sair da empresa. Lembra do Belchior?
- #59 Desmotivação
- #60 Desmotivação
- #61 Desmotivação
- #65 Vontade de sair da empresa. Lembra do Belchior?
- #68 Desmotivação
- #69 Desmotivação
- #70 Desmotivação
- #71 Desmotivação
- #72 Desmotivação
- #73 Desmotivação
- #74 Desmotivação
- #75 Desmotivação
- #76 Desmotivação
- #77 Desmotivação
- #78 Desmotivação
- #79 Desmotivação
- #81 Desmotivação
- #82 Vontade de sair da empresa. Lembra do Belchior?
- #83 Desmotivação
- #84 Desmotivação
- #85 Desmotivação
- #86 Desmotivação
- #87 Desmotivação
- #88 Desmotivação
- #89 Desmotivação
- #90 Desmotivação
- #91 Desmotivação