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.

AngularJS - introduction & how it works?


Published on

Angular Framework: Key Features & Data Binding.
Full presentation here:

Published in: Internet
  • Be the first to comment

AngularJS - introduction & how it works?

  1. 1. What is Angular? client-side MVC framework for dynamic web apps; perfect for building CRUD application: data-binding, templating, form validation, routing, dependency injection, reusable components; designed to be testable: unit-testing, end-to-end testing, mocks.
  2. 2. Why Angular? 1. The best Model-View-Controller Architecture 2. It works hand-in-hand with HTML 3. Power over your application 4. Testing is Easy 5. Team development it's easy
  3. 3. Key features Declarative HTML approach 2 way data binding reusable components - directives MVC / MVVM design pattern dependency injection routing templating animations form validation E2E integration testing / unit testing I18n & I10n
  4. 4. How it works? <!DOCTYPE html> <html ng-app="myApp"> <head> <title>Angular app</title> <script src="bower_components/angular/angular.js"> {{name}} angular .module('myApp', []) .controller('MyCtrl', function($scope){ $ = 'World'; }); Plunker Example
  5. 5. How it works? Browser loads the page and creates the DOM; Browser triggers DOMContentLoaded event; Angular looks into the DOM for the ng-app attribute and if the attribute it's found Angular will: load the module associated with the directive; create the application injector; compile the DOM into a Live View: : traverse the DOM and collect all of the directives - the result is a linking function; : combine the directive with a scope and produce a live view.
  6. 6. Data Binding automatic propagation of data changes; model it's the single-source-of-truth; digest cycle; the view it's updated automatically when the model is changed; model is updated automatically when a value in the View has changed. no DOM manipulation needed.
  7. 7. $watch, $apply & $digest Angular uses some main components to implement 2 way data binding: $watch; $apply; $digest; dirty-checking; Implement your own data binding mechanism
  8. 8. $watch Angular extends the browser events-loop and creates the angular-context; Every time something is bound in the html a watcher is inserted in a watch list; a watcher consist of: a watch function that returns the current value of the property it is watching; a listener function that will be triggered if a change happened. the last value returned by the watch function;
  9. 9. $watch * Doing this two watchers are registered. * For 10 people in the list it will be (2 * 10) + 1 watchers registered. First Name: <input type="text" ng-model="user.firstName" /> Last Name: <input type="text" ng-model="user.lastName" /> <ul> <li ng-repeat="user in userList"> {{user.firstName}} {{user.lastName}} </li> </ul>
  10. 10. $digest loop Angular knows about browser events-loop; when the browser receives an event that can be handled by angular-context the $digest loop will be fired; the $digest loop is made from two smaller loops: $evalAsync queue; $watch list;
  11. 11. $digest loop The $digest will loop trough the watchers list: It will check the current value returned by the watch function; It will compare the current value with the last value; if the equality test fails, it will: call the listener function associated with that watcher; it will set the current value as last value; it will set the $scope as dirty; If the $scope is dirty, another $digest loop is triggered.
  12. 12. $apply Angular calls $apply under the hood when we use framework directives like: ngClick, ngModel, ngChange etc. The $apply function executes expressions in angular context and then calls the $digest; Where to use $apply? in most of the cases in directives where you handle events manually; when you use 3rd party code that will change the $scope;
  13. 13. $apply app.directive('click', function() { return { scope: { name: '=' }, link: function(scope, element, attrs) { element.on('click', function() { scope.$apply(function() { = 'new name'; }); }); } } }); Plunker Example