single page application (spa) using angularjs
DESCRIPTION
Single Page Application (SPA) using angular js. Also have some relative sample codes. if u need then just mail me at [email protected]TRANSCRIPT
Single Page Application Using
AngularJS
Presented byMd. Rousonur Jaman
Secure Link Services Ltd.
SPA using AngularJS - Rouson 2
What is single page application?a web application that fits on a single web page providing a more fluid user experience
similar to a desktop application
Condition:all necessary code is retrieved with a single
page loadthe page does not reload at any point in the
processdoes not control transfer to another page
20/5/2013
SPA using AngularJS - Rouson 3
What is AngularJS?Client Side Browser App Framework Sponsored by GoogleOpen SourceAugment browser-based applications
with model–view–controller (MVC) capability
Basically AngularJS is MVW Framework.What is MVW?model–view–whatever
20/5/2013
SPA using AngularJS - Rouson 4
Why we choose AngularJS? BootstrappingTemplates2-way data bindingModule basedDependency InjectionRoutingDirectivesUnit Test
20/5/2013
SPA using AngularJS - Rouson 5
BootstrappingAutomatic InitializationManual Initialization
20/5/2013
SPA using AngularJS - Rouson 6
Automatic InitializationAutomatically initializes
upon ’DOMContentLoaded’ eventload the module associated with the
directive.create the application injectorcompile the DOM treating the ng-
app directive as the root of the compilation.
20/5/2013
SPA using AngularJS - Rouson 7
Manual InitializationGive more control over the initialization
processneed to perform an operation before Angular
compiles a page
20/5/2013
SPA using AngularJS - Rouson 8
TemplatesBelow attributes are used in a template:Directive — An attribute or element that
augments an existing DOM element or represents a reusable DOM
Markup — The double curly brace notation {{ }} to bind expressions to elements is built-in angular markup.
Filter — Formats your data for display to the user.
Form controls — Lets you validate user input.
20/5/2013
SPA using AngularJS - Rouson 9
Templates
20/5/2013
SPA using AngularJS - Rouson 10
WITH CONTROLLERS
20/5/2013
SPA using AngularJS - Rouson 11
ASYNC TEMPLATESAngularJS loads the templates
asynchronously.
20/5/2013
SPA using AngularJS - Rouson 12
2-WAY DATA BINDING
20/5/2013
SPA using AngularJS - Rouson 13
HOW IT WORKS?
20/5/2013
SPA using AngularJS - Rouson 14
HOW IT WORKS?
20/5/2013
SPA using AngularJS - Rouson 15
DEPENDENCY INJECTION
20/5/2013
SPA using AngularJS - Rouson 16
HOW IT WORKS?
20/5/2013
SPA using AngularJS - Rouson 17
ROUTING
20/5/2013
SPA using AngularJS - Rouson 18
DIRECTIVESMain power of AngularJSAn attribute or element that augments an
existing DOM element or represents a reusable DOM
20/5/2013
SPA using AngularJS - Rouson 19
Thank YouAny Question
?20/5/2013