(eight) Simple understanding of the two-way data binding mechanism of NB in the ANGULARJS framework, greatly reducing the amount of development code that needs to be duplicated

Before writing the first Angularjs introductory article, the introduction of Ng-model said: Using the Angularjs two-way data binding mechanism, do not need us to write cumbersome code to achieve the same functionality. Now let's look at a more shocking example of how ANGULARJS reduces our tedious work in front-end development. The more you feel the powerful frame function, the more you can stimulate the interest and motivation of learning.

If we have a student information list that contains the student's name, address, and age information. If this data source information is saved 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 features are now required:

1, the Student Information list, the default all display, the display order is consistent with the array order.

2, provide a search box, can be fuzzy search. As long as a student's name, address, and age have a symbol search condition, they can be displayed.

3. Provide a selection box to sort student information by name or age.

As follows:

The code to achieve the above effects using ANGULARJS is as follows:

<!--Ng-app and Ng-controller are ANGULARJS framework syntax-->

As you can see, all of the HTML/JS code required to achieve the above functions is added up to less than 40 lines, and the code is very concise and clear.

If we do not use ANGULARJS, we use JavaScript and jquery to do the above functions, we have to do the following things:
1. For the search and sort 2 controls, bind the event handler. The Student information list can be refreshed in real time when the search criteria or sorting changes.
2, because there is a sort, you have to write a sorting algorithm, such as sorting or bubbling, you need to consider the string comparison and the number comparison of the 2 cases.
3. In JS, insert <li> into the DOM by string concatenation. Write this code all know, JS in the HTML string concatenation, very complex.

Can see the use of traditional JS development method, there are many repetitive tedious work, such as the binding of event handlers, complex HTML string splicing and so on. With this example, it is clear that the traditional way to develop using ANGULARJS is much more efficient than jquery and JavaScript. If you haven't felt the power and appeal of ANGULARJS, then let's look at the background of angular. The following is a preface to the "Developing next generation Web application with Angularjs" from the desert-poor autumn translation.
"About the origins of angular, I can go back to the 2009 Google Feedback project. At the time, we had been suffering for months about the speed of project development and the question of how to write testable code. At 6 months, we developed almost 17000 lines of front-end code. At this time, a member of the team, Misko Hevery, made a bold declaration: using an open source library that he had developed in his spare time, he could rewrite all the current things in two weeks.
I thought that two weeks was not going to have much effect on us, and we accepted the idea that Misko was trying to build something. However, Misko finally estimated the wrong time, which took him three weeks. But all of us were deeply shocked by him, and what shocked us was that the amount of code he developed for the new application was compressed from the original 17000 lines to 1500 rows. It seems that Misko's stuff deserves to be promoted in depth. Misko and I decided to build a team around the ideas he advocated, and the simple idea was to simplify the experience requirements for Web developers. ”

Through the above background introduction, you can see that angular really can greatly reduce the amount of code, improve development efficiency. At this point, if still did not arouse your interest in angularjs and curiosity, then is my language organization and expression ability not, not angular not.

(eight) Simple understanding of the two-way data binding mechanism of NB in the ANGULARJS framework, greatly reducing the amount of development code that needs to be duplicated