Let's Build an Angular App!
•Download as PPTX, PDF•
6 likes•14,189 views
The document outlines an agenda for building an AngularJS application. The agenda includes explaining what AngularJS is and why it should be used, demonstrating how to build an AngularJS app through 23 code commits, and providing links to the source code, specifications, and running application. The speaker is the principal architect Jeremy Likness and aims to answer questions about AngularJS.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (16)
Similar to Let's Build an Angular App!
Similar to Let's Build an Angular App! (20)
Recently uploaded
Recently uploaded (20)
Let's Build an Angular App!
- 1. Your Cloud. Your Business. Let’s Build an AngularJS App! Jeremy Likness Principal Architect @JeremyLikness
- 2. Thanks to our Sponsors
- 3. www.ivision.com • Business Process Management/ALM • Custom Application Development • Collaboration • Business Intelligence
- 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/
- 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. 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. WHAT? Angular is … Expressions Angular Glue Templates Container Tools Testable
- 9. DEMO: How
- 10. Step 1 git checkout 17e9892 SHELL
- 11. Step 2 git checkout b8864f4 MODULE
- 12. Step 3 git checkout f5af48e SPECIFICATION
- 13. Step 4 git checkout 33d9473 DEFINITION
- 14. Step 5 git checkout e9db905 IMPLEMENTATION
- 15. Step 6 git checkout c71895b OBJECTS
- 16. Step 7 git checkout 40c946e PROPERTIES
- 17. Step 8 git checkout 602ae23 GREEN
- 18. Step 9 git checkout 4636a91 DEPENDENCIES
- 19. Step 10 git checkout 72429dd FACTORIES
- 20. Step 11 git checkout c065ad3 CONTROLLERS
- 21. Step 12 git checkout 6a801b2 FILTERS
- 22. Step 13 git checkout 11e13f7 PATTERNS
- 23. Step 14 git checkout cc6d716 DIRECTIVES
- 24. Step 15 git checkout 061ba51 RANGES
- 25. Step 16 git checkout 55e2c30 SLIDER
- 26. Step 17 git checkout dec799e RESPONSIVE
- 27. Step 18 git checkout e466dc6 VALIDATIONS
- 28. Step 19 git checkout 8dbba93 FORMS
- 29. Step 20 git checkout bc4b736 PROFILE
- 30. Step 21 git checkout 6da74a4 TILE
- 31. Step 22 git checkout 1ae397c CLASS
- 32. Step 23 git checkout master SHIP IT!
- 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
Editor's Notes
- The height functionality required an additional height filter specification. The height filter is a bit different for two reasons. First, it depends on other services so it is the first example of a filter with a dependency. Second, it should not attempt to convert the input value if it is a min/max range value because this is hard-coded on the controller. Therefore, it takes a parameter to avoid the conversion step for those ranges. The controller was updated to expose the height and range values and the UI updated with a slider. Notice that you can now change the height as well as toggle the unit of measure and see it all reflected dynamically. There is no special messaging or watch because the properties depend on each other and Angular will automatically reevaluate the values when the model is mutated.
- A quick pass at styling makes for consistent UI elements and allows them to flow to fill the space. The app is now responsive to wide and small (mobile) configurations.
- Weight specifications have been added. The weight input will be free form, so additional validation must exist to ensure the user profile is never populated with an invalid weight. The specifications detail these requirements along with the necessary filter to show the proper unit of measure. These are failing because the weight functionality has not yet been implemented.
- The weight form and styles are added and the conversion is now testable using the input field. For weights within the range the conversion works seamlessly when the unit of measure is changed. The user profile was updated to capture the most recent unit of measure. This way when the unit of measure changes, it can convert the weight values for exposure to the UI. This should only happen at the precise moment of conversion; not before or after.
- The age specifications are added and age input implemented in the UI. Now the user profile is complete and we can focus on exposing the formulas.