In-depth analysis of $scope function and life cycle in ANGULARJS framework _angularjs

The use of $scope throughout the angular app, which is associated with the data model and is also the context of expression execution. With $scope, a channel is established between the view and the controller, and the $scope is updated immediately based on the scope view when the data is modified, the same $scope The view is also rendered immediately when the change occurs.

With $scope such a bridge, the application of the business code can be in the controller, and the data are stored in the controller $scope.

$scope is an object that links view (a DOM element) to a controller. In our MVC structure, this $scope becomes model, which provides a excecution context bound to the DOM element (and its child elements).

Although it sounds a bit complicated, $scope is actually a JavaScript object that controller and view can access, so we can use it to pass information between the two. In this $scope object, we store both the data and the functions that will run on the view.

Each angular application will have a $rootScope. This $rootScope is the top-level scope, which corresponds to the DOM element that contains the Ng-app instruction attribute.

If the page is not explicitly set $scope, angular will bind the data and functions are here, the first part of the example is to run successfully.

In this example, we will use $rootScope. In the Main.js file, we add a name attribute to this scope. By putting this function into the App.run function, we guarantee that it can be executed before other parts of the application. You can think of the App.run function as the main method of angular application.

App.run (function ($rootScope) {
 $rootScope. Name = "Ari Lerner";
});

Now, we can access this name property from anywhere in view, using the template expression {{}}, like this:

{{Name}}

$rootScope
angular The root ng-app element is bound to $rootScope when a view is started and generated by the application. $rootScope is the topmost object of all $scope and can be understood as a global scope object in a angular application. So attaching too many logic or variables to it is not a good idea, and polluting Javascript is the same as the global scope.

the role of $scope
$scope Object acts as a data model in angular, which is the model role in the general MVC framework. But it is not exactly the same as the usual data model, because $scope does not handle and manipulate data, it just creates a bridge between view and HTML, allowing the visual There is a friendly communication between diagram and Controller.

Further the system divides its function and function further:

• Provides an observer who can monitor changes in the data model
• can notify the entire App of changes to the data model
• Can be nested, isolating business functions and data
• To provide context execution environment for an expression

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

$scope life cycle
Angular also has an ' event ' concept, such as when a Ng-model input value changes, or when a Ng-click button is clicked, the angular event loop starts. The event loop is very Very core of a concept, because it is not the gist of this article so not to say, interested can look at the information themselves. Here the event is processed in the angular execution context, and $scope is evaluated for the defined expression. At this point the event loop is started and angular monitors all objects within the application. The dirty value check loop is also started.

The $scope lifecycle has 4 phases:

1. Create

When a controller or instruction is created, angular creates a new scope using $injector, and then passes the scope in when the controller or instruction runs.

2. Link

When angular is started, all $scope objects are attached or linked to views, and all functions that create $scope objects are appended to the view. These scopes will register functions that need to be run when the angular context changes. That is, $watch function, Angular through these functions or when the event loop starts.

3. Update

Once the event loop starts running, it begins to perform its own dirty detection. Once a change is detected, the callback function specified on the $scope is triggered

4. Destruction

Usually, if a $scope is no longer needed in the view, angular cleans it itself. Of course, it can also be cleaned manually by the $destroy () function.

Ng-controller

To explicitly create a $scope object, we're going to install a controller object for the DOM element, using the Ng-controller Directive attribute:

<div ng-controller= "Mycontroller" >
 {{person.name}}
</div>

The Ng-controller directive creates a new $scope object for the DOM element in which it resides and includes the $scope object in the $scope object of the outer DOM element. In the above example, the $scope object of this outer DOM element is the $rootscope object. The scope chain is like this:

Now, Mycontroller gives us a $scope object that can be accessed directly from within the DOM element. Below we create a person object in the $scope, in Main.js:

App.controller (' Mycontroller ', function ($scope) {
 $scope. person = {
  name: ' Ari Lerner '
 };

Now we can access the person object in any child element of the DOM element that has the ng-controller= ' Mycontroller ' attribute, because it is on the $scope.
Except for one exception, all scopes follow prototype inheritance (Prototypal inheritance), which means that they all have access to the parent scope. For any property and method, if Angularjs is not found on the current scope, it will go to the parent scope, and if it is not found on the parent scope, it will continue to backtrack up to the $rootscope.

The only exception: some directive attributes can selectively create a separate scope so that scope does not inherit its parent scope.

For example, suppose we have a parentcontroller that contains a person object and another Childcontroller wants to access the object:

App.controller (' Parentcontroller ', function ($scope) {
 $scope. person = {Greeted:false};
});
 
App.controller (' Childcontroller ', function ($scope) {
 $scope. SayHello = function () {
  $scope. person.greeted = true;
 }
});

When we bind the Childcontroller to the Parentcontroller in the view, we can access the attributes of the parent scope created by Parentcontroller in the child element, like accessing Childcontroller The same attributes in its own scope:

<div ng-controller= "Parentcontroller" >
 <div ng-controller= "Childcontroller" >
  <input Type = "text" ng-model= "Person.name" placeholder= "name" ></input>
  <a ng-click= "SayHello ()" >say Hello </a>
 </div>
 {person}}
</div>