Page Comparison

...

• Scopes objects that contain functionality and data to use when rendering the view. It is the single source of truth for all views. You can think of scopes as view models.
• Basic Functions
  • They provide observers to watch for model changes
  • They provide the ability to propagate model changes through the application as well as outside
    the system to other components
  • They can be nested such that they can isolate functionality and model properties.
  • They provide an execution environment in which expressions are evaluated.
• All properties found on the $scope object are automatically accessible to the view.

Scope Inheritance

• $scopes in AngularJS are arranged in a hierarchical structure that mimics the DOM and thus are nestable and we can reference properties on parent $scopes.

• Every part of an AngularJS application has a parent scope (at the ng-app level, this is called the $rootScope). All scopes are created with prototypal inheritance, meaning that they have access to their parent scopes.

• By default, for any property that AngularJS cannot find on a local scope, AngularJS will crawl up to the containing (parent) scope (and so on and so forth until it reaches the $rootScope) and look for the property or method there.

In this example, we can then reference data on the ParentController's containing $scope on the child scope.

...

  var app = angular.module('myApp', []);

  app.controller('ParentController', function($scope) {
    $scope.person = { greeted: false };
  })

  app.controller('ChildController', function($scope) {
    $scope.sayHello = function() {
      $scope.person.name = "Chuck Norris";
      $scope.person.greeted = true;
    }
  })

• Expressions

  • Expressions are similar to like the result of an eval(javascript) (roughly). They are processed by Angular and, therefore, have these important, distinct properties:
    • All expressions are executed in the context of the scope and have access to local $scope variables.
    • They do not throw errors if an expression results in a TypeError or a ReferenceError.
    • They do not allow for any control flow functions (conditionals; e.g., if/else).
    • They can accept a filter and/or filter chains

• Controllers

  • The controller in AngularJS is a function that adds additional functionality to the scope of the view. They are used to set up an initial state and to add custom behavior to the scope object.
  • To create custom actions we can call in our views, we can just create functions on the scope of the controller.

Services

...

Controllers

• The controller in AngularJS is a function that adds additional functionality to the scope of the view. They are used to set up an initial state and to add custom behavior to the scope object.
• When a new controller is created on a page, it is passed a new $scope generated by Angular.
• To create custom actions we can call in our views, we can just create functions on the scope of the controller.

var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', function($scope) {
  $scope.counter = 0;
  $scope.add = function(amount) {
    $scope.counter += amount;
  };

  $scope.subtract = function(amount) {
    $scope.counter -= amount;
  };
}]);

One major difference between other JavaScript frameworks and AngularJS is that the controller is not the appropriate place to do any DOM manipulation or formatting, data manipulation, or state maintenance beyond holding the model data. It is simply the glue between the view and the $scope model.

Services

• Services provide a method for us to keep data around for the lifetime of the app and communicate across controllers in a consistent manner.
• Services are singletons objects that are instantiated only once per app (by the $injector) and lazy-loaded (only created when necessary). They provide an interface to keep together methods that relate to a specific function.

The most common and flexible way to create a service uses the angular.module API factory:

// Example service that holds on to the current_user for the lifetime of the app
angular.module('myApp.services', [])
  .factory('UserService', ['$http', function($http) {

    var current_user;

    return {
      getCurrentUser: function() {
        return current_user;
      },
      setUsername: function(user) {
        current_user; = user;
      }
    }

  }]);

Views

• The View is the HTML after it has been through the AngularJS compilation cycle
• 2 Step Process
  • Compile Phase: AngularJS goes through the DOM and makes a note of all the directives by collecting all the link functions associated with each directive
  • Link Phase: AngularJS injects the appropriate scope into each directive's link function setting up two-way data binding completing the link between scope and DOM.

Expressions

• {{ }} notation in the view
• Expressions are similar to like the result of an eval(javascript) (roughly). They are processed by Angular and, therefore, have these important, distinct properties:
  • All expressions are executed in the context of the scope and have access to local $scope variables.
  • They do not throw errors if an expression results in a TypeError or a ReferenceError.
  • They do not allow for any control flow functions (conditionals; e.g., if/else).
  • They can accept a filter and/or filter chains
• To manually parse an expression, we can inject the $parse service into a controller and call the service to do the parsing (use $interpolate to parse a string with multiple expressions)

Filters

Angular Filters are typically used to format expressions in bindings in your template. They transform the input data to a new formatted data type. Filters are invoked in the HTML with the | (pipe) character in the template binding.

Built-in filter examples:

<div>{{ name | uppercase }}</div>
<div>{{ 123.456789 | number:2 }}</div>
<div>{{ 123 | currency }}</div>

<div>{{ today | date:'medium' }}</div>
<div>{{ today | date:'short' }}</div>
<div>{{ today | date:'fullDate' }}</div>
<div>{{ today | date:'longDate' }}</div>
<div>{{ today | date:'mediumDate' }}</div>
<div>{{ today | date:'shortDate' }}</div>
<div>{{ today | date:'mediumTime' }}</div>
<div>{{ today | date:'shortTime' }}</div>
<div>Month in year: {{ today | date:'MMMM' }}</div>
<div>Short month in year: {{ today | date:'MMM' }}</div>
<div>Padded month in year: {{ today | date:'MM' }}</div>
<div>Month in year: {{ today | date:'M' }}</div>

<div>{{ ['Ari', 'Lerner', 'Likes', 'To', 'Eat', 'Pizza'] | filter:'e' }}</div>

<div>
  {{ [{
      'name': 'Ari',
      'City': 'San Francisco',
      'favorite food': 'Pizza'
      }, {
      'name': 'Nate',
      setUsername'City': function(user) {'San Francisco',
        current_user; = user;'favorite food': 'indian food'
      }] | filter:{'favorite food': 'Pizza'} }}

  }]);

Filters

...

</div>

Implementing a Custom Filter to Reverse an Input String:

...