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.
© 2014 KMS Technology
BUILDING SINGLE-PAGE WEB
APPLICATIONS WITH ANGULARJS
DUY LAM
MAR 2014
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
ABOUT ME
Software Architect
at KMS Technology
duylam@kms-technology.com
http://vn.linkedin.com/in/duyl
amphuong
OBJECTIVES
 Understand the Single-page approach
 Understand the strength of AngularJS
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
Multi-page web application
SINGLE-PAGE WEB APPLICATION
Highlight SPA apps
IS SPA THE FUTURE OF WEB APP ?
(one of) SPA pitfall: content-heavy sites
NOTABLE FRAMEWORKS
http://todomvc.com
ASP.NET Single Page Application
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
HIGHLIGHTS
MVC architecture
Directives & Filters
WHY ANGULARJS
 Maintained by Google and community
 MIT license (like jQuery)
 First release v0.9.0 on Oct, 2010
 (sham...
DEMO @ HTTP://DUYLAM.GITHUB.IO/ANGULARJS-TECHCAMP2014
HIGHLIGHTS
MVC architecture
Directives & Filters
MVC ARCHITECTURE
View
(template)
ControllerModel
Two-way
binding
<html>
</html>
Update
Compile Interact
EXPLORE THE CODE
View + ModelController Two-way binding
HIGHLIGHTS
MVC architecture
Directives & Filters
DIRECTIVES
are markers on a DOM element (an attribute or an
element name)
attach behaviors to that DOM element and/or
tr...
DIRECTIVES
Template
Compiled view
FILTERS
“format the value of an expression for display to
the user”
EXPLORE THE CODE – A DIRECTIVE
EXPLORE THE CODE – A FILTER
More examples
for directives 
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
WEB APP DEVELOPMENT
 Approaches: Multi-page vs. Single-page
 Single-page: another approach for building
web app
ANGULARJS HIGHLIGHTS
 An active framework
 Follows MVC architecture
 Builds customized HTML markers (tags and
attribute...
REFERENCES
 Demo app source code:
https://github.com/duylam/angularjs-techcamp2014
 Demo app url: http://duylam.github.i...
THANK YOU
© 2014 KMS Technology
Upcoming SlideShare
Loading in …5
×

Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014

8,032 views

Published on

My slide for angularjs at TechCamp Sai Gon 2014

Published in: Technology
  • Be the first to comment

Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014

  1. 1. © 2014 KMS Technology
  2. 2. BUILDING SINGLE-PAGE WEB APPLICATIONS WITH ANGULARJS DUY LAM MAR 2014
  3. 3. AGENDA Single-page Web App AngularJS Highlights Takeaway
  4. 4. ABOUT ME Software Architect at KMS Technology duylam@kms-technology.com http://vn.linkedin.com/in/duyl amphuong
  5. 5. OBJECTIVES  Understand the Single-page approach  Understand the strength of AngularJS
  6. 6. AGENDA Single-page Web App AngularJS Highlights Takeaway
  7. 7. Multi-page web application SINGLE-PAGE WEB APPLICATION
  8. 8. Highlight SPA apps IS SPA THE FUTURE OF WEB APP ? (one of) SPA pitfall: content-heavy sites
  9. 9. NOTABLE FRAMEWORKS http://todomvc.com ASP.NET Single Page Application
  10. 10. AGENDA Single-page Web App AngularJS Highlights Takeaway
  11. 11. HIGHLIGHTS MVC architecture Directives & Filters
  12. 12. WHY ANGULARJS  Maintained by Google and community  MIT license (like jQuery)  First release v0.9.0 on Oct, 2010  (shameless ad -:) Many killer features
  13. 13. DEMO @ HTTP://DUYLAM.GITHUB.IO/ANGULARJS-TECHCAMP2014
  14. 14. HIGHLIGHTS MVC architecture Directives & Filters
  15. 15. MVC ARCHITECTURE View (template) ControllerModel Two-way binding <html> </html> Update Compile Interact
  16. 16. EXPLORE THE CODE View + ModelController Two-way binding
  17. 17. HIGHLIGHTS MVC architecture Directives & Filters
  18. 18. DIRECTIVES are markers on a DOM element (an attribute or an element name) attach behaviors to that DOM element and/or transform the DOM element (and its children)
  19. 19. DIRECTIVES Template Compiled view
  20. 20. FILTERS “format the value of an expression for display to the user”
  21. 21. EXPLORE THE CODE – A DIRECTIVE
  22. 22. EXPLORE THE CODE – A FILTER More examples for directives 
  23. 23. AGENDA Single-page Web App AngularJS Highlights Takeaway
  24. 24. WEB APP DEVELOPMENT  Approaches: Multi-page vs. Single-page  Single-page: another approach for building web app
  25. 25. ANGULARJS HIGHLIGHTS  An active framework  Follows MVC architecture  Builds customized HTML markers (tags and attributes) Sorry, I don’t like angularjs
  26. 26. REFERENCES  Demo app source code: https://github.com/duylam/angularjs-techcamp2014  Demo app url: http://duylam.github.io/angularjs- techcamp2014
  27. 27. THANK YOU © 2014 KMS Technology

×