View scope in angular

$ Scope is used throughout the angular app. It 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. The scope-based view immediately updates $ scope when modifying data, when the same $ scope changes, the view will be re-rendered immediately.

With $ scope, the Business Code of the application can be stored in the controller, and the data is stored in the $ scope of the controller.

$ Rootscope

When the angular application starts and generates a view, the root ng-app element is bound to $ rootscope. $ rootscope is the top-level object of all $ scope. It can be understood as a global scope object in an angular application. Therefore, it is not a good idea to add too many logic or variables to it, the global scope of contaminated Javascript is the same.

$ Scope

$ Scope Objects Act as data models in angular, that is, the model role in the MVC framework. but it is not exactly the same as the data model in the general sense. Because $ scope does not process and operate data, it just builds a bridge between views and HTML, allows friendly communication between views and controllers.

Further divide the functions and functions of the system:

1. Allows the observer to monitor changes in the data model.

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

3. Can be nested to isolate business functions and data

4. Provide context execution environment for expressions

Create a new execution context in Javascript. Actually, a new local context is created using a function. When creating a new scope for sub-DOM elements in angular, in fact, a new execution context is created for the sub-dom element.

$ Scope Lifecycle

Angular also has an 'event' concept. For example, when an input value bound with NG-model changes or a NG-click button is clicked, the angular event loop starts. the event loop is a very core concept in angular, because it is not the subject of this Article. If you are interested, you can check the materials by yourself. here, the event is processed in angular execution context, and $ scope evaluates the defined expression. at this time, the event loop is started, angular will monitor all objects in the application, and the dirty Value Check loop will also start.

$ Scope has four stages in its lifecycle:

1. Create

When a controller or command is created, angular uses $ Injector to create a new scope, and then passes the scope when the Controller or command is running.

2. Link

After angular is started, all $ scope objects will be appended or linked to the view. All functions for creating $ scope objects will also be attached to the view. these scopes will register the functions to be run when angular context changes. that is, the $ watch function. Angular uses these functions or when to start the event loop.

3. Update

Once the event loop starts running, it will start to execute its own dirty value detection. Once a change is detected, it will trigger the specified callback function on $ scope.

4. Destroy

Generally, if a $ scope is no longer needed in the view, angular cleans it by itself. Of course, you can also use the $ destroy () function to manually clean it.

View scope in angular