Single Page Application (SPA) using AngularJS

Single Page Application (SPA) using AngularJS

• 1.
  Presented by Md. RousonurJaman Secure Link Services Ltd.
• 2.
  What is singlepage 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 load  the page does not reload at any point in the process  does not control transfer to another page 20/5/2013 2SPA using AngularJS - Rouson
• 3.
  What is AngularJS? Client Side Browser App Framework  Sponsored by Google  Open Source  Augment browser-based applications with model– view–controller (MVC) capability Basically AngularJS is MVW Framework. What is MVW? model–view–whatever 20/5/2013 3SPA using AngularJS - Rouson
• 4.
  Why we chooseAngularJS?  Bootstrapping  Templates  2-way data binding  Module based  Dependency Injection  Routing  Directives  Unit Test 20/5/2013 4SPA using AngularJS - Rouson
• 5.
  Bootstrapping  Automatic Initialization Manual Initialization 20/5/2013 5SPA using AngularJS - Rouson
• 6.
  Automatic Initialization  Automaticallyinitializes upon ’DOMContentLoaded’ event  load the module associated with the directive.  create the application injector  compile the DOM treating the ng-app directive as the root of the compilation. 20/5/2013 6SPA using AngularJS - Rouson
• 7.
  Manual Initialization  Givemore control over the initialization process  need to perform an operation before Angular compiles a page 20/5/2013 7SPA using AngularJS - Rouson
• 8.
  Templates Below attributes areused 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 8SPA using AngularJS - Rouson
• 9.
  Templates  20/5/2013 9SPA usingAngularJS - Rouson
• 10.
  WITH CONTROLLERS  20/5/2013 10SPAusing AngularJS - Rouson
• 11.
  ASYNC TEMPLATES  AngularJSloads the templates asynchronously. 20/5/2013 11SPA using AngularJS - Rouson
• 12.
  2-WAY DATA BINDING  20/5/201312SPA using AngularJS - Rouson
• 13.
  HOW IT WORKS?  20/5/201313SPA using AngularJS - Rouson
• 14.
  HOW IT WORKS?  20/5/201314SPA using AngularJS - Rouson
• 15.
  DEPENDENCY INJECTION 20/5/2013 15SPAusing AngularJS - Rouson
• 16.
  HOW IT WORKS?  20/5/201316SPA using AngularJS - Rouson
• 17.
  ROUTING  20/5/2013 17SPA usingAngularJS - Rouson
• 18.
  DIRECTIVES  Main powerof AngularJS  An attribute or element that augments an existing DOM element or represents a reusable DOM 20/5/2013 18SPA using AngularJS - Rouson
• 19.
  Thank You Any Question ? 20/5/201319SPA using AngularJS - Rouson