building single-page web applications with angularjs
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.TRANSCRIPT
![Page 1: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/1.jpg)
BUILDING SINGLE-PAGE WEB APPLICATION WITH ANGULARJS
DUY LAMKMS TECHNOLOGY
MAR 2014
![Page 2: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/2.jpg)
AGENDA
Single-page Web App
AngularJS
Takeaway
![Page 4: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/4.jpg)
OBJECTIVES
Understand the Single-page approach and its benefits
Understand how well AngularJS supports in building Single-page App
![Page 5: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/5.jpg)
AGENDA
Single-page Web App
AngularJS
Takeaway
![Page 6: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/6.jpg)
Multi-page web application
SINGLE-PAGE WEB APPLICATION
Single-page web application
![Page 7: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/7.jpg)
Highlight SPA apps
IS SPA THE FUTURE OF WEB APP ?
(one of) SPA pitfall: content-heavy sites
![Page 8: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/8.jpg)
SPA BENEFITS
Runs faster Gives better UX Is able to operate offline (thanks to HTML5) Uses less network bandwidth
![Page 9: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/9.jpg)
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
![Page 10: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/10.jpg)
NOTABLE FRAMEWORKS
http://todomvc.com
ASP.NET Single Page Application
![Page 11: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/11.jpg)
AGENDA
Single-page Web App
AngularJS
Takeaway
![Page 12: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/12.jpg)
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
![Page 13: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/13.jpg)
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
![Page 14: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/14.jpg)
DEMO
![Page 15: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/15.jpg)
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
![Page 16: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/16.jpg)
HELLO WORLD
![Page 17: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/17.jpg)
MVC ARCHITECTURE
View(template)
ControllerModel
Two-waybinding
<html></html>
Update
Compile Interact
Routelink link
![Page 18: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/18.jpg)
EXPLORE THE CODE
Initialize AngularJS Controllers, Views and Routes Two-way binding in Model and
View Interaction between View and
Controller
![Page 19: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/19.jpg)
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
![Page 20: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/20.jpg)
USE (INJECT) BUILT-IN SERVICES
Use HTTP and Cookie built-in services
![Page 21: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/21.jpg)
DEPENDENCY INJECTION IN NUTSHELL
Dependency is handed to the component
AngularJS Injector service
![Page 22: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/22.jpg)
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
![Page 23: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/23.jpg)
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
![Page 24: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/24.jpg)
EXPLORE THE CODE
Register a recipeService vs. Factory
1
2
![Page 25: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/25.jpg)
ANGULARJS
Why AngularJSAngularJS conceptsDependency Injection & “recipe” in Injector
serviceDirectives & Filters
![Page 26: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/26.jpg)
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)
![Page 27: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/27.jpg)
DIRECTIVES
Template
Compiled view
![Page 28: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/28.jpg)
FILTERS
“format the value of an expression for display to the user”
![Page 29: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/29.jpg)
EXPLORE THE CODE
Implement directives Implement filters
![Page 30: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/30.jpg)
AGENDA
Single-page Web App
AngularJS
Takeaway
![Page 31: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/31.jpg)
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
![Page 32: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/32.jpg)
KILLER ANGULARJS FEATURES
MVC architecture Dependency Injection Customized HTML markers (tags and
attributes)
![Page 33: Building Single-page Web Applications with AngularJS](https://reader035.vdocuments.site/reader035/viewer/2022062418/554a4871b4c905293a8b56e6/html5/thumbnails/33.jpg)
REFERENCES
Source code of demo app: https://github.com/kms-technology/angularjs
Demo app url: http://kms-technology.github.io/angularjs/