Discussion on programming ideas of MVW class framework for introductory knowledge of AngularJS_AngularJS

By implementing two simple business requirements, this article explores the differences between AngularJS and traditional JavaScript control DOM implementation, and tries to understand the programming ideas of frameworks such as MVW in popular Web front-end development.

This requirement is very common. For example, in a two-level menu, when the first-level menu item is clicked, the corresponding submenu item should be displayed or hidden.

jQuery implementation:

Copy code The code is as follows:

• 
  Item 1
           
  
                                                                                                                                                                                   
  • Item child 1
  
                                                                                     
  
  
  //javascript

  $('li.parent_item').click(function(){
  $(this).children('ul.child').toggle();
  })
  
  

AngularJS implementation:

Copy code The code is as follows:

• 
  Item 1
           
  
                                                                                                                                                                                                                                     
  
  
  
  
  
  The traditional way of operating DOM will not be described again. The implementation of AngularJS is much more refined than the code, and only the HTML version is sufficient. The above code uses these knowledge points of AngularJS:

1.

Directives

2.Expressions

ng-click

and

ng-hide are both Directives that come with the framework. The former is equivalent to providing an Event Handler to the li tag. In the HTML element ( li) When clicked, the Expression (expression) hide_child = !hide_child will be executed. Let's first take a look at the ng-hide directive, which controls whether the HTML element should be displayed based on the assigned expression result (Boolean value) (implemented through CSS). In other words, if the variable hide_child is true, then ul will be hidden, otherwise the result will be the opposite. Hide_child here is actually a variable on $scope

. Changing its value can also be achieved by wrapping a method in the controller controller. However, the current statement is relatively simple and can be written directly in In the assignment of the instruction.

Through the above simple code analysis, we can see two obvious features of AngularJS:

1. The operation of DOM is sealed through instructions and expressions, and only simple code can save extra JavaScript code

2. The application of instructions and expressions is only directly nested in HTML, which is somewhat contrary to the Unobtrusive JavaScript code style that jQuery promotes

Let’s look at another requirement first, and then explain the above conclusion in detail.

Requirement 2: By clicking on the div, trigger the selection of a radio button in the form

The traditional HTML Form element is not very friendly to operate on today's mobile devices. For example, the Radio button radio button requires precise positioning on a touch screen to control this component, but finger positioning is very rough. A common approach is to add a corresponding Label control, but the screen ratio of the text itself is not ideal, and it does not have a clear information transmission effect. Therefore, a div or li tag with a relatively large area is usually operated indirectly.

jQuery implementation:

Copy code The code is as follows:

   
• 
                      id="option1" />
          option 1
     

// javascript
$('li.selection').click(function(){
    $(this).children('input[type="radio"]').click();
})

AngularJS的实现：

复制代码 代码如下:

   
•         ng-click="model.option = option.value"
          ng-class="{active: model.option == option.value}" >
                      ng-model="model.option"
              value="{{option.value}}"
              id="option1" />
          option 1
     

In this solution, we also did not involve additional JavaScript code and used a few more instructions. For comparison and reference, we only care about the expressions of the two directives ng-click and ng-model.

Let’s first look at the ng-model directive of the input element. The assignment here means that we associate the input on the template with the option attribute of the $scope.model object to gain an in-depth understanding of the data. For binding, please refer to Data Binding. This specified association enables the template control to be directly bound to the data Model, and this binding is bidirectional. This means that once the user modifies the value in the control (check radio input), the corresponding Model object will be reassigned (model.option); at the same time, if the value of the Model object changes, the input control in the template will also correspond Reflect changes. This is actually not achieved in the above jQuery implementation.

So, through the data binding of AngularJS, the process of indirectly triggering the input by clicking on the li element is as follows:

1. Click the li tag and assign a value to model.option;
2. Modify the Model object and locate the corresponding input control (the value of value is the one of model.option);
3. Activate the checked attribute of the input control

Through the above two cases, we have a new understanding of the operation of the Web front-end.

First of all, in terms of technical implementation, by introducing new instructions, expressions, data binding and other concepts, we can operate the DOM in a completely new way, not just the JavaScript code that is limited to the interaction between users and HTML components. accomplish. This change in thinking is huge.

Since the rise of dynamic web programming at the beginning of this century, server-side programming technology has been improving. From the beginning of CGI/PHP/ASP, the language and platform gave rise to .NET vs. Java, development efficiency and software process promoted the MVC framework/ORM/AOP, etc., and performance and big data brought NodeJS/NoSQL/Hadoop, etc. , and the technical requirements for the browser front-end seem to have not been so radical. On the one hand, most of the business needs of the B/S model can be met through the server and database; on the other hand, the browser itself has differences between different platforms, is not compatible with the standards of scripting language and rendering technology, and has limitations in computing power. deficiencies and safety considerations.

In this case, the requirements on the browser side most of the time only need to consider rendering the page and simple user interaction. HTML/DOM plus JavaScript/CSS thus achieve the main work of the front-end. Therefore, there were no front-end workers in the past, only web designers were needed. Gradually, there are more and more requirements for the front-end, and jQuery has become the most widely used JavaScript encapsulation library for operating DOM. At this stage, the main task of jQuery/JavaScript is still just as a tool for user browser terminal presentation and interaction.

Understanding the origin of jQuery, it is not difficult to find that some of the rules we pursued before, such as Unobtrusive JavaScript, were limited to the means and methods of implementation. In order to separate the DOM and JavaScript code logic, we gave priority to the more maintainable ones. Way. After the front-end demand for JavaScript increased, many MVC/MVP front-end frameworks appeared, as well as AngularJS’s so-called MVW (Model-View-Whatever), and the one-size-fits-all approach to JavaScript and DOM changed. Originally, we considered the direct operation of interface display and user interaction. Now we have client-side data binding, rich instructions, and dependency injection. What awaits us will be a new programming model and way of thinking.