O Poderoso AngularJS
-
Upload
beto-muniz -
Category
Technology
-
view
340 -
download
0
description
Transcript of O Poderoso AngularJS
![Page 1: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/1.jpg)
O poderoso AngularJS
![Page 2: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/2.jpg)
Beto MUNIZ
Paulo PIRES
@obetomuniz
@paulo_hp
![Page 3: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/3.jpg)
![Page 4: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/4.jpg)
AgendaO que é AngularJS?
Conceitos
Bootstrap e Runtime
Mitos, prós e contras
The future is here
Demo Time
Referências
![Page 5: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/5.jpg)
O que é AngularJS?
![Page 6: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/6.jpg)
Extende o HTML
![Page 7: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/7.jpg)
two-way data binding
![Page 8: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/8.jpg)
Components Based
![Page 9: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/9.jpg)
Alguns Conceitos
![Page 10: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/10.jpg)
directives
![Page 11: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/11.jpg)
**ngApp
![Page 12: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/12.jpg)
**ngController
![Page 13: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/13.jpg)
**ngModel
![Page 14: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/14.jpg)
**ngRepeat
![Page 15: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/15.jpg)
**ngClick
![Page 16: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/16.jpg)
**ngSrc
![Page 17: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/17.jpg)
Custom Directives
![Page 18: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/18.jpg)
factories, services, providers
![Page 19: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/19.jpg)
**$http
![Page 20: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/20.jpg)
**$location
![Page 21: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/21.jpg)
**$log
![Page 22: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/22.jpg)
**$timeout
![Page 23: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/23.jpg)
**$animate
![Page 24: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/24.jpg)
filters
![Page 25: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/25.jpg)
**filter
![Page 26: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/26.jpg)
**number
![Page 27: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/27.jpg)
**order
![Page 28: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/28.jpg)
routing
![Page 29: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/29.jpg)
**ngRoute
![Page 30: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/30.jpg)
**$routeParams
![Page 31: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/31.jpg)
**$routeProvider
![Page 32: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/32.jpg)
**ngView
![Page 33: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/33.jpg)
$scope
![Page 34: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/34.jpg)
ngResources
![Page 35: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/35.jpg)
ngCookies
![Page 36: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/36.jpg)
***
![Page 37: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/37.jpg)
Bootstrap &
Runtime
![Page 38: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/38.jpg)
Bootstrap
![Page 39: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/39.jpg)
1. Navegador faz o parse do HTML para o DOM
![Page 40: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/40.jpg)
2. Carrega o angular.js
![Page 41: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/41.jpg)
3. Espera pelo evento DOMContentLoaded
![Page 42: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/42.jpg)
4. O Angular 'procura' pela diretiva ng-app
![Page 43: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/43.jpg)
5. O $injector é configurado de acordo com as dependências
![Page 44: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/44.jpg)
6. E cria $compile e o $rootScope
![Page 45: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/45.jpg)
7. O $compile compila o DOM dinâmico e linka com o $scope
![Page 46: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/46.jpg)
Runtime
![Page 47: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/47.jpg)
1. Inicia-se com o contexto de execução do angular chamando $scope.$apply(stimulusFn)
![Page 48: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/48.jpg)
2. Executa a função stimulusFn
![Page 49: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/49.jpg)
3. Entra no $digest Loop
![Page 50: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/50.jpg)
4. Agenda a execução com $evalAsync
![Page 51: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/51.jpg)
5. Confere a $watch list
![Page 52: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/52.jpg)
6. E renderiza novamente o DOM
![Page 53: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/53.jpg)
Mitos, prós e contras
![Page 54: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/54.jpg)
Mitos
![Page 55: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/55.jpg)
AngularJS não protege o seu sistema de desenvolvedores
que escrevem um péssimo código
![Page 56: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/56.jpg)
AngularJS não substitui o jQuery, mas pode evitar o seu uso em alguns casos
![Page 57: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/57.jpg)
AngularJS não é o melhor, porém nunca me deixou na mão
![Page 58: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/58.jpg)
AngularJS não é mágico, tudo depende de você.
![Page 59: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/59.jpg)
Prós
![Page 60: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/60.jpg)
compreensivo
![Page 61: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/61.jpg)
rico em funcionalidades
![Page 62: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/62.jpg)
grande comunidade
![Page 63: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/63.jpg)
Injeção de dependência no sangue.
![Page 64: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/64.jpg)
Testable Friendly
![Page 65: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/65.jpg)
by Google!
![Page 66: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/66.jpg)
Contras (na nossa opinião)
![Page 67: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/67.jpg)
Documentação mais ou menos
![Page 68: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/68.jpg)
Performance
![Page 69: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/69.jpg)
Templates Engessados
![Page 70: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/70.jpg)
The future is hereAngular 2.0
![Page 71: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/71.jpg)
Mobile first
![Page 72: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/72.jpg)
Modularização do Framworks
![Page 73: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/73.jpg)
Change Detection
![Page 74: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/74.jpg)
Dependency Injection
![Page 75: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/75.jpg)
Templating
![Page 76: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/76.jpg)
Persistance
![Page 77: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/77.jpg)
Routing
![Page 78: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/78.jpg)
Logging
![Page 79: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/79.jpg)
Annotations
![Page 80: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/80.jpg)
Scaffolding
![Page 81: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/81.jpg)
Reference App
![Page 82: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/82.jpg)
Demo Time
![Page 83: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/83.jpg)
github.com/paulohp/whatsup-google-io
![Page 84: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/84.jpg)
Referências e Links
![Page 85: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/85.jpg)
docs.angularjs.org/api
code.angularjs.org/1.2.17/docs/api/ng/directive
docs.angularjs.org/api/ng#directive
code.angularjs.org/1.2.17/docs/api/ng/filter
code.angularjs.org/1.2.17/docs/api/ng/service
ng-learn.org/2014/03/AngularJS-2-Status-Preview/
tylermcginnis.com/angularjs-factory-vs-service-vs-provider/
docs.angularjs.org/guide/bootstrap
sitepoint.com/understanding-angulars-apply-digest/
mattkruse.com/angular/
![Page 86: O Poderoso AngularJS](https://reader034.fdocuments.in/reader034/viewer/2022051411/547d7f1bb4af9fda158b53d5/html5/thumbnails/86.jpg)
TheEND