Slide 1
Slide 1 text
First un-learn and then more to learn:
Building a complex web app entirely in AngularJS
Slide 2
Slide 2 text
A platform for community engagement!
!
Over 200 clients, Primarily Government sector
EngagementHQ
Slide 3
Slide 3 text
Share
A platform for community engagement!
!
Over 200 clients, Primarily Government sector
EngagementHQ
Slide 4
Slide 4 text
Share
Listen
EngagementHQ
A platform for community engagement!
!
Over 200 clients, Primarily Government sector
Slide 5
Slide 5 text
Share
Listen
Learn
EngagementHQ
A platform for community engagement!
!
Over 200 clients, Primarily Government sector
Slide 6
Slide 6 text
EngagementHQ
Slide 7
Slide 7 text
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"
Slide 8
Slide 8 text
EHQ Mobile – Agility in our Journey
Day
1:
Idea*on
Day
26:
Demo
Day
86:
Final
Launch
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Multi Level Navigation
Consultation Hub!
Consultation!
Tools! Widgets!
Consultation!
Tools! Widgets!
Slide 11
Slide 11 text
Multi Level Navigation
Consultation Hub!
Consultation!
Tools! Widgets!
Consultation!
Tools! Widgets!
Tools! Widgets!
Slide 12
Slide 12 text
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
Slide 13
Slide 13 text
$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
Slide 14
Slide 14 text
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?
Slide 15
Slide 15 text
We had some patterns : Tools have comments
Dynamically Generate State Objects
But where does your state generator function go?
Slide 16
Slide 16 text
“Angular is a HTML Compiler – Teaches old HTML new tricks”
The Power of Directives and Events
Slide 17
Slide 17 text
Various Projects have different access control
Slide 18
Slide 18 text
Various Projects have different access control
Open Projects
Slide 19
Slide 19 text
Various Projects have different access control
Open Projects
Protected Projects
Slide 20
Slide 20 text
Various Projects have different access control
Open Projects
Protected Projects
Paneled Projects
Slide 21
Slide 21 text
Application code gets the data from the server
process the response !
!
take action based on the response status code.
Slide 22
Slide 22 text
Before the!
Application code gets the data from the server
process the response !
!
take action based on the response status code.
Pre-!
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
Refresh
State Based Routes (UI Router), Reuse Views and Controllers,
Directives, Events, Response Interceptors, Promise Objects
Slide 25
Slide 25 text
Filters
And much more that saved the day!
Slide 26
Slide 26 text
$watch
And much more that saved the day!
Slide 27
Slide 27 text
$eval
And much more that saved the day!
Slide 28
Slide 28 text
$eval
Do find us off-stage and we are happy to talk about these…
And much more that saved the day!
Slide 29
Slide 29 text
We are grateful to these guys
AngularJS
Hammer.js
Angular UI
Project
jQuery
iScroll
Keboola
Angular
Library
Yeoman
Bower
jQuery
Nestable
Slide 30
Slide 30 text
Adhil Azeez NV
Front End Developer
Twitter: adhilnv
Email: [email protected]
Praneet Koppula
UX & Product Management
Twitter: mphaxise
Email: [email protected]
Introducing Ourselves