Single Page Application (SPA) using AngularJS

25,515 views
24,689 views

Published on

Single Page Application (SPA) using angular js. Also have some relative sample codes.
if u need then just mail me at rony.buet.cse@gmail.com

Published in: Technology
3 Comments
40 Likes
Statistics
Notes
No Downloads
Views
Total views
25,515
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
1,075
Comments
3
Likes
40
Embeds 0
No embeds

No notes for slide

Single Page Application (SPA) using AngularJS

  1. 1. Presented byMd. Rousonur JamanSecure Link Services Ltd.
  2. 2. What is single page application? a web application that fits on a single web page providing a more fluid user experience similar to adesktop applicationCondition: all necessary code is retrieved with a single page load the page does not reload at any point in the process does not control transfer to another page20/5/2013 2SPA using AngularJS - Rouson
  3. 3. What is AngularJS? Client Side Browser App Framework Sponsored by Google Open Source Augment browser-based applications with model–view–controller (MVC) capabilityBasically AngularJS is MVW Framework.What is MVW?model–view–whatever20/5/2013 3SPA using AngularJS - Rouson
  4. 4. Why we choose AngularJS? Bootstrapping Templates 2-way data binding Module based Dependency Injection Routing Directives Unit Test20/5/2013 4SPA using AngularJS - Rouson
  5. 5. Bootstrapping Automatic Initialization Manual Initialization20/5/2013 5SPA using AngularJS - Rouson
  6. 6. Automatic Initialization Automatically initializesupon ’DOMContentLoaded’ event load the module associated with the directive. create the application injector compile the DOM treating the ng-app directive as theroot of the compilation.20/5/2013 6SPA using AngularJS - Rouson
  7. 7. Manual Initialization Give more control over the initialization process need to perform an operation before Angular compilesa page20/5/2013 7SPA using AngularJS - Rouson
  8. 8. TemplatesBelow attributes are used in a template: Directive — An attribute or element that augments anexisting DOM element or represents a reusable DOM Markup — The double curly brace notation {{ }} tobind expressions to elements is built-in angularmarkup. Filter — Formats your data for display to the user. Form controls — Lets you validate user input.20/5/2013 8SPA using AngularJS - Rouson
  9. 9. Templates20/5/2013 9SPA using AngularJS - Rouson
  10. 10. WITH CONTROLLERS20/5/2013 10SPA using AngularJS - Rouson
  11. 11. ASYNC TEMPLATES AngularJS loads the templates asynchronously.20/5/2013 11SPA using AngularJS - Rouson
  12. 12. 2-WAY DATA BINDING20/5/2013 12SPA using AngularJS - Rouson
  13. 13. HOW IT WORKS?20/5/2013 13SPA using AngularJS - Rouson
  14. 14. HOW IT WORKS?20/5/2013 14SPA using AngularJS - Rouson
  15. 15. DEPENDENCY INJECTION20/5/2013 15SPA using AngularJS - Rouson
  16. 16. HOW IT WORKS?20/5/2013 16SPA using AngularJS - Rouson
  17. 17. ROUTING20/5/2013 17SPA using AngularJS - Rouson
  18. 18. DIRECTIVES Main power of AngularJS An attribute or element that augments an existingDOM element or represents a reusable DOM20/5/2013 18SPA using AngularJS - Rouson
  19. 19. Thank YouAny Question?20/5/2013 19SPA using AngularJS - Rouson

×