AngularJS concepts


Core concepts:

  • 2-way data binding
  • directive
  • expression & filter
  • view / template
  • controller

2-way data binding



  • manipulate DOM: DOM manipulation should only happen in directive implementations
  • manipulate data Elements: <ng-xx> </ng-xx>

Attributes: <span ng-xx="exp"></span>

Comments: <!– directive: ng-xx exp –>

Classes: <span class="ng-xx: exp”></span>


Scope is a glue between controller, template and model. It keeps models and views separate, but in sync.


Controller is for UI logic


The injector uses recipes to create two types of objects, services and specialized objects.

  • Services are objects whose API is defined by the developer writing the service.
  • Specialized objects conform to a specific Angular framework API. These objects extend the framework as plugins and therefore must implement interfaces specified by Angular. These interfaces are Controller, Directive, Filter and Animation.


There are five recipe types that define how to create objects: Value, Constant, Factory, Service and Provider.

Value, Constant, Factory and Service are the synaptic sugar of Provider.

  • Value recipe
myApp.value('clientId', 'a12345654321x');


  • Constant recipe
myApp.constant('planetName', 'Greasy Giant');
  • Factory recipe
myApp.factory('clientId', function clientIdFactory() {
  return 'a12345654321x';
  • Service recipe
function UnicornLauncher(apiToken) {

  this.launchedCount = 0;
  this.launch = function() {
    // Make a request to the remote API and include the apiToken

//myApp.factory('unicornLauncher', ["apiToken", function(apiToken) {
//  return new UnicornLauncher(apiToken);

myApp.service('unicornLauncher', ["apiToken", UnicornLauncher]);
  • provider recipe
myApp.provider('unicornLauncher', function UnicornLauncherProvider() {
  var useTinfoilShielding = false;

  this.useTinfoilShielding = function(value) {
    useTinfoilShielding = !!value;

  this.$get = ["apiToken", function unicornLauncherFactory(apiToken) {

    // let's assume that the UnicornLauncher constructor was also changed to
    // accept and use the useTinfoilShielding argument
    return new UnicornLauncher(apiToken, useTinfoilShielding);

myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {

Specialized object

The instructions for the injector to create these special objects (with the exception of the Controller objects) use the Factory recipe behind the scenes.

Since the directives are registered via the Factory recipe, we can use the same syntax as with factories.

myApp.directive('myPlanet', ['planetName', function myPlanetDirectiveFactory(planetName) {
  // directive definition object
  return {
    restrict: 'E',
    scope: {},
    link: function($scope, $element) { $element.text('Planet: ' + planetName); }

Using Factory recipes, you can also define Angular’s filters and animations, but the controllers are a bit special.

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
  this.clientId = clientId;

Unlike services, controllers are not singletons.