Two-way Data Binding --- learning the basic principles of AngularJS

Two-way Data Binding --- learning the basic principles of AngularJS

Angular JS (Angular. JS) is a set of frameworks, templates, and data binding and rich UI components used to develop web pages. It supports the entire development process and provides a web application architecture without manual DOM operations. AngularJS is very small and only 60 kb. It is compatible with mainstream browsers and works well with jQuery. Two-way Data Binding may be the coolest and most practical feature of AngularJS, demonstrating the principles of MVC.

The working principle of AngularJS is that the HTML template will be parsed to the DOM by the browser, and the DOM structure will become the input of the AngularJS compiler. AngularJS will traverse the DOM template to generate corresponding NG commands. All commands are responsible for setting data binding for view (ng-model in HTML. Therefore, the NG framework starts to take effect after the DOM is loaded.

The simple usage is as follows:

In html:

In js:

// angular appvar app = angular.module("ngApp", [], function(){    console.log("ng-app : ngApp");});// angular controllerapp.controller("ngCtl", [ '$scope', function($scope){    console.log("ng-controller : ngCtl");    $scope.myLabel = "text for label";    $scope.myInput = "text for input";    $scope.btnClicked = function() {    console.log("Label is " + $scope.myLabel);    }}]);

As shown above, we first define an angular app in html and specify an angular controller, the controller corresponds to a scope (you can use the $ scope prefix to specify attributes and methods in the scope ). then, the value or operation of the HTML Tag within the scope of the ngCtl can be bound to the attributes and methods in js through $ scope.

In this way, NG's bidirectional data binding is implemented: that is, the view displayed in HTML is consistent with the data in AngularJS. If you modify one, the other end will change accordingly.

This method is really convenient to use. we only care about the HTML Tag style and its attributes and Methods bound under the angular controller scope in js. that's all. All the complicated DOM operations are omitted.

In fact, this idea is completely different from jQuery's DOM query and operations. Therefore, many people suggest using AngularJS instead of using jQuery together. of course, the two have their own advantages and disadvantages.

The app in NG is equivalent to a module. Multiple controllers can be defined in each app, and each controller has its own scope space without interfering with each other.

See the following section of html:

Unit price:
Quantity:
Total price: {quantity * price }}

You will be pleasantly surprised to find that you can complete the calculation and display the results on the interface without writing a line of JS Code.

That is, variables enclosed by {} are used in front-end html and are bound together with attributes in the controller scope of AngularJS. in fact, {} is equivalent to the ng-bind command, that is, ng-bind = "myData" can bind the myData data in NG with the corresponding front-end elements. in this way, you can easily obtain arbitrary data from NG and display it on the page in real time.

In addition, the $ scope object provides a $ apply method for updating html pages. The usage is as follows:

$scope.$apply(function(){$scope.myValue = "NewValue";});

$ Scope object, which can be understood as a scope object in the NG framework. In this scope, data and views can be bound to each other, at the same time, it can be isolated from the scope of other $ scope objects.

Of course, $ scope can also implement inheritance. This part of content will be recorded separately when it comes to other objects in the NG framework in the future.