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
91
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
O poderoso AngulasJS
Talk apresentada no Google I/O Extended São Paulo
Paulo Pires
June 25, 2014
More Decks by Paulo Pires
See All by Paulo Pires
Introdução ao WebAssembly
paulohp
0
67
Introdução ao GraphQL
paulohp
0
64
GraphQL 101
paulohp
0
120
Side Effects: Uma Saga até o React
paulohp
0
100
MobX: State Management made easy
paulohp
0
100
Docker: The Rise of Containers
paulohp
0
130
We Work Remotely
paulohp
2
120
Angular2
paulohp
0
250
Node.js Codelab
paulohp
1
190
Other Decks in Programming
See All in Programming
プロポーザルを書いてもらう
pvcresin
0
590
仕様書を書く前にハーネスを作る - Agent Native開発は「探索を速く、判定を固く」
gotalab555
5
1.8k
Pythonの実行はどこまで賢くなったのか? CPythonとPyPyから見る最適化のしくみ
curekoshimizu
4
2.3k
Flow は今どうなっているか
mizdra
PRO
0
760
TSX の <Hoge<Fuga>> という構文に驚いた話 / tsx-type-argument-syntax
kanaru0928
0
240
Discordを用いたラボオートメーション関連情報収集の自動化
noguhiro2002
0
460
AIに既存システムを理解させる技術 ~レガシーを見捨てないハーネスエンジニアリング入門~
ochtum
0
170
tsc.rip を支える技術 / Kyoto.なんか #8
susisu
0
3.8k
DynamoDBの基礎を振り返りながらベクトル検索機能を理解する
musan
3
240
初めての模倣学習とVLA
natsutan
0
320
Go 1.27からのGODEBUG / Go 1.27 リリースパーティ #go127party
mazrean
0
260
言葉の格闘技のススメ~紙とペンと言葉から始める、キャリアの描き方~
progresscicada
2
190
Featured
See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
220
How GitHub (no longer) Works
holman
316
150k
Agile that works and the tools we love
rasmusluckow
331
22k
Thoughts on Productivity
jonyablonski
76
5.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.6k
SEO for Brand Visibility & Recognition
aleyda
0
4.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Making Projects Easy
brettharned
120
6.7k
KATA
mclloyd
PRO
35
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
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