Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

0631b82c331855e1254fc652da981118?s=47 Adhil Azeez NV
September 21, 2013

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.

0631b82c331855e1254fc652da981118?s=128

Adhil Azeez NV

September 21, 2013
Tweet

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  
  9. None
  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