Shulou(Shulou.com)06/02 Report--

This article shows you how to use AngularJS to write elegant code, the content is concise and easy to understand, can definitely make your eyes bright, through the detailed introduction of this article hope you can learn something.

It's a bit of a coincidence to come into contact with AngularJS. When writing data binding with JQuery, I was fed up with the synchronization between data objects and DOM. I had to write a lot of code logic for method binding and taking / setting values. To put it simply, it is:

After the data object changes, the DOM tree should be updated in time

After the user changes the DOM tree, he will go back to update the data object.

For example, this question is clearer, for example, I defined a queryObj like this:

{name: "sally", price: 30}

There are now DOM objects like this:

Sally

1. When the queryObj changes, the two DOM objects need to be updated in a timely manner. One is that the value needs to be updated, and the other is that the text inside the tag needs to be updated.

I have to write a JQuery setting statement like this:

$("input") .val (queryObj.name); $("label") .text (queryObj.name)

2. When you change the value in input, I also need to synchronously update the value in label and the value in queryObj:

$("input") .keydown (function () {var data = $(this) .val (); $("label") .text (data); queryObj.name = data;})

As you can imagine, when there are a lot of DOM objects, this kind of binding and setting statements are disgusting.

With regard to this problem, the change to the first object needs to be refreshed to DOM in time. There are many ways, such as underscore.js, mustache, template + data binding, etc., of course, it needs to be manually called to update. But on the contrary, Article 2, DOM changes need to be refreshed to other DOM objects in time, and data objects should also be brushed back. I looked for it for a while, but I didn't see any ready-made implementation. I was ready to write a simple mechanism by myself. When Google came to AngularJS's "two way binding", , dark cool, isn't this exactly what I want?

Since this is not an AngularJS tutorial. Here I assume that you have the basic knowledge of AngularJS, otherwise, it is recommended that you read the AngularJS easy-to-understand tutorial first.

Two-way binding

Whether it's MVC or MVVM, the process of data binding is always tiresome, and the less you do, the better; if you need the inverse process of data binding, this is a problem that existing MVC frameworks rarely take into account. AngularJS not only does the two-way binding for me, but also avoids the definition of a specific view class and just uses the original data object.

With regard to the above problem, when writing HTML tags, add the attributes of ng-app and a ng-controller. As for placeholders, they are no different from ordinary template mechanisms:

{{queryObj.name}}

And define a method with the same name as ng-controller, and the parameter name is $scope:

Function QueryController ($scope) {$scope.queryObj = {name: "sally", price: 30};}

After that, label, input, and $scope.queryObj will be synchronized, and when DOM changes, the other two will be updated in time. This is the two-way binding of AngularJS. I think this is probably the best part of AngularJS.

The tutorial on AngularJS's official website also gives the following instructions:

From the above examples, controllers, templates, data models, views, these concepts and the relationship between these should have been clear.

AngularJS follows the design philosophy that UI should be built declaratively (see my article on programming paradigms for what declarative programming is). It is worth mentioning that directive introduced by AngularJS does facilitate the expansion of the tag set, you can write code that looks like DSL, and is very flexible, such as:

Error occurs.

The Alert is a custom tag implemented through directive, which can eventually be parsed into a html with a "warning" style. however, in the definition of directive, even the example of the official website is to write the html fragment template code string, which really makes me uncomfortable.

Dependency injection

Dependency injection (Dependency Injection,DI) is all too familiar to programmers who have used Spring. The so-called dependency injection is to hand over the steps of injecting values in a process to an external framework or container. For example, code like this:

Function PhoneListCtrl ($scope, $http) {$http.get ('phones/phones.json') .success (function (data) {$scope.phones = data;}); $scope.orderProp =' age';}

$scope and $http are service variables that need to be passed in by the AngularJS framework. Here, the name of the parameter cannot be changed at will, because AngularJS determines the need for dependency injection based on it.

Services can be defined by themselves and then added to use by dependency injection, which is helpful for modularization and reuse.

Filter

AngularJS's expression function is relatively weak, does not support conditional judgment and flow control, but fortunately supports filters, which makes up for this deficiency to some extent. Filters are an interesting feature reminiscent of pipeline programming. At this point, as a joke, you may also find that AngularJS is really plagiarized everywhere. Oh no, it draws lessons from various concepts and paradigms, such as dependency injection to copy Spring, label definition to copy Flex, and filter to copy Linux pipes:

{{"lower cap string" | uppercase}} {1304375948024 | date: "MM/dd/yyyy @ h:mma"}}

Since it is pipeline programming, it certainly supports iterative use of pipes:

Event handling

Decoupling must be relative, and when we use various binding statements to remove onClick= "_ javascript:xxx" from DOM, we already think that one day we will get tired of writing those DOM event binding statements and will get them back:

Accordingly, define setImage:

$scope.setImage = function (imageUrl) {$scope.mainImageUrl = imageUrl;}

Whether it's taking the binding away or getting it back, it makes sense. Choose the way you love the most. As far as I'm concerned, I tend to put the code of the same module together to increase understandability, regardless of whether its composition is a DOM declaration or an JavaScript interpretation.

In addition, it is worth mentioning the communication methods between different controller. AngularJS recommends using events. Specifically, controller can be nested. $broadcast broadcasts events to all child controller, while $emit passes event bubbles to the parent controller,$on, which is the event registration function of AngularJS:

Scope.$on ("DataChange", function (event, msg) {$scope.$broadcast ("DataChange", msg);})

However, it bothers me that if my two views are in different controller and I have to keep synchronized through the event mechanism, why do I need AngularJS?

While complaining, AngularJS is still worth learning to use, especially the two-way binding, which is so cool to use.

The above is how to write elegant code with the help of AngularJS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.