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

This article is to share with you about the Angular application skills that can not be missed, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

The core idea of angular is to drive everything through data, and everything else is an extension of data. Applying the idea that everything is an object in Javascript, it can be said that everything is data in angular.

(1) requirejs and Yeoman about project construction

When I first come into contact with or use Angular, I always wonder about similar questions. My practical answer is that I don't need requirejs or Yeoman. The former is not used because angular itself has an implementation of module. The latter is because the Angular organizational structure and project construction do not need to be so complicated, handwritten or pull a seed project on github.

(2) how to organize the project structure

This problem is a bit of a waste, because it all varies from person to project. Personal recommendation is two organizational structures, one according to the code function, that is, controller are placed in one folder, services are placed in one folder. The other follows the implemented function. For example, User puts the corresponding template,services,controller under the User folder.

Both are fine, and the second is better from a maintenance point of view.

(3) the division of controller and service

Here controller is usually a controller of a page. If a page has a common part, the public part always uses a controller. For service, it is divided into two parts, one is the service of server interactive data, the other is some functional common content, in which some self-written reusable services are placed, similar to notify and so on.

As for whether service should be further divided according to functions and modules, it depends on the project.

(4) use of Angular plug-ins and libraries

It is certainly not realistic for a project to get everything ready-made online, but it is even more impractical to write everything yourself. Many of Angular's plug-ins are developed by the Angular team or encapsulated by some people in jquery plug-ins. My view on plug-ins is very simple: if you can use them to meet your needs, write them yourself or improve on existing plug-ins.

For plugins that you can't handle if you debug for hours, take my advice and give it up. Most plug-ins are UI plug-ins, so you don't have to pursue complexity. Sometimes simple HTML controls have their own beauty of simplicity.

If you encounter Angular plug-in conflicts, especially UI plug-ins, most of the time you have to give up one of them, such as angular-ui and angular-strap.

Use skills

In the following text, I will list some of the techniques I use in using angular, one by one in the form of scenarios. I won't explain some of the basic concepts of Angular here. This article is a technical thing, not a basic tutorial.

(1) flask conflict between "{{}}" and Python in angular

In the template used by Python's flask, data binding is also through two "{" curly braces, which conflicts with angular's data binding. There are two solutions, one is to modify the binding tag of angular, the other is to modify the binding tag of flask, both of which are given here.

Modify angular:

$interpolateProvider.startSymbol ('{[{') .endSymbol ('}]}'); / / add this sentence to config and put it in the module of route. Here, the original angular {{}} binding is modified to be bound through {[{}]}.

Modify flask:

Class CustomFlask (Flask): jinja_options = Flask.jinja_options.copy () jinja_options.update (dict (block_start_string=' {%', block_end_string='%}', variable_start_string=' {#', variable_end_string='#}', comment_start_string='',)) app = CustomFlask (_ _ name__ Instance_path='/web')

Here I recommend modifying flask, because after using angular, the front and back end separates the jinjia template of .flask is no longer needed, and if you modify the binding tag of Angular, other controls and libraries will have problems.

(2) remove url with "#" by default

When setting route, turn on HTML5 mode.

Angular.module ('router', [' ngRoute']) .config (['$routeProvider','$locationProvider', function ($routeProvider, $locationProvider) {$locationProvider.html5Mode (true); / / set this sentence}])

3) how do ng-click= "expression" and similar instructions write multiple expressions in expression?

For example, I want to assign values to two variables in a ng-click, which can be separated by ";" semicolons:

(4) $watch has no effect or only takes effect once

This generally occurs when listening to a string or number, $scope.$watch ("name", function () {}). The solution is that $watch listens to an object as much as possible, and appends the value you want to listen to under an Object.

This is more obvious when you use modal in angular-ui.

(5) you want the content of ng-view to be displayed on the full page.

Usually a page may have a fixed top-menu or sidebar, this kind of fixed part, and then every time the route changes is the ng-view template, if a page wants the whole page to display itself completely, excluding fixed parts such as top-menu.

Here, usually an index.html and a ng-view display of template.html,top-menu and sidebar are located in index.html, and their display hiding is controlled by binding a variable to ng-if.

If a page needs to display itself completely and does not show sidebar, etc., send a message up through $scope.$emit in its controller, and then the controller of the index page listens for the message through $scope.$on. Once you hear that message, change the variable that controls the sidebar.

