View
3.343
Download
3
Category
Preview:
DESCRIPTION
My slide for angularjs at TechCamp Sai Gon 2014
Citation preview
BUILDING SINGLE-PAGE WEB APPLICATIONS WITH ANGULARJS
DUY LAM
MAR 2014
AGENDA
Single-page Web App
AngularJS Highlights
Takeaway
ABOUT ME
Software Architectat KMS Technology
duylam@kms-technology.comhttp://vn.linkedin.com/in/duylamphuong
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
Recommended