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
76
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
41
Introdução ao GraphQL
paulohp
0
45
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
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
6
1.3k
PHPカンファレンス関西2025 基調講演
sugimotokei
5
950
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
240
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
230
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
170
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
120
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
240
Go製CLIツールをnpmで配布するには
syumai
0
230
Featured
See All Featured
Speed Design
sergeychernyshev
32
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Visualization
eitanlees
146
16k
Automating Front-end Workflow
addyosmani
1370
200k
We Have a Design System, Now What?
morganepeng
53
7.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
Gamification - CAS2011
davidbonilla
81
5.4k
Agile that works and the tools we love
rasmusluckow
329
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.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