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
82
MobX: State Management made easy
paulohp
0
86
Docker: The Rise of Containers
paulohp
0
90
We Work Remotely
paulohp
2
96
Angular2
paulohp
0
230
Node.js Codelab
paulohp
1
170
Other Decks in Programming
See All in Programming
構文解析器入門
ydah
7
2.1k
画像コンペでのベースラインモデルの育て方
tattaka
3
1.5k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
730
Infer入門
riru
4
1.3k
令和最新版手のひらコンピュータ
koba789
13
7.1k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.5k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
AHC051解法紹介
eijirou
0
300
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
130
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
360
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
330
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
7
2k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Fireside Chat
paigeccino
38
3.6k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
A Tale of Four Properties
chriscoyier
160
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Designing for Performance
lara
610
69k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GitHub's CSS Performance
jonrohan
1031
460k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Gamification - CAS2011
davidbonilla
81
5.4k
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