ng-book2: Modules, Scopes, Controllers
Modules
The Angular module API allows us to declare a module using the angular.module() API method. When declaring a module, we need to pass two parameters to the method. The first is the name of the module we are creating. The second is the list of dependencies, otherwise known as injectables:
angular.module('myApp', [])
Scopes
Scopes are a core fundamental of any Angular app. They are used all over the framework.
The scopes of the application refer to the application model. Scopes are the execution context for expressions. The $scope object is where we define the business functinality of the application, the methods in our controllers, and properties in the views.
Scopes serve as the glue between the controller and the view. Just before our app renders the view to the user, the view template links to the scope, and the app sets up the DOM to notify Angular for property changes.
Scopes are the source of truth for the application state. Because of this live binding, we can rely on the $scope to update immediately when the view modifies it, and we can rely on the view to update when the $scope changes.
$scopes in AngularJS are arranged in a hierachical structure that mimics the DOM and thus are nestable: We can reference properties on parent $scope.
Scopes provide the ability to watch for model changes. They give the developer the ability to propagate model changes throughout the application by using the apply mechanism available on the scope.
The $scope view of the World
When Angular starts to run and generate the view, it will create a binding from the root ng0app element to the $rootScope. This $rootScope is the eventual parent of all $scope objects.
This $scope object is the data model in Angular.
All properties found on the $scope object are automatically accessible to the view.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ name }}!</h1>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope) {
$scope.name = "world";
});
</script>
</body>
</html>
Through Angular, we can use different types of markup in a template. These types include the following:
1. Directives: the attributes or elements that argument the existing DOM element into a reusable DOM component.
2. Value bindings: the template syntax{{}} binds expressions to the view.
3. Filters: formatting functions that are available in the view.
4. Form controls: user input validation controls.
What Can Scopes Do?
1. They provide observers to watch for model changes.
2. They provide the ability to propagate model changes through the application as well as outside the system to other components.
3. They can be nested such that they can isolate functionality and model properties.
4. They provide an execution environment in which expressions are evaluated.
Scopes are objects that contain functionality and data to use when rendering the view. It is the single source of truth for all views.
$scope Lifecycle
After the scope expression is evaluated and the $digest loop runs, the $scope's watch expressions will run dirty checking.
Creation: When we create a controller or directive, Angular creates a new scope with the $injector and passes this new scope for the controller or directive at runtime.
Linking: When the $scope is linked to the view, all directives that create $scopes will register their watches on the parent scope. These watches watch for and propagate model changes from the view to the directive.
Updating: During the $digest cycle, which executes on the $rootScope, all of the children scopes will perform dirty digest checking. All of the watching expressions are checked for any changes, and the scope calls the listener callback when they are changed.
Destruction: When a $scope is no longer needed, the child scope creator will need to call scope.$destroy() to clean up the child scope.
Controllers
When we create a new controller on a page, Angular passes it a new $scope.
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function($scope) {
$scope.name = "world";
});
Using controllers allows us to contain the logic of a single view in a single container.
Controller Hierarchy(Scopes Within Scopes)
With the exception of isolate scopes, all scopes are created with prototypal inheritance, meaning that they have access to their parent scopes.