Page Comparison

...

• Modules

  • Advantages:
    • Keeps our global namespace clean
    • Eases writing tests as well as keeps them clean as easy to target isolated functionality
    • Eases to share code between applications
    • Allows different parts of the code to be loaded in any order

• Scopes

  • 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.

Scope Inheritance

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.

<div ng-controller="ParentController">
  <div ng-controller="ChildController">
    <a href="#" ng-click="sayHello()">Say hello</a>
  </div>
  {{ person }}
</div>

  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.

...