Scope Scope of ANGULARJS

1. Introduction

When Angularjs starts and generates a view, it is bound according to the Ng-app element and $rootscope. The $RootScope is the topmost of all $scope objects and is the object closest to the global scope in Angularjs.

$scope object is a generic JavaScript object that acts as a data model in Angularjs, but unlike a traditional data model, $scope is not responsible for processing and data manipulation, it is just a bridge between view and HTML.

All properties of the $scope can be automatically accessed by the view.

The scope is the core of the ANGULARJS application, which is associated with the application's data model and is also the context in which the expression executes. Scopes contain the functionality and data required to render a view, which is the only source of all views and can be interpreted as a view model.

$scope objects are places that define the application of business logic, controller methods, and view properties. Angularjs designs $scope as a structure similar to DOM, so $scope can be nested, meaning that we can refer to the parent $scope to refer to the properties and methods in the parent $scope.

2. Scope function

• Provides observers to monitor changes in the data model.
• You can notify the entire application of changes to the data model and set up components that are outside the system.
• can be nested to isolate business functions and data.
• Provides an execution environment that is required for an expression to perform an operation.

3. Directives that create sub-scopes

Most of the directives in Angularjs do not create child scopes, but the following directives are exceptions, and you must be aware of the related issues of scope nesting when developing, or you may be prone to error.

• Ng-include
  Creates a new child scope and inherits the parent scope.
• Ng-switch
  Creates a new child scope and inherits the parent scope.
• Ng-repeat
  Creates a child scope for each item, all of which inherit the parent scope.
• Ng-controller
  Create a new scope and inherit the parent scope

4. $scope Life cycle

There are four different stages of life cycle processing for $scope objects, namely, create, link, update, and destroy.

Create

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

links

When angular starts running, all $scope objects are attached or linked to the view. All functions that create $scope objects also attach themselves to the view. These scopes register functions that need to be run when a change occurs in the context of the angular application. These functions are referred to as $watch functions, and angular know when to start a time loop through these functions.

Update

When an event loop runs, it is usually performed on $rootscope. Each sub-scope performs its own dirty-value detection, and each monitoring function checks for changes. If any change is detected, the $scope object triggers the specified callback function.

destroyed

When a $scope is no longer needed in the view, the scope will clean up and destroy itself. (There's basically no need for you to clean up scopes, but you can still use the $destroy () method on $scope to clean up scopes).

Scope Scope of ANGULARJS