Practice: Angular application tips that cannot be missed (1)

Practice: Angular application tips that cannot be missed (1)

Angular's core idea is to drive everything through data. Everything else is an extension of data. In angular, Javascript uses the idea that everything is an object.

About Project Construction

(1) requirejs and Yeoman

When I first started to contact or use Angular, I always had questions like this. My practical answer is that requirejs or Yeoman is not required. the former is not used because angular has the module implementation. the latter is because Angular's organizational structure and project construction are totally unnecessary. You can write it manually or use pull for a seed project on github.

(2) how to organize the project structure

This problem is a little useless because it is totally different from the project. I personally recommend two types of organizational structures: one is based on the Code function, that is, the controller is put under a folder, and the services are put under a folder. the other method follows the implemented functions. For example, the corresponding template, services, and controller are all stored in the User folder.

Both of them can be used. From the maintenance perspective, the second one will be better.

(3) Division of controllers and services

Here, controller is usually a page controller. If a page has a public part, the public part will always use a controller. the service should be divided into two parts: one is the service that interacts with data on the server, and the other is some functional common content, where some reusable services written by themselves are placed, similar to ipvy.

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

(4) use of Angular plug-ins and libraries

It is certainly unrealistic for a project to get everything ready for use online, but it is not practical to write everything on its own. many Angular plug-ins are developed by the Angular team or are encapsulated by jquery plug-ins. my Opinion on plug-ins is very simple. If I use the plug-ins, I can use the plug-ins as soon as I can meet the requirements. If I cannot meet the requirements, I can write the plug-ins myself or improve the existing plug-ins.

If you have not been able to debug the plug-in for a few hours, let me advise you to give up on it. most plug-ins are some UI plug-ins that do not need to be complicated. Sometimes simple HTML controls have their own simplicity and beauty.

If you encounter Angular plug-ins conflicts, especially UI plug-ins, you should give up one of them in most cases, such as angular-ui and angular-plugin.

Tips

Next, let's go to the text. I will list some of the skills I have used when using angular, And I will list them one by one in the form of scenarios. I will not explain some basic concepts of Angular here. This article is a bit technical, not a basic tutorial.

(1) "{{}}" in angular conflicts with Python flask

In the template used by Python flask, data binding also uses two "{" braces, which is in conflict with angular data binding. there are two solutions. One is to modify the angular binding tag, and the other is to modify the flask binding tag. Both solutions are provided here.

Modify angular:

 
 

  
  
$ InterpolateProvider. startSymbol ('{[{'). endSymbol ('}]}');
  
  
// Add this sentence to config and place it in the route module. Here, bind the original angular {}.
 
 

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='<#',  
  
  
        comment_end_string='#>',  
  
  
    ))  
  
  
       
  
  
app = CustomFlask(__name__, instance_path='/web') 
 
 

Here I recommend modifying flask because angular is used for frontend and backend separation. the jinjia template of flask is no longer needed. If you modify the Angular binding tag, other controls and libraries may have problems.

(2) removal of URLs always includes "#" by default "#"

Enable the HTML5 mode when setting the route.

 
 

  
  
Angular. module ('router ', ['ngroute'])
  
  
. Config (['$ routeProvider', '$ locationProvider ',
  
  
Function ($ routeProvider, $ locationProvider ){
  
  
Required 5 Mode (true); // set this sentence.
  
  
}
  
  
]);
 
 

3) ng-click = "expression" and similar commands, how to write multiple expressions in expression?

For example, if I want to assign values to two variables in a ng-click operation, use the semicolon (;) to separate them:

 
 

  
  
<a ng-click="obja=1;objb=2"></a> 
 
 

(4) $ watch does not work or only takes effect once

This usually occurs when listening to a string or number, $ scope. $ watch ("name", function (){}). the solution is that $ watch listens to an Object whenever possible and attaches the value you want to listen to it to an Object.

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

(5) You want the ng-view content to be displayed on the entire page.

Generally, a page may have a fixed top-menu or sidebar, such fixed parts, and each time the route changes, the template of ng-view is used, if you want the entire page to display itself completely, it does not include fixed parts such as top-menu.

This is usually the template.html of an index.html and an ng-viewdisplay. top-menuand sidebarare in index.html, and hide their display by binding a variable control through ng-if.

If a page needs to be completely displayed without sidebar, use $ scope in its controller. $ emit sends a message up, and then the controller on the index page uses $ scope. $ on listens to a message. Once you hear the message, the variable that controls the display of the sidebar is changed.

You can also use the service to implement global variable control. For personal recommendations, you can use message broadcast.

(6) replace ng-if with ng-show.

This is a small pitfall of angular. some long list data may be hidden by default and displayed by clicking. and this part of controllable explicit and hidden content will also be accompanied by a lot of data binding. this affects the performance of page rendering.

Take a column as an example. For example, angular usually recommends that you bind no more than 2000 data records to a page. If there is a page that is directly bound with 2000 models, and then you load the data, you will find it very difficult. if you set the model of every 100 to ng-show, it is not displayed by default.

Then you replace all ng-show with ng-if, and you will find that the performance is as fast as two applications. the reason is that ng-show still executes all bindings, while ng-if is equal to true, that is, the binding is executed again when the display is performed. in this way, the performance is greatly improved. Through this simple modification, the page loading speed is about 10 times faster.

So when ng-if can be used, use it to replace all ng-show and ng-hide.
 

(7) about ng-bind-html

Generally, data is bound to html elements. ng-bind is enough, but in some situations, html is not the data to be bound. ng-bind is not enough. ng-bind-html must be used to output the content as html. for example, if you want to output html with a class, use ng-bind-html. In addition, ngSanitize must be used together to introduce the corresponding files.