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
340
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
50
Type safe CSS with Reason
cironunes
0
110
What I've learned building automated docs for Ansarada's design system
cironunes
0
70
Beyond ng new
cironunes
2
200
Animate your Angular apps
cironunes
0
420
Sweet Angular, good forms never felt so good
cironunes
0
67
Sweet Angular, good forms never felt so good
cironunes
0
290
Progressive Angular apps
cironunes
3
900
Angular: Um framework. Mobile & desktop.
cironunes
1
590
Other Decks in Programming
See All in Programming
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
120
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
200
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
970
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
590
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
850
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
900
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
520
All About Angular's New Signal Forms
manfredsteyer
PRO
0
180
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
310
技術的負債の正体を知って向き合う
irof
0
180
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Raft: Consensus for Rubyists
vanstee
140
7.1k
RailsConf 2023
tenderlove
30
1.2k
How STYLIGHT went responsive
nonsquared
100
5.8k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Documentation Writing (for coders)
carmenintech
75
5.1k
Unsuck your backbone
ammeep
671
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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?