AngularJS in-depth understanding $scope

$scope is used throughout the AngularJS 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 view updates the data as soon as it is modified $scope, the same $ The view is also immediately re-rendered when scope changes.

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

$rootScope

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

The role of $scope

$scope object acts as a data model in AngularJS, which is the model role in the general MVC framework. But not exactly like the usual data model, because $scope doesn't process and manipulate the data, it just establishes a bridge between the view and the HTML, so that the view and the C Ontroller can communicate with each other in a friendly.

Further systematic division of its functions and functions:

1. Provides the ability for observers to listen to changes in the data model

2. You can notify the entire App of changes to the data model

3. Can be nested, isolate business functions and data

4. Providing a context execution environment for an expression

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

$scope life cycle

There is also an ' event ' concept in AngularJS, such as when a Ng-model input value changes, or a Ng-click button is clicked, the event loop of AngularJS is started. The event loop is AngularJS Central Often very core of a concept, because not the purpose of this article so do not say, interested can see their own information. Here the event is processed in the AngularJS execution context, $scope evaluates the defined expression. The event loop is started, AngularJS All objects within the application are monitored, and the dirty value check loop is started.

There are 4 stages in the life cycle of a $scope:

1. Create

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

2. Links

When AngularJS 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 register functions that need to be run when the AngularJS context changes. That is, $watch function, Angularjs through these functions or when to start the event loop.

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, AngularJS cleans it itself. Of course, you can also clean it manually by $destroy () function.

AngularJS in-depth understanding $scope