Angularjs Features

Dependency Injection

• Design pattern that deals with how components get a hold of dependencies. 

• " The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested."

var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope','Logger',function($scope, Logger) {
  $scope.hello = "Hello";
  $scope.world = "World";
  $scope.alert = function(arg){
  	alert(arg);
  }
  
  Logger.log($scope.hello);
}]);

eg. $scope and Logger are dependencies

Module

• Containers for different parts of your application
• They are reusable
• Can be loaded in any order
• Unit tests can load relevant modules, which keeps them fast.
• Should create for each feature
• Should create for reusable component eg. Directives, Filters

Data Binding

• Automatic synchronization of data between model and view.
• The view will always projects the current state of the data

View Model

$Scope

• Represents the model part of your data.
• Can be used by controllers to attach business logic

var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope','Logger',function($scope, Logger) {
  $scope.hello = "Hello";
  $scope.world = "World";
  $scope.alert = function(arg){
  	alert(arg);
  }
  
  Logger.log($scope.hello);
}]);

<div ng-app='myApp'>
  <div ng-controller="MyController">
    <!-- Scope Data -->
    <div>{{hello}} {{world}}</div>

    <!-- Scope Function -->
    <button ng-click='alert("Clicked")'>Click Me!</button>
  </div>
</div>

Controllers

• Set up the initial state of the $scope object.
• Add behavior to the $scope object.

var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope','Logger',function($scope, Logger) {
  $scope.hello = "Hello";
  $scope.world = "World";
  $scope.alert = function(arg){
  	alert(arg);
  }
  
  Logger.log($scope.hello);
}]);


<div ng-app='myApp'>
  <!-- CONTROLLER -->  
  <div ng-controller="MyController">
  </div>
</div>

Services

• Only instantiated when a component depends on it. 
• Are modules used for sharing data between different controllers.
• Encapsulates all the business logic

​​

var myApp = angular.module('myApp', []);
myApp.factory('Logger', ['$log',function($log) {
  return {
    log: log
  };

  function log(data) {
    $log.info(data);
  }
}]);

// Service "Logger" Injected In Controller
myApp.controller('MyController', ['$scope','Logger',function($scope, Logger) {
  Logger.log($scope.hello);
}]);

Directives

• Used for manipulating DOM. Like jQuery. 
• Can be implemented as an 

1. Element
2. Attribute
3. Class

eg. ng-show, ng-hide, ng-class, ng-click

var myApp = angular.module('myApp', [])
myApp.directive("helloWorld", [function() {
  return {
    restrict: 'EA',
    template: "<h1>Hello World</h1>"
  };
}]);

<div ng-app='myApp'>
    <hello-world></hello-world>
</div>

Filter

• Formats data for display to the user
• Can be used in:
  • View templates
  • Controllers
  • Services

var myApp = angular.module('myApp', [])
myApp.filter('postfix', ['Logger', function(Logger) {
  return function(input, post) {
    Logger.log(post);

    if (!post) {
      return input;
    }

    return input += post;
  }
}]);

//View Template
<div ng-app='myApp'>
  <div ng-controller="MyController">
    <!-- Filter -->
    <div>{{ hello | postfix:'--FILTER'}}</div>
  </div>
</div>


// Inside Controller
myApp.controller('MyController', ['$scope', 'postfixFilter', '$filter', function($scope, postfixFilter, $filter) {
  $scope.hello = "Hello";
  $scope.world = "World";
  $scope.alert = function(arg) {
    alert(arg);
  }

  // Options 1: Note: Have to append "Filter" to the filter name:
  var psFx1 = postfixFilter($scope.hello,'--FILTER');

  // Option 2: Use $filter
  var psFx2 = $filter('postfix')($scope.hello,'--FILTER');
}]);