ANGULARJS Study notes 5_scope and $rootscope

$rootScope
$rootScope is the top-level scope, which corresponds to the DOM element that contains the ng-app directive attribute.
app.run (function ($rootScope) {
$rootScope. Name = "Ari Lerner";$rootScope.test = new Date();
});

The App.run function is considered to be the main method of angular application.
You can access this name property from anywhere in the view, using the template expression {{}}, like this {{name}}
Angular The root ng-app element is bound to the $rootScope when the application starts and generates the view. $rootScope is the topmost object of all $scope and can be understood as a global scope object in a Angular application.　So it's not a good idea to attach too many logic or variables to it, and it's the same as polluting the Javascript global scope. Occasionally there is some data that you want to apply globally to the entire app, and you can inject data into $rootScope. Because all other scopes inherit the root scope, the injected data is available for ng-show such as directive, as in the local $scope. Of course, $rootScope must be used with great care. In particular, do not use it for code, but just to inject data. If you really want to write a function in $rootScope, it's best to write it into the service so it's only injected when it's used, and it's easier to test. Instead,

If a function simply stores and returns some data, do not create it as a service.

app.Controller (' Myctrl ', function ($scope, $rootScope) {
$scope. Change = function () {
$scope. Test = new Date ();
};
$scope. Getorig = function () {
return $rootScope. Test;
};
})
app.Controller (' MyCtrl2 ', function ($scope, $rootScope) {
$scope. Change = function () {
$scope. Test = new Date ();
};
$scope. Changers = function () {
$rootScope. Test = new Date ();
};
$scope. Getorig = function () {
return $rootScope. Test;
};
});//Controller sharing data, preferably with service

Features of scope

• Scope provides the $watch method to monitor the model changes.
• Scope provides the $apply method for propagating model changes.
• Scope can be inherited to isolate different application components and attribute access rights.
• Scope provides context for the calculation of expressions.

The role of $scope
$scope Object acts as a data model in Angular, which is the model role in the general MVC framework. But not exactly the same as in the usual sense of the data model, because $scope does not process and manipulate the data, it simply establishes a bridge between the view and the HTML, allowing friendly communication between the view and the Controller. its function and function:
Provides the ability for observers to listen to changes in the data model
You can notify the entire App of changes to the data model
can be nested to isolate business functions and data
Provides context execution environment for an expression

Scope should be read-only in the templates template, and it should be write-only in the controller. The purpose of Scope is to refer to model, not to be model. Model is the JavaScript object we define. $scope is actually a JavaScript object that both controller and view can access and can use to pass information between them. In this $scope object, we store both the data and the functions that will run on the view.    Scopes form a certain hierarchical relationship in AngularJS, the tree structure must have a root node. Usually we don't have it, because almost every view has a controller and a corresponding scope of its own.

To perform the context:

Creating a new execution context in Javascript is actually creating a new local context with a function that, in Angular, creates a new execution context for the child DOM element when a new scope is created for the child DOM element.

$scope life cycle

Event Loop: The concept of Angular ' events ', when a Ng-model input value changes, or a Ng-click button is clicked, the event loop of Angular is started.
The event is processed in the context of the Angular execution, and $scope evaluates the defined expression. When the event loop is started, Angular monitors all objects within the application, and the dirty value check loop starts.
4 stages:
1. Create
when a controller or instruction is created, Angular creates a new scope using the $injector and then passes the scope in when the controller or instruction runs.
2. Links
when Angular is started, all $scope objects are attached or linked to the view, and all functions that create $scope objects are appended to the view. These scopes will be registered,
functions that need to be run when the Angular context changes. That is $watch function, Angular through these functions or when the event loop is started.
3. Update
Once the event loop starts running, it starts to perform its own dirty value detection. Once a change is detected, the specified callback function on the $scope is triggered
4. Destruction
generally speaking, if a $scope is no longer needed in the view, Angular cleans it itself. Of course, you can also clean it manually by $destroy () function.

Create a $scope object

To assign a controller object to a DOM element, use the Ng-controller Directive property:
<div ng-controller= "Mycontroller" >
{{Person.name}}
</div>
App.controller (' Mycontroller ', function ($scope) {
$scope. person = {
Name: "Ari Lerner"
};
});
Ng-controller= ' Mycontroller ' property to access this person object in any child element of the DOM element

Prototype Inheritance:

All scopes follow the prototype inheritance (Prototypal inheritance), which means that they all have access to the parent scope. For any property and method, if the ANGULARJS is not found on the current scope, it will go to the parent scope to find, if not found on the parent scope, will continue to backtrack upward, until $rootscope.
The only exception: some directive attributes can optionally create an independent scope, so that the scope does not inherit its parent scope.

ANGULARJS Study notes 5_scope and $rootscope