Explanation of the two-way Data Binding Mechanism in AngularJS framework [reduce the amount of development code that needs to be repeated] And angularjs framework

Explanation of the two-way Data Binding Mechanism in AngularJS framework [reduce the amount of development code that needs to be repeated] And angularjs framework

This article describes the AngularJS Framework's two-way data binding mechanism. We will share this with you for your reference. The details are as follows:

I wrote an article titled "Hello World, an example of getting started with AngularJS", introducing ng-model: Using AngularJS's two-way data binding mechanism, you do not need to write tedious code to implement the same function. Now let's look at a shocking example to see how angularJS reduces our tedious work in front-end development. The more powerful the framework is, the more interest and motivation it can stimulate learning.

Assume that we have a student information list that contains the Student name, address, and age information. Assume that the data source information is stored in the data. js file.

var g_phones = [  <span style="white-space:pre"> </span>{  "name": "wang xx",  "address": "shanghai",  "age": 20},{  "name": "li xx",  "address": "beijing & shanghai",  "age": 10},{  "name": "qian xx",  "address": "xian",  "age": 30},];

The following functions are required:

1. The student information list is displayed by default. The display sequence is the same as that of the array.
2. Provide a search box for fuzzy search. The name, address, and age of a student can be displayed as long as they have a symbolic search condition.
3. A Selection box is provided to sort student information by name or age.

As follows:

The code for using angularJS to achieve the above effect is as follows:

<! -- Both ng-app and ng-controller use angularJS framework Syntax --> 
We can see that to implement the above functions, less than 40 lines of HTML/JS Code are required, and the code is concise and clear.
If angularJS is not used, we can use JavaScript and jQuery to complete the above functions. What we need to do is as follows:
1. Bind the event handler function to the search and sort controls. When the search conditions or sorting changes, the student information list can be refreshed in real time.
2. Because sorting exists, you must write a selection or bubble sort algorithm. You need to consider string comparison and number comparison.
3. In JS, <li> is inserted into the DOM by concatenating strings. Anyone who has written such code knows that HTML String concatenation in JS is very complicated.
We can see that the traditional JS development method has a lot of repetitive and tedious work, such as binding event processing functions and complicated html String concatenation. In this example, we can see that angularJS is much more efficient than JQuery and javascript. If you haven't felt the strength and attractiveness of angularJS, let's take a look at the background of angular. The following is a preface from the translation of "developing next-generation Web applications with AngularJS.
"The origin of Angular can be traced back to the Google Feedback project in 2009. At that time, we had been suffering for several months concerning the project development speed and How to Write testable code. In six months, we developed almost 17000 lines of front-end code. At this time, Misko Hevery, a member of the team, made a bold declaration: using an open-source library developed by him in his spare time, he can rewrite all the current things within two weeks.
I thought that two weeks would not have had much impact on us. At the same time, we accepted the idea of Misko trying to build something. However, Misko finally estimated the wrong time. He spent three weeks. However, we are all deeply shocked by him. What makes us even more shocked is that the amount of code for the new application he developed has been compressed from 17000 lines to 1500 lines. It seems that Misko is worth further promotion. Misko and I decided to build a team based on the concept he advocated. This simple idea is to simplify the experience requirements for web developers ."
Through the Background introduction above, we can see that angular can greatly reduce the amount of code and improve development efficiency. At this point, if you still haven't aroused your interest and curiosity about angularJS, it is because my language organization and expression capabilities are not good, not angular.