AngularJS Internals

– A look behind all the magic

by Carl Vuorinen / @cvuorinen

Carl Vuorinen

HTML enhanced for web apps!

Scope

$scope == POJO

Plain Old Javascript Object

$watch & $digest

 red border 

$scope.$watch = function(watchFunc, listenerFunc) {
    this.$$watchers.push({
        watchFunc: watchFunc,
        listenerFunc: listenerFunc
    });
};

$scope.$digest = function() {
    var dirty = true;
    var scope = this;
    
    while (dirty) {
        dirty = false; // reset from last iteration
        
        scope.$$watchers.map(function (watcher) {
            // execute watch function to get new value
            newValue = watcher.watchFunc(scope);
            
            // check if value has changed from last cycle
            if (newValue !== watcher.lastValue) {
                dirty = true;
                
                // execute listener and store new last value
                watcher.listenerFunc(newValue, watcher.lastValue, scope);
                watcher.lastValue = newValue;
            }
        });
    }
};

Scope Inheritance

Javascript prototypical inheritance

Scope Hierarchy

$scope.$new = function() {
    var ChildScope = function() {};
    ChildScope.prototype = this;

    return new ChildScope();
};

Controller As Syntax

angular.module('app')
.controller("SomeController", function() {
    this.value = "Hello!";
});

<div ng-controller="SomeController as some">
    {{ some.value }}
</div>

Controller As Syntax

angular.module('app')
.controller("SomeController", function() {
    var vm = this;
    vm.value = "Hello!";
    vm.sayHello = function() {
        alert(vm.value);
    }
});

<div ng-controller="SomeController as vm">
    <input type="text" ng-model="vm.value">
    <button ng-click="vm.sayHello()">Click here</button>
</div>

Expressions

<div ng-init="jsFrameworks = npm.search({tags: ['framework']})">
  <div ng-if="(lastWeekCount = (jsFrameworks | since:lastWeek).length) > 10">
    <h3>Holy smokes, Batman!</h3>
    <p>New JS frameworks since last week: {{ lastWeekCount }}
      <small>
        +{{ (lastWeekCount / jsFrameworks.length * 100) | number:1 }}%
      </small>
    </p>
    <p>Time to <button ng-click="startOver()">Clear the Decks!</button></p>
  </div>
</div>

$parse

is kinda like

$parse = function(expr) {
    return function(scope) {
        with (scope) {
            return eval(expr);
        }
    }
}

... except it's really not

DIY Spreadsheet using $parse

{{ interpolation }}

Directives

Compiling & Linking

<div ng-init="arr=['Foo','Bar']">
    <div ng-repeat="item in arr">
        <button ng-click="submit(item)">
                {{ item }}
        </button>
    </div>
</div>

Transclusion

<div>
    <my-directive>
        <p>Some Content</p>
    </my-directive>
</div>

angular.module('app')
.directive('myDirective', function() {
  return {
    transclude: true,
    template: '<div>' +
      '<h4>Title</h4>' +
      '<div ng-transclude></div>' +
      '</div>'
  };
});

angular.module('ng')
.directive('ngInit', function($parse) {
  return {
    link: function (scope, element, attrs) {
      $parse(attrs.ngInit)(scope);
    }
  };
});

angular.module('ng')
.directive('ngClick', function($parse) {
  return {
    link: function (scope, element, attrs) {
      var expression = $parse(attrs.ngClick);
      element.on('click', function() {
        scope.$apply(function () {
          expression(scope);
        });
      });
    }
  };
});

angular.module('ng')
.directive('ngRepeat', function($parse, $transclude) {
  return {
    transclude: 'element',
    link: function (scope, element, attrs) {
      var match = attrs.ngRepeat.match(/^\s*([\s\S]+?)  ...  \s*$/);
      
      $scope.$watch($parse(match.target), function (collection) {
        // locate existing items, mark items not present for removal
        
        // remove leftover items
        
        // update existing items' scopes
        
        // create new elements with $transclude
        // and keep a reference to their scopes
      });
    }
  };
});

angular.module('ng')
.directive('ngModel', function() {
  return {
    link: function (scope, element, attrs) {
      var currentValue;
      element.on('keyup', function() {
        if ($(element).val() != currentValue) {
          scope.$apply(function () {
            scope[attrs.ngModel] = currentValue = $(element).val();
          });
        }
      });
      
      $scope.$watch(attrs.ngModel, function (newValue) {
        currentValue = newValue;
        $(element).val(newValue);
      });
    }
  };
});

Performance

The amount of data on a Scope does not affect performance.

The number of $watches and the frequency of $digest cycles can slow things down.

30 rows x 50 cols = 1500 cells

Don't call functions that do resource extensive or time consuming computations from watched expressions!

<!-- BAD -->
<label>The Ultimate Question</label>
<input ng-model="question">
Answer: {{ deepThought.compute(question) }}

<!-- LITTLE BETTER -->
<label>The Ultimate Question</label>
<input ng-model="question"
       ng-change="answer = deepThought.compute(question)">
Answer: {{ answer }}

<!-- GOOD -->
<label>The Ultimate Question</label>
<input ng-model="question"
       ng-change="answer = deepThought.compute(question)"
       ng-model-options="{ debounce: 1000 }">
Answer: {{ answer }}

OK, let's look at the original example again

Know Your AngularJS Inside Out

Questions?

THE END

• Shaping up with Angular.js Code School
• New to AngularJS? Start learning here @eggheadio
• AngularJS-Learning a big list of links
• Angular Style Guide by John Papa
• Building a Spreadsheet in 20 Minutes with Angular.js by David Graunke
• Angular 2 Quickstart
• Reactive Game of Life by me