Get started with AngularJS

AngularJS concepts

Core concepts:

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

2-way data binding

directives

• 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

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

Controller

Controller is for UI logic

Injector

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.

Recipes

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
    ...
    this.launchedCount++;
  }
}

//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) {
  unicornLauncherProvider.useTinfoilShielding(true);
}]);

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.