You can also do a global variable control through service, personal recommendation or broadcast through the message.

(6) remember to use ng-if instead of ng-show

This is a small pit of angular, which can also be said to be a medium-sized one. Some long list data, there may be something by default hidden, click to show the form. And this part of the controllable explicit and implicit content will also be accompanied by a lot of data binding. This has a great impact on performance when rendering pages.

Take a column, for example, angular usually recommends that there are no more than 2000 data bindings on a page. If there is a page directly bound to 2000 model, and then you load it, you will find it very stuck. If you set model per 100 to ng-show, which is not displayed by default, you will find that it is still very stuck.

Then you replace all the ng-show with ng-if, and you will find that the performance is as fast as two apps. The reason is that ng-show still performs all bindings, while ng-if performs bindings when it is equal to true, that is, when it is displayed. As a result, the performance has been greatly improved. I used this simple modification to make the page load about 10 times faster.

So if you can use ng-if, use it instead of all ng-show and ng-hide.

(7) about ng-bind-html

Usually, to bind data for html elements, ng-bind is enough, but in some cases it is not ordinary data that needs to be bound, but html. Then ng-bind is not enough, you need to use ng-bind-html, which will output the content in html format. For example, if you want to output html with class, then use ng-bind-html, and you need the cooperation of ngSanitize, and you need to import the corresponding files.

(8) the result of obtaining ng-repeat data filter

This is generally needed when searching, such as multiple ng-repeat data forming lists. Then filter a field, and now to get the result after filter, there are 2 ways.

One is to write something like this in html's ng-repeat:

Ng-repeat= "food in foodCategory._displayfoods = (foodCategory.foods | filter: {'name': searchobj.foodfilter} | orderBy: food.sort_order)"

So _ displayfoods is the final display result after filter. Another way is to use two sets of data, one set is written in controller, then filter and orderBy are operated in controller, and the result of * operation is used in ng-repeat.

* is more convenient, the second way is better, the performance is also good.

(9) ng-class and ng-style assign values by judgment

According to the value of the variable to decide whether to apply a certain class, as well as different style styles.

Ng-class= "{'stateMushroom errorless default' default'. Foodstock.valid}"ng-style=" {color: i.colorcolorcolorcake cake' | i.namecake 'live'? 'foodstock.valid} "

(10) form check take input as an example

The form of angular can be verified by the HTML5 attribute of input. Here, it is mainly locked by the name attribute of form and input. Formname.inputname.$valid indicates whether the space in which the name is inputname is verified by its own attribute.

(11) $promise of $resource and $http

$q.all ([resource.query (). $promise, resource2.query (). $promise]) .then (functon (success) {console.log (success);}, functon (error) {console.log (error);}); foodFactory.food.save (f). $promise.then (function (result) {foodFactory.food.get ({id:result.id}). $promise.then (function (data) {});})

This does not explain, just look at it. Note that the promise of $http needs to be returned manually, so it is usually done through $resource.

(12) only $watch listens for one attribute in the collection

The third parameter of $watch is set to true, and you can deep watch. But sometimes you don't want or need to listen to all the properties of collection. As long as you monitor one or more of them, you can cycle $watch through the for loop, but it's obviously too lame.

You can monitor a single object property of a collection by writing it as follows.

$scope.people = [{"groupname": "G1", "persions": [{"id": 1, "name": "bill"}, {"id": 2 "name": "bill2"}]}, {"groupname": "G2", "persions": [{"id": 3, "name": "bill3"} {"id": 4, "name": "bill4"}]] $scope.$watch (function ($scope) {return $scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name})) });}, function (newVal) {$scope.count++; $scope.msg = 'person name was changed'+ $scope.count;}, true)

(13) debounce anti-shake treatment

This is very useful for frequent departure processing and is suitable for scenarios like ng-change,$watch. For example, in the case of instant search without keywords, encapsulate $debounce as a service and call the interface directly, code: http://jsfiddle.net/Warspawn/6K7Kd/

(14) quickly locate to a certain location

Generally speaking, through this form, the page can be combined with js code to achieve rapid positioning. It is implemented through a similar principle in angular, and the code is as follows:

Var old = $location.hash (); $location.hash ('batchmenu-bottom'); $anchorScroll (); $location.hash (old)

This is written because direct location.hash will cause url changes and page jumps, so add code to prevent jumps.

These are the Angular application skills that should not be missed, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please 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.