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.

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

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

How it works?


<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <title>Angular app</title>
   <script src="bower_components/angular/angular.js"></script>
</head>
<body ng-controller="MyCtrl">
   <p>Hello {{name}}!</p>
   <input type="text" ng-model="name">  
</body>
</html>

angular
   .module('myApp', [])
   .controller('MyCtrl', function($scope){
      $scope.name = 'World';
   });

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:
      • Compile: traverse the DOM and collect all of the directives - the result is a linking function;
      • Link:  combine the directive with a scope and produce a live view.

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.

$watch, $apply & $digest

  • Angular uses some main components to implement 2 way data binding:
    • $watch;
    • $apply;
    • $digest;
    • dirty-checking;



$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;

$watch


First Name: <input type="text" ng-model="user.firstName" />
Last Name: <input type="text" ng-model="user.lastName" />
* Doing this two watchers are registered.
<ul>
  <li ng-repeat="user in userList">
    {{user.firstName}} {{user.lastName}}
  </li>
</ul>
* For 10 people in the list it will be  (2 * 10) + 1 watchers registered.

$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;

$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.

$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;

$apply


app.directive('click', function() {
return {
  scope: {
    name: '='
  },
  link: function(scope, element, attrs) {
    element.on('click', function() {
      scope.$apply(function() {
        scope.name = 'new name';
      });
    });
  }
}
});

Angular Introduction

By Alexe Bogdan

Made with Slides.com

Angular Introduction

Angular Framework: Key Features & Data Binding;

  • 1,054

More from Alexe Bogdan