Details about the scope and data binding in the JavaScript AngularJS framework

This article mainly introduces the scope and data binding in the JavaScript AngularJS framework, including scope inheritance and one-way and two-way data binding. For more information, see Introduction to AngularJS.
AngularJS is an open-source front-end MVC script framework initiated by Google. It is suitable for both common WEB applications and SPA (single page applications, all user operations are completed on one page ). Unlike the positioning of Dojo in the same MVC Framework, AngularJS is more lightweight in functionality. Compared with jQuery, AngularJS saves you a lot of mechanical binding work. AngularJS is a good choice for non-enterprise WEB applications that require high development speed and no rich functional modules. AngularJS's data binding mechanism is the most complex and powerful part. This mechanism helps us to focus more on Data Model Establishment and transmission, instead of performing low-level operations on the underlying DOM.

AngularJS Scope
In jQuery-based traditional WEB applications, to listen to user input and other behaviors, you need to set a listening method for each DOM element, that is, to listen to various events on the DOM, then jQuery responds and displays it on the page. This method is simple and intuitive, but once WEB applications become large and complex, the listening code is very mechanical and redundant. what's even more terrible is that if the DOM event listening is not well managed, it is easy to expose browser resources.
AngularJS uses a series of commands to replace jQuery's event binding code. In order to organize the coordination between various commands without data confusion, AngularJS extended the concept of scope on the model layer to work with controllers to display the visual layers.
Scope)
In AngularJS, the scope is an object pointing to the application model. It is the execution environment of expressions. The scope has a hierarchical structure, which is almost the same as the corresponding DOM. The scope can monitor expressions and pass events.
In HTML code, once an ng-app instruction is defined, a scope is generated. The scope generated by ng-app is special, it is a root Scope ($ rootScope), which is the top layer of all other $ scopes.
Listing 1. Generating the root Scope