Responsive web app design using Slides Assembled by:Slides Assembled by:Slides Assembled by:Slides Assembled by: ArnabArnabArnabArnab PradhanPradhanPradhanPradhan Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028 Reg. No. 133Reg. No. 133Reg. No. 133Reg. No. 133----1124112411241124----0276027602760276----12121212
What is AngularJS Features of AngularJS Why AngularJS jQuery vs AngularJS
A MVC JavaScript framework by Google for creating single page dynamic web application Open Source ◦ GitHub: https://github.com/angular/angular.js ◦ MIT License◦ MIT License
Two-way Data Binding – Model as single source of truth Directives – Extend HTML MVC Dependency InjectionDependency Injection Testing Deep Linking (Map URL to route Definition) Server – Side Communication
Views are declarative ◦ The structure of the interface Controllers do not need to directly manipulate the view ◦ Changes in the models / data are automatically◦ Changes in the models / data are automatically reflected in the view ◦ Updates are managed by the frameworks
Directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element (or transform it, replace it, etc.) Some angular directivesSome angular directives The ng-app - Bootstrapping your app and defining its scope. The ng-controller - defines which controller will be in charge of your view. The ng-repeat - Allows for looping through collections
Model (Data) View (UI) Notifies Controller (Logic) Notifies Changes
Model DOM JS Objects Controller View JS Classes DOM
Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connectsand also serves as the pipeline that connects them.
Unit testing front end code is usually hard because there are so many sticky dependencies. Angular’s DI allows you to mock out many of these dependencies and isolate individual components.isolate individual components.
Deep linking supported Server side communication is done by $http and $resource services
Scope management Form validation Animation Routing FiltersFilters API client ........ Many more
Angular 2 (Angular-Meteor) Write Angular on the server(angular-meteor.com)
[1] https://github.com/angular/angular.js [2] http://campus.codeschool.com/courses/shaping-up-with- angular-js/ [3] https://docs.angularjs.org/api/ [4] http://www.nganimate.org/ [5] http://ngmodules.org/modules/ngtimeago[5] http://ngmodules.org/modules/ngtimeago [6] http://angular-js.in/panhandler/
Any Question?

Responsive web design with Angularjs

  • 1.
    Responsive web appdesign using Slides Assembled by:Slides Assembled by:Slides Assembled by:Slides Assembled by: ArnabArnabArnabArnab PradhanPradhanPradhanPradhan Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028 Reg. No. 133Reg. No. 133Reg. No. 133Reg. No. 133----1124112411241124----0276027602760276----12121212
  • 2.
    What is AngularJS Featuresof AngularJS Why AngularJS jQuery vs AngularJS
  • 3.
    A MVC JavaScriptframework by Google for creating single page dynamic web application Open Source ◦ GitHub: https://github.com/angular/angular.js ◦ MIT License◦ MIT License
  • 4.
    Two-way Data Binding– Model as single source of truth Directives – Extend HTML MVC Dependency InjectionDependency Injection Testing Deep Linking (Map URL to route Definition) Server – Side Communication
  • 5.
    Views are declarative ◦The structure of the interface Controllers do not need to directly manipulate the view ◦ Changes in the models / data are automatically◦ Changes in the models / data are automatically reflected in the view ◦ Updates are managed by the frameworks
  • 6.
    Directives are markers(such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element (or transform it, replace it, etc.) Some angular directivesSome angular directives The ng-app - Bootstrapping your app and defining its scope. The ng-controller - defines which controller will be in charge of your view. The ng-repeat - Allows for looping through collections
  • 7.
    Model (Data) View(UI) Notifies Controller (Logic) Notifies Changes
  • 8.
  • 9.
    Angular implements MVCby asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connectsand also serves as the pipeline that connects them.
  • 10.
    Unit testing frontend code is usually hard because there are so many sticky dependencies. Angular’s DI allows you to mock out many of these dependencies and isolate individual components.isolate individual components.
  • 11.
    Deep linking supported Serverside communication is done by $http and $resource services
  • 12.
  • 15.
    Angular 2 (Angular-Meteor) WriteAngular on the server(angular-meteor.com)
  • 16.
    [1] https://github.com/angular/angular.js [2] http://campus.codeschool.com/courses/shaping-up-with- angular-js/ [3]https://docs.angularjs.org/api/ [4] http://www.nganimate.org/ [5] http://ngmodules.org/modules/ngtimeago[5] http://ngmodules.org/modules/ngtimeago [6] http://angular-js.in/panhandler/
  • 17.