© 2014 KMS Technology
Building Single-page Web Applications with AngularJS @ TechCamp Sai Gon 2014
May 07, 2015
My slide for angularjs at TechCamp Sai Gon 2014
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
BUILDING SINGLE-PAGE WEB APPLICATIONS WITH ANGULARJS
DUY LAM
MAR 2014
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
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
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 architectureDirectives & Filters
WHY ANGULARJS
Maintained by Google and community MIT license (like jQuery) First release v0.9.0 on Oct, 2010
(shameless ad -:) Many killer features
DEMO @ HTTP://DUYLAM.GITHUB.IO/ANGULARJS-TECHCAMP2014
HIGHLIGHTS
MVC architectureDirectives & Filters
MVC ARCHITECTURE
View(template)
ControllerModel
Two-waybinding
<html></html>
Update
Compile Interact
EXPLORE THE CODE
View + ModelController Two-way binding
HIGHLIGHTS
MVC architectureDirectives & Filters
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)
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
attributes)
Sorry, I don’t like angularjs
REFERENCES
Demo app source code: https://github.com/duylam/angularjs-techcamp2014
Demo app url: http://duylam.github.io/angularjs-techcamp2014
Related Documents
