Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular js for beginners


Published on

This is a laconic presentation on Angular JS for beginners only. I have emphasized on example rather than theory. There are self explained source code urls attached with slides. In the last slide I have attached source code for a real life example using Angular JS an BootStrap which may be very helpful to understand the concept of Angular JS.

Published in: Software
  • Be the first to comment

Angular js for beginners

  1. 1. Angular JS QuickStrat Md. Munirul Hoque
  2. 2. Why Angular ?? ❖ Two way data binding. ❖ Data Dependency Injection. ❖ MVC- MVVM - MVW ❖ HTML Templating
  3. 3. I often say that AngularJS is what the web browser would have been, had it been designed for application Miško Hevery AngularJS Creator
  4. 4. Enough Talk Let’s Code
  5. 5. Compare ?? Java script code jQuery code Angular JS code
  6. 6. A simple program <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
  7. 7. Directives A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion.
  8. 8. Directives ❖ The ng-app directive initializes an AngularJS application. It is the owner of the application. ❖ The ng-init directive initialize application data. ❖ The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. ❖ The ng-bind directive binds the innerHTML element to the application variable name. Source Code
  9. 9. Expression and ng-repeat ❖ AngularJS expressions binds data to HTML the same way as the ng-bind directive. ❖ AngularJS will "output" data exactly where the expression is written. ❖ The ng-repeat directive clones HTML elements once for each item in a collection (in an Source Code
  10. 10. Controllers ❖ Controllers are regular javascript objects that controls data. ❖ Controller is defined as ng-controller which creates constructor function. source code
  11. 11. Controllers and $scope ❖ $scope is an object that refers to the application mode. ❖ $scope sets up the initial state through properties and functions. ❖ Controller constructor function will be invoked with $scope variable as a injectable parameter. ❖ Those properties construct View Model. ❖ $scope properties will be available to the template at the point in the DOM where the controller is registered.
  12. 12. Controllers in External In larger applications, it is common to store controllers in external files. [Live Example ]
  13. 13. Service ❖ Services are substitutable objects that are wired together using dependency injection (DI). ❖ Service is - Lazily instantiated Singleton ❖ Service is a stateless object that contains useful functions. These functions can be called from anywhere; Controllers, Directive, Filters etc.
  14. 14. Service Built in Services: There are many useful built-in services in Angular - $http, $window, $location, $route. Custom Services : Generally there are 2 ways to create services - ❖ using service() ❖ using factory()
  15. 15. Injecting Dependencies in Services ❖ Angularjs provides out of the box support for dependency management. ❖ AngularJS services are the objects that can be injected in any other Angular construct (like controller, filter, directive etc). ❖ You can define a service which does certain tasks and inject it wherever you want. Source Code Example
  16. 16. Wrapping all …….. A real life example [ self explained Source Code ]