View
7.490
Download
5
Category
Preview:
DESCRIPTION
In recent years, a modern approach for building client-centric applications, Single-Page Web Applications, has become well-known in our developer community. As a result, there are several new frameworks that have made their way to the professional developer’s landscape. AngularJS is a new framework that radically changes the way developers build a web application. It is one of the most ideal alternatives that offers a powerful foundation to build your web application. This slides is dedicated to developers who want to learn the best practices in single-page approaches and how to apply them with AngularJS.
Citation preview
BUILDING SINGLE-PAGE WEB APPLICATION WITH ANGULARJS
DUY LAMKMS TECHNOLOGY
MAR 2014
AGENDA
Single-page Web App
AngularJS
Takeaway
ABOUT ME
Software Architectat KMS Technology
duylam@kms-technology.comhttp://vn.linkedin.com/in/duylamphuong
OBJECTIVES
Understand the Single-page approach and its benefits
Understand how well AngularJS supports in building Single-page App
AGENDA
Single-page Web App
AngularJS
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
SPA BENEFITS
Runs faster Gives better UX Is able to operate offline (thanks to HTML5) Uses less network bandwidth
SPA DRAWBACKS
Site content becomes SEO-unfriendly Insecure application code Aware navigation browser buttons: Back,
Forward and Reload Run well in browsers compatible with HTML5
History API
NOTABLE FRAMEWORKS
http://todomvc.com
ASP.NET Single Page Application
AGENDA
Single-page Web App
AngularJS
Takeaway
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
WHY ANGULARJS
First release v0.9.0 on Oct, 2010 Maintained by Google and community Active development: 03 new releases per
month MIT license (like jQuery) (shameless ad -:) Many killer features
DEMO
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
HELLO WORLD
MVC ARCHITECTURE
View(template)
ControllerModel
Two-waybinding
<html></html>
Update
Compile Interact
Routelink link
EXPLORE THE CODE
Initialize AngularJS Controllers, Views and Routes Two-way binding in Model and
View Interaction between View and
Controller
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
USE (INJECT) BUILT-IN SERVICES
Use HTTP and Cookie built-in services
DEPENDENCY INJECTION IN NUTSHELL
Dependency is handed to the component
AngularJS Injector service
ANGULARJS INJECTOR SERVICE
Injector is responsible for creating two types of objects: User-defined Objects: – We register a “recipe” to instruct Injector in how
to create objects– Recipe types: Value, Factory, Service, Provider
and Constant Specialized Objects: Controllers, Directives,
Filters and Animations
INJECT DEPENDENCY IN ANGULARJS
Elements to have dependencies: - Controller, Directive, Filter and Animation- Factory, Service and Provider
Elements can be injected (recipe): Service, Provider, Value, Factory and Constant
EXPLORE THE CODE
Register a recipeService vs. Factory
1
2
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & 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
Implement directives Implement filters
AGENDA
Single-page Web App
AngularJS
Takeaway
WEB APP DEVELOPMENT
Approaches: Multi-page vs. Single-page Highlight Single-page benefits:
Runs faster Has better UX
Single-page drawbacks: SEO-unfriendly Insecure application code
KILLER ANGULARJS FEATURES
MVC architecture Dependency Injection Customized HTML markers (tags and
attributes)
REFERENCES
Source code of demo app: https://github.com/kms-technology/angularjs
Demo app url: http://kms-technology.github.io/angularjs/
Recommended