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
77
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
43
Introdução ao GraphQL
paulohp
0
46
GraphQL 101
paulohp
0
83
Side Effects: Uma Saga até o React
paulohp
0
83
MobX: State Management made easy
paulohp
0
86
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コーディングAgentとの向き合い方
eycjur
0
250
Honoアップデート 2025年夏
yusukebe
1
880
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
CSC305 Summer Lecture 12
javiergs
PRO
0
130
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
RDoc meets YARD
okuramasafumi
4
160
旅行プランAIエージェント開発の裏側
ippo012
1
530
OSS開発者という働き方
andpad
5
1.5k
A Gopher's Guide to Vibe Coding
danicat
0
190
Improving my own Ruby thereafter
sisshiki1969
1
130
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Automating Front-end Workflow
addyosmani
1370
200k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Applications with DynamoDB
mza
96
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Agile that works and the tools we love
rasmusluckow
330
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
62k
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