0
© 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

3,872

Published on

My slide for angularjs at TechCamp Sai Gon 2014

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,872
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Appeared sometime in 2005Show the point: the page does not reload after loaded first timeIn an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page, although modern web technologies (such as those included in HTML5) can provide the perception and navigability of separate logical pages in the application. Interaction with the single page application often involves dynamic communication with the web server behind the scenes.
  • SPA is good for web application or game such as management (todo list, tasks, projects), utilities (rss readers, email), education, etc.Content-heavy sites: blog, newspaper, magazine, etc.
  • route /raʊt/In angularjs, View here refers as a templateRoute is to link a View and a Controller togetherModel and View (template) are compiled to make final HTML document for end-user (with attached events if any)Two-way binding: any changes on Model is detected automatically and re-compiles
  • Initialize AngularHow static HTML looks likeHow to bootstrap app with AngularHow to define and load dependent angular modulesControllers, Views and RoutesHow to setup routesController is factory method$scope is data-model or execution contextTwo-way binding in Model and ViewChanges in model are compiled to viewOnly detect changes in “angular” runtime (update scope in settimeout doesn’t work)Interaction between View and Controller$scope is central access to interact
  • directive /dɪˈrɛktɪv; daɪ-/
  • Single-page is good ?
  • Transcript of "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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×