AngularJS introduction to the MVW class framework programming ideas

This article explores two simple business requirements AngularJS And the traditional JavaScript control DOM Implement the differences and try to understand them MVW Such frameworks are in vogue Web Programming ideas in front-end development.

This requirement is common, for example, for a two-level menu, where the corresponding submenu item should be shown or hidden when the first-level menu item is clicked.

JQuery implementation:

<!-- html -->

<ul class="parent">

    <li class="parent_item">

        Item 1

        <ul class="child">

            <li class="child_item">Item child 1</li>

        </ul>

    </li>

</ul>
// javascript

$('li.parent_item').click(function(){

    $(this).children('ul.child').toggle();

})

AngularJS implementation:

<!-- html -->

<ul>

    <li ng-click="hide_child = !hide_child">

        Item 1

        <ul ng-hide="hide_child">

            <li>Item child 1</li>

        </ul>

    </li>

</ul>

The traditional way of manipulating the DOM will not be covered. AngularJS implementation, relative to the code to a lot of refining, only HTML version can be. The above code, using the knowledge of AngularJS:

1. (link: https://docs.angularjs.org/guide/directive)

2. (link: https://docs.angularjs.org/guide/expression)

(link: https://docs.angularjs.org/api/ng/directive/ngHide) and (the link: https://docs.angularjs.org/api/ng/directive/ngClick) is a framework with Directives (instruction), the former is equivalent to li tag provides an Event Handler, the HTML elements (li) when clicked, will perform hide_child =! Hide_child this Expression. Let's first look at the ng-hide directive, which controls whether the HTML element is displayed (via CSS) based on the result of the assigned expression (the Boolean value). That is, if the hide_child variable is true, then ul will be hidden, otherwise the result will be reversed.    

Hide_child here is actually (link: https://docs.angularjs.org/guide/scope) in a variable, its change in the value, the controller is also used for packaging controller, a method to realize now statement is simple, just write directly in the assignment instructions.

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

1. The operation of DOM is sealed through instructions and expressions, which can eliminate extra JavaScript code with simple code
2. The application of instructions and expressions is only directly nested in HTML, which is the opposite of the Unobtrusive JavaScript code that jQuery pushes out

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

Requirement 2: trigger the selection of a radio button in the form by clicking div
Traditional HTML Form elements are not very user-friendly on today's mobile devices. For example, the Radio button menu box, on the touch screen, requires precise positioning in order to control this component, but finger positioning is very rough. The common practice is to add a corresponding Label control, but the text itself in the screen proportion is not ideal, and there is no clear message effect. Therefore, it is common to indirectly manipulate a div or li tag with a larger area.

JQuery implementation:

<!-- html -->

<ul>

    <li class="selection">

        <input type="radio"

            id="option1" />

        <label for="option1">option 1</label>

    </li>

</ul>
// javascript

$('li.selection').click(function(){

    $(this).children('input[type="radio"]').click();

})

AngularJS implementation:

<!-- html -->

<ul>

    <li ng-repeat="option in options"

        ng-click="model.option = option.value"

        ng-class="{active: model.option == option.value}" >

        <input type="radio"

            ng-model="model.option"

            value="{{option.value}}"

            id="option1" />

        <label for="option1">option 1</label>

    </li>

</ul>

In this solution, we also did not involve additional JavaScript code and used several more instructions. For comparison purposes, we only care about the expressions for the instructions ng-click and ng-model.

Let's have a look at the input of this element (link: https://docs.angularjs.org/api/ng/directive/ngModel https://docs.angularjs.org/guide/databinding) instruction, the meaning of this assignment is that we put on the template of the input and $scope. The option attribute of object model, in-depth understanding of data binding can reference (link: https://docs.angularjs.org/guide/databinding). This specified association causes the template control to bind directly to the data Model, and the binding is bidirectional. This means that as soon as the user modifies a value in the control (check radio input), the corresponding Model object is reassigned (model.option). Also, if the value of the Model object changes, the input control in the template will reflect the change accordingly. This, in fact, is not done in the above jQuery implementation.

Therefore, here, through the data binding of AngularJS, click the li element to indirectly complete the process of triggering the input like this:

1. Click the li TAB to assign value to model.option;
2. Modify the Model object to locate the corresponding input control (the value of value is model.option);
3. Activate the checked property 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 concepts such as instructions, expressions, data binding, etc., we can operate DOM in a completely new way, not just the implementation of JavaScript code limited to the interaction between users and HTML components. The change in thinking is huge.

Server-side programming techniques have been improving since the rise of dynamic Web programming in the early 2000s. From the beginning of CGI/PHP/ASP, the language and platform produced.NET vs. Java, development efficiency and software process promoted MVC framework /ORM/AOP, performance and big data brought NodeJS/NoSQL/Hadoop, etc., and the browser front-end technology requirements seem not so radical. On the one hand, the business requirements of most B/S models can be satisfied through the server side and the database. Furthermore, browsers themselves differ from platform to platform, are incompatible with scripting languages and rendering standards, and lack of computing power and security concerns.

In this case, the browser side requirements, most of the time only need to consider rendering the page and simple user interaction. HTML/DOM plus JavaSript/CSS makes the main work of the front end. So, before, there was no front end worker, just a Web designer. With the increasing demands on the front-end, jQuery has become one of the most widely used encapsulation libraries for JavaScript manipulation of the DOM. At this stage, the primary task of jQuery/JavaScript remains as a tool for rendering and interacting with the user's browser terminal.

With an understanding of jQuery's origins, it's not hard to see that some of the rules that were pursued before, such as Unobtrusive JavaScript, were limited to the means and means of implementation, and in order to separate DOM from JavaScript code logic, we preferred a more maintainable approach. Increased demand in front of JavaScript, there are many MVC/MVP front-end framework, as well as AngularJS so-called (link: https://plus.google.com/+AngularJS/posts/aZNVhj355G2), JavaScript and DOM changed one size fits all. Now that we have client-side data binding, rich instructions, and dependency injection, we have a whole new programming model and way of thinking.