AngularJS entry-level knowledge-exploring the programming ideology of MVW framework _ AngularJS

This article mainly introduces the programming idea of MVW framework of AngularJS. This article explores the differences between AngularJS and the traditional JavaScript DOM control implementation methods by implementing two simple business needs, and try to understand the programming ideas of MVW frameworks in popular Web Front-end development. If you need them, refer to this article to implement two simple business requirements, explore the differences between AngularJS and traditional JavaScript DOM control methods, and try to understand the programming ideas of MVW frameworks in popular Web Front-end development.

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

JQuery implementation:

The Code is as follows:

• 
  Item 1
  
  
  
  • Item child 1
  
  
  
  

// Javascript
$ ('Li. parent_item '). click (function (){
$ (This). children ('ul. child '). toggle ();
})

Implementation of AngularJS:

The Code is as follows:

• 
  Item 1
  
  
  
  • Item child 1
  
  
  
  

The traditional DOM operation method will not be described in detail. The implementation of AngularJS is much more refined than the code. Only the HTML version can be used. The above Code uses AngularJS knowledge points:

1. Directives

2. Expressions

Both ng-click and ng-hide are built-in Directives. The former provides an Event Handler for the li tag. When the HTML element (li) is clicked, hide_child =! The Expression hide_child (Expression ). Let's take a look at the ng-hide command first. It will control whether the HTML element is to be displayed based on the value assignment expression result (Boolean value) (implemented through CSS ). That is to say, if the hide_child variable is true, ul will be hidden; otherwise, the result is the opposite.

Here, hide_child is actually a variable on $ scope. You can also use the controller to package a method to change its value, but the current statement is relatively simple, directly written in the instruction assignment.

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

1. the DOM operation is blocked by commands and expressions, and additional JavaScript code can be omitted with simple code.
2. The application of commands and expressions is only directly nested in HTML, which is somewhat different from the Unobtrusive JavaScript code style pushed by jQuery.

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

Requirement 2: Click p to trigger the selection of a radio button in form.
Traditional HTML Form elements are not very friendly on mobile devices today. For example, the Radio button is single-threaded. On the touch screen, you need to precisely locate the position to control this component, but the finger positioning is rough. A common practice is to add a corresponding Label control, but the text proportion to the screen is not ideal, and it does not have a clear information communication effect. Therefore, the p or li labels in a region are usually indirectly operated.

JQuery implementation:

The Code is as follows:

• 
  Id = "option1"/>
  Option 1
  

// Javascript
$ ('Li. selection '). click (function (){
$ (This). children ('input [type = "radio"] '). click ();
})

Implementation of AngularJS:

The Code is as follows:

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 several more commands. For comparison and reference, we only care about the expressions of the ng-click and ng-model commands.

Let's take a look at the https://docs.angularjs.org/guide/databinding of the input element "> ng-model Directive, here the assignment means that we put the input and $ scope on the template. the option attribute of the model object is associated. For more information about Data Binding, see 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 you modify the value in the control (select radio input), the corresponding Model object will be assigned a new value (model. option); at the same time, if the value of the Model object changes, the input control in the template also reflects the changes. But this is not actually done in the above jQuery implementation.

Therefore, through AngularJS data binding, click the li element to indirectly trigger the input process as follows:

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

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

First, technically, by introducing new commands, expressions, data binding, and other concepts, we can operate the DOM in a completely new way, the implementation of JavaScript code is not limited to the interaction between users and HTML components. This idea has changed dramatically.

From the beginning of this century, the rise of Dynamic Web programming began, and the programming technology on the server side has been improving. From the very beginning, CGI, PHP, and ASP were generated by languages and platforms. NET. java, development efficiency and software process promote the MVC Framework/ORM/AOP and so on, performance and big data bring NodeJS/NoSQL/Hadoop, etc, browser front-end technical requirements seem less radical. On the one hand, most of the business needs of B/S models can be met through servers and databases. Moreover, the browser itself has different platforms and is not compatible with the standards of script language and rendering technology, and lack of computing power and security considerations.

In this case, you only need to consider rendering pages and simple user interaction. In this way, HTML/DOM and JavaSript/CSS have achieved the main work of the front-end. Therefore, there was no front-end worker in the past and only a Web designer was needed. JQuery becomes the most widely used JavaScript encapsulated library for DOM operations. At this stage, the main tasks of jQuery/JavaScript are still just as a tool for rendering and interacting with user browsers.

After understanding the origins of jQuery, we can easily find that the previously pursued rules, such as Unobtrusive JavaScript, were limited to implementation methods and methods. In order to separate the DOM and JavaScript code logic, we give priority to more maintainability methods. After the front-end demand for JavaScript is increased, many front-end frameworks of MVC/MVP emerged, as well as the so-called MVW (Model-View-Whatever) of AngularJS ), the one-size-fits-all approach to JavaScript and DOM has changed. In the past, we considered direct operations for interface display and user interaction. Now we have data binding on the client, rich instructions, and dependency injection, waiting for us will be a brand new programming model and way of thinking.