First un-learn and then more to learn: Our experience building a complex web app entirely in AngularJS

We will take you through our journey of building the mobile version of EngagementHQ, an online product that is helping hundreds of government entities effectively engage and interact with the local communities in different parts of the world.

Transcript

1. First un-learn and then more to learn: Building a complex web app entirely in AngularJS
2. A platform for community engagement! ! Over 200 clients, Primarily Government sector EngagementHQ
3. Share   A platform for community engagement! ! Over 200 clients, Primarily Government sector EngagementHQ
4. Share   Listen   EngagementHQ A platform for community engagement! ! Over 200 clients, Primarily Government sector
5. Share   Listen   Learn   EngagementHQ A platform for community engagement! ! Over 200 clients, Primarily Government sector
6. EngagementHQ
7. EHQ Mobile – The Need 0" 5" 10" 15" 20" 25" Jun," 2012" Jul," 2012" Aug," 2012" Sept," 2012" Oct," 2012" Nov," 2012" Dec," 2012" Jan," 2013" Feb," 2013" Mar," 2013" Apr," 2013" May," 2013" Jun," 2013" %"of"Mobile"Visits" %"of"Mobile"Visits"
8. EHQ Mobile – Agility in our Journey Day  1:  Idea*on   Day  26:  Demo   Day  86:  Final  Launch  
10. Multi Level Navigation Consultation Hub! Consultation! Tools! Widgets! Consultation! Tools! Widgets!
11. Multi Level Navigation Consultation Hub! Consultation! Tools! Widgets! Consultation! Tools! Widgets! Tools! Widgets!
12. Consultation Hub with Tools and Widgets Consultation with Tools and Widgets Nested views! Conditionally change behavior of templates in views Attach custom data to state objects! Multi Level Navigation
13. $route in Angular core is only URL router L AngularUI-Router to Rescue! •  Organized around states, which may have routes, as well as other behavior attached Multi Level Navigation
14. We had some patterns : Tools have comments Could we reuse the comments’ Controller and Views and still be able to have custom variables and ensure their states?
15. We had some patterns : Tools have comments Dynamically Generate State Objects But where does your state generator function go?
16. “Angular is a HTML Compiler – Teaches old HTML new tricks” The Power of Directives and Events
17. Various Projects have different access control
18. Various Projects have different access control Open Projects
19. Various Projects have different access control Open Projects Protected Projects
20. Various Projects have different access control Open Projects Protected Projects Paneled Projects
21. Application code gets the data from the server process the response ! ! take action based on the response status code.
22. Before the! Application code gets the data from the server process the response ! ! take action based on the response status code. Pre-!
23. Before the! Pre-! Application code gets the data from the server process the response ! ! take action based on the response status code. For any kind of synchronous or asynchronous preprocessing of received responses, interceptors are used.
24. Refresh State Based Routes (UI Router), Reuse Views and Controllers, Directives, Events, Response Interceptors, Promise Objects
25. Filters And much more that saved the day!
26. $watch And much more that saved the day!
27. $eval And much more that saved the day!
28. $eval Do find us off-stage and we are happy to talk about these… And much more that saved the day!
29. We are grateful to these guys AngularJS Hammer.js Angular UI Project jQuery iScroll Keboola Angular Library Yeoman Bower jQuery Nestable
30. Adhil Azeez NV Front End Developer Twitter: adhilnv Email: adhil@bangthetable.com Praneet Koppula UX & Product Management Twitter: mphaxise Email: praneet@bangthetable.com Introducing Ourselves