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
Desenvolvimento ágil com AngularJS
Search
Ciro Nunes
August 03, 2013
Programming
5
330
Desenvolvimento ágil com AngularJS
Ciro Nunes
August 03, 2013
Tweet
Share
More Decks by Ciro Nunes
See All by Ciro Nunes
Rust Front-end with Yew
cironunes
0
46
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
66
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
410
Sweet Angular, good forms never felt so good
cironunes
0
65
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
890
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
4
2k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
10
3k
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
780
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
It's Worth the Effort
3n
185
28k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Balancing Empowerment & Direction
lara
1
430
Designing for humans not robots
tammielis
253
25k
KATA
mclloyd
30
14k
Music & Morning Musume
bryan
46
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
None
desenvolvimento ágil com o angular.js ciro nunes
- front-end engineer ~4 anos - agile coach - javascript,
angular.js, tools & workflow @cironunesdev / cironunes.github.io
None
None
http://meetup.com/AngularJS-Sao-Paulo
hoje vamos falar sobre agilidade no desenvolvimento de aplicações web
agenda - olá angular.js - introdução ao mundo ágil -
user stories - por que testar meu código? - workflow ágil - cart-app
full-feature framework para web apps
hello world index.html 1. <!doctype html> 2. <html ng-app="frontinbh" >
3. <head> 4. <meta charset="utf-8"> 5. <title>Hello World</title> 6. </head> 7. <body ng-controller="HelloCtrl" > 8. <p>Hello {{ name }} !</p> 9. <script src="//ajax.(...)/angular.min.js"></script> 10. <script src="app.js"> 11. </body> 12. </html>
1. angular.module( 'frontinbh' , []) 2. .controller('HelloCtrl' , function( $scope
) { 3. $scope.name = 'world'; 4. }); app.js (plunker) hello world
model = dados view = ui controller = lógica (plunker)
$scope 'cola' o controller na view single responsibility principle +
dependency injection
outras features
routes services directives modules http (ajax) filters data-binding (2 way)
resource (restful) factory providers config
o que é desenvolvimento ágil?
http://agilemanifesto.org/
user stories
user stories encorajam a modularizar e guiar o desenvolvimento pelos
testes
agilizam a escrita dos testes user stories
mas por que devo testar o código?
- confiabilidade - documentação (para humanos) - garantia incríveis poderes!
1. interpretar a user story 2. escrever um teste 3.
fazer o teste passar 4. refatorar 5. repetir a partir do #2 6. declarar os templates workflow
cart app github.com/cironunes/cart live coding
None
ferramentas de workflow
angular-mocks.js ferramentas de testes
bando de dados + api
#1 - como usuário - quero ver a lista de
produtos - para escolher qual vou comprar - nome, preço, imagem, qtde* - busca pelo nome
#2 - como usuário - quero adicionar produtos no carrinho
- para saber o valor total da compra - atualizar o carrinho - calcular o valor total da compra
#3 - como usuário - quero remover produtos do carrinho
- atualizar o carrinho - calcular o valor total da compra
#4 - como usuário - quero finalizar a compra -
limpar o carrinho - mostrar mensagem de carrinho vazio
- fundamentos do angular.js - introdução aos métodos ágeis -
um workflow simples e poderoso - incríveis ferramentas - como testar aplicações angular.js com persistência no mongodb o que aprendemos?
próximos passos
http://thinkster.io/
http://github.com/jmcunningham/AngularJS-Learning
http://meetup.com/AngularJS-Sao-Paulo
obrigado! @cironunesdev
perguntas?