AngularJs (1.x) Presentation

AngularJs (1.x) Presentation

• 1.
  AngularJs (1.x) By Google
• 2.
  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
• 3.
  Other Javascript MV*Frameworks  BackboneJS  EmberJS
• 4.
  MVC : ModelView Controller View ControllerModel View : • Renders the Model data • Send User actions/events to controller • UI Controller: • Define Application Behavior • Maps user actions to Model • Select view for response Model: • Business Logic • Notify view changes • Application Functionality • Data in general
• 5.
  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
• 6.
  Why we chooseAngularJS? • Bootstrapping • Templates • Module based • Services • Dependency Injection • 2-way data binding • Routing • Directives • Unit Test
• 7.
  Bootstrapping 7 Automatic Initialization ManualInitialization
• 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.
• 9.
  Module A module isa collection of services, directives, controllers, filters, and configuration information. angular.module is used to configure the $injector
• 10.
  Services AngularJS supports theconcepts of "Separation of Concerns" using services architecture There are two ways to create a service. • factory • service Factory Service Some in-built services are in AngularJs like $location, $http and $routeProvider etc.
• 11.
  Dependency Injection Example -I Example - II
• 12.
  2-WAY DATA BINDING ModelView
• 13.
  Routing The ngRoute moduleroutes your application to different pages without reloading the entire application.
• 14.
  Directives 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 directives -: ng-app - Bootstrapping your app and defining its scope. ng-controller - defines which controller will be in charge of your view. ng-init - directive initializes application data. ng-model - directive binds the value of HTML controls to application data. ng-bind - bind the innerHTML of the element to the specified model property ng-show – It shows the content if already hidden. ng-hide - It hides the content. ng-view - ng-view is the directive that angular uses as a container to switch between views. ng-include - include HTML from an external file ng-repeat - Allows for looping through collections ng-click - Used to fire an click event.
• 15.
  Unit Testing  Karma Jasmine For testing AngularJS applications there are certain tools that you should use that will make testing much easier to set up and run.
• 16.
  AngularJS Development IDE •Visual Studio 2012/2013 Express or higher • Eclipse • WebStorm • Sublime Text • TextMate
• 17.
  Difference between AngularJs(1.x) and AngularJs 2 • First thing, Angular 2 is not the upgrade of angular 1. Angular 2 is completely rewritten. • AngularJS 1.x is easy to setup. All you need to do is to add reference of the library and you are good to go. • Angular 1.x has 2 ways to bootstrap angular. One using ng-app attribute and other via code. In Angular 2, The only way to bootstrap angular is via code. • In Angular 1.x, we can define a service via 2 different ways. 1) Factory 2) Service And in Angular 2, class is the only way to define a service.
• 18.
  Demo
• 19.
  THANK YOU !