Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Your Cloud. 
Your Business. 
Let’s Build an AngularJS App! 
Jeremy Likness 
Principal Architect 
@JeremyLikness
Thanks to our Sponsors
www.ivision.com 
• Business Process 
Management/ALM 
• Custom Application 
Development 
• Collaboration 
• Business Intell...
TODAY’S AGENDA 
1. What and Why? What is Angular? Why use it? 
2. How? How do you build an AngularJS app? 
3. Q&A Guarante...
WHAT AND WHY?
WHAT AND WHY? 
I’m biased because … 
25 
developers 
80,000+ 
L.O.Ts.C 
200+ 
components 
3 
years 
4x 
Improvement 
Globa...
WHY? 
4x 
Improvement 
• Began effort (6 mos.) with JavaScript and KnockoutJS 
• Changed to use AngularJS and TypeScript 
...
WHAT? 
Angular is … 
Expressions 
Angular 
Glue 
Templates Container 
Tools 
Testable
DEMO: How
Step 1 
git checkout 17e9892 
SHELL
Step 2 
git checkout b8864f4 
MODULE
Step 3 
git checkout f5af48e 
SPECIFICATION
Step 4 
git checkout 33d9473 
DEFINITION
Step 5 
git checkout e9db905 
IMPLEMENTATION
Step 6 
git checkout c71895b 
OBJECTS
Step 7 
git checkout 40c946e 
PROPERTIES
Step 8 
git checkout 602ae23 
GREEN
Step 9 
git checkout 4636a91 
DEPENDENCIES
Step 10 
git checkout 72429dd 
FACTORIES
Step 11 
git checkout c065ad3 
CONTROLLERS
Step 12 
git checkout 6a801b2 
FILTERS
Step 13 
git checkout 11e13f7 
PATTERNS
Step 14 
git checkout cc6d716 
DIRECTIVES
Step 15 
git checkout 061ba51 
RANGES
Step 16 
git checkout 55e2c30 
SLIDER
Step 17 
git checkout dec799e 
RESPONSIVE
Step 18 
git checkout e466dc6 
VALIDATIONS
Step 19 
git checkout 8dbba93 
FORMS
Step 20 
git checkout bc4b736 
PROFILE
Step 21 
git checkout 6da74a4 
TILE
Step 22 
git checkout 1ae397c 
CLASS
Step 23 
git checkout master 
SHIP IT!
Questions? 
Source Code: https://github.com/JeremyLikness/AngularHealthApp/ 
Specifications: http://jeremylikness.github.i...
Upcoming SlideShare
Loading in …5
×

Let's Build an Angular App!

13,088 views

Published on

AngularJS is a popular JavaScript framework that provides a variety of services including dependency injection, data-binding, and declarative DOM extensions. In this talk, Jeremy will cover at a high level what the benefits of AngularJS are and then build a reference application. If you are an Angular developer looking to learn best practices or have never touched Angular and want to know what the fuss is all about, this talk is for you. (Grab the project and use the Git checkouts to follow along)

Published in: Technology
  • Be the first to comment

Let's Build an Angular App!

  1. 1. Your Cloud. Your Business. Let’s Build an AngularJS App! Jeremy Likness Principal Architect @JeremyLikness
  2. 2. Thanks to our Sponsors
  3. 3. www.ivision.com • Business Process Management/ALM • Custom Application Development • Collaboration • Business Intelligence
  4. 4. TODAY’S AGENDA 1. What and Why? What is Angular? Why use it? 2. How? How do you build an AngularJS app? 3. Q&A Guaranteed answers.  Source Code: https://github.com/JeremyLikness/AngularHealthApp/ Specifications: http://jeremylikness.github.io/AngularHealthApp/test.html Running App: http://jeremylikness.github.io/AngularHealthApp/
  5. 5. WHAT AND WHY?
  6. 6. WHAT AND WHY? I’m biased because … 25 developers 80,000+ L.O.Ts.C 200+ components 3 years 4x Improvement Global Parallel Team
  7. 7. WHY? 4x Improvement • Began effort (6 mos.) with JavaScript and KnockoutJS • Changed to use AngularJS and TypeScript • 4x faster development, attributed in a large part to Angular
  8. 8. WHAT? Angular is … Expressions Angular Glue Templates Container Tools Testable
  9. 9. DEMO: How
  10. 10. Step 1 git checkout 17e9892 SHELL
  11. 11. Step 2 git checkout b8864f4 MODULE
  12. 12. Step 3 git checkout f5af48e SPECIFICATION
  13. 13. Step 4 git checkout 33d9473 DEFINITION
  14. 14. Step 5 git checkout e9db905 IMPLEMENTATION
  15. 15. Step 6 git checkout c71895b OBJECTS
  16. 16. Step 7 git checkout 40c946e PROPERTIES
  17. 17. Step 8 git checkout 602ae23 GREEN
  18. 18. Step 9 git checkout 4636a91 DEPENDENCIES
  19. 19. Step 10 git checkout 72429dd FACTORIES
  20. 20. Step 11 git checkout c065ad3 CONTROLLERS
  21. 21. Step 12 git checkout 6a801b2 FILTERS
  22. 22. Step 13 git checkout 11e13f7 PATTERNS
  23. 23. Step 14 git checkout cc6d716 DIRECTIVES
  24. 24. Step 15 git checkout 061ba51 RANGES
  25. 25. Step 16 git checkout 55e2c30 SLIDER
  26. 26. Step 17 git checkout dec799e RESPONSIVE
  27. 27. Step 18 git checkout e466dc6 VALIDATIONS
  28. 28. Step 19 git checkout 8dbba93 FORMS
  29. 29. Step 20 git checkout bc4b736 PROFILE
  30. 30. Step 21 git checkout 6da74a4 TILE
  31. 31. Step 22 git checkout 1ae397c CLASS
  32. 32. Step 23 git checkout master SHIP IT!
  33. 33. Questions? Source Code: https://github.com/JeremyLikness/AngularHealthApp/ Specifications: http://jeremylikness.github.io/AngularHealthApp/test.html Running App: http://jeremylikness.github.io/AngularHealthApp/ This Deck: http://www.slideshare.net/jeremylikness Jeremy Likness, Principal Architect @JeremyLikness

×