Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
O poderoso AngulasJS
Search
Paulo Pires
June 25, 2014
Programming
0
78
O poderoso AngulasJS
Talk apresentada no Google I/O Extended São Paulo
Paulo Pires
June 25, 2014
Tweet
Share
More Decks by Paulo Pires
See All by Paulo Pires
Introdução ao WebAssembly
paulohp
0
44
Introdução ao GraphQL
paulohp
0
47
GraphQL 101
paulohp
0
85
Side Effects: Uma Saga até o React
paulohp
0
84
MobX: State Management made easy
paulohp
0
87
Docker: The Rise of Containers
paulohp
0
92
We Work Remotely
paulohp
2
96
Angular2
paulohp
0
230
Node.js Codelab
paulohp
1
170
Other Decks in Programming
See All in Programming
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
220
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.6k
Server Less Code More - コードを書かない時代に生きるサーバーレスデザイン / server-less-code-more
gawa
5
1.9k
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
2
1.3k
CSC305 Lecture 03
javiergs
PRO
0
220
実践AIチャットボットUI実装入門
syumai
7
2.3k
株式会社 Sun terras カンパニーデック
sunterras
0
170
Reactをクライアントで使わない
yusukebe
7
6.3k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
960
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
120
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Embracing the Ebb and Flow
colly
88
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
The Power of CSS Pseudo Elements
geoffreycrofte
78
6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Producing Creativity
orderedlist
PRO
347
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
43k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Transcript
O poderoso AngularJS
Beto MUNIZ Paulo PIRES @obetomuniz @paulo_hp
None
None
***
Agenda O que é AngularJS? Conceitos Bootstrap e Runtime Mitos,
prós e contras The future is here Demo Time
io.minasdev.org
O que é AngularJS?
Extende o HTML
two-way data binding
Components Based
Alguns Conceitos
directives
**ngApp
**ngController
**ngModel
**ngRepeat
**ngClick
**ngSrc
Custom Directives
factories, services, providers
**$http
**$location
**$log
**$timeout
**$animate
filters
**filter
**number
**order
routing
**ngRoute
**$routeParams
**$routeProvider
**ngView
$scope
ngResources
ngCookies
***
Bootstrap & Runtime
Bootstrap
1. Navegador faz o parse do HTML para o DOM
2. Carrega o angular.js
3. Espera pelo evento DOMContentLoaded
4. O Angular 'procura' pela diretiva ng-app
5. O $injector é configurado de acordo com as dependências
6. E cria $compile e o $rootScope
7. O $compile compila o DOM dinâmico e linka com
o $scope
Runtime
1. Inicia-se com o contexto de execução do angular chamando
$scope.$apply(stimulusFn)
2. Executa a função stimulusFn
3. Entra no $digest Loop
4. Agenda a execução com $evalAsync
5. Confere a $watch list
6. E renderiza novamente o DOM
Mitos, prós e contras
Mitos
AngularJS não protege o seu sistema de desenvolvedores que escrevem
um péssimo código
AngularJS não substitui o jQuery, mas pode evitar o seu
uso em alguns casos
AngularJS não é o melhor, porém nunca me deixou na
mão
AngularJS não é mágico, tudo depende de você.
Prós
compreensivo
rico em funcionalidades
grande comunidade
Injeção de dependência no sangue.
Testable Friendly
by Google!
Contras (na nossa opinião)
Documentação mais ou menos
Performance
Templates Engessados
The future is here
Mobile first
Modularização do Framworks
Change Detection
Dependency Injection
Templating
Persistance
Routing
Logging
Annotations
Scaffolding
Reference App
Demo Time
Perguntas?
The END