Atitit. angular. js use the best practice principle and common problems to solve and list show the case attilax summary, angularjs Best Practices

Atitit. angular. js use the best practice principle and common problems to solve and list show the case attilax summary, angularjs Best Practices

Atitit. angular. js Best Practice Principle and common problem solving and list display case attilax Summary

 

1. Scope 1

2. Advantages of Angular 1

2.1. bidirectional data binding 1

2.2. dsl 2

2.3. Dependency injection 2

2.4. Instruction 2

3. Manually bind the data spa mode and integrate with ajax and dwr 2

4. format data 2

4.1. Multi-field combination formatting 3

4.2. Output html 4

5. The output is called as a function parameter. 4

6. Load completion event 5

7. Common Errors 5

7.1. Atitit. angular. js FilterProvider filter [$ injector: unpr] 5

8. Applicability of AngularJS 5

8.1. Angular vs jquery tmpl. js 6

9. Angular Issue 6

9.1. not conducive to debugging by developers, 6

9.2. Difficult to learn more advanced. 6

10. Refer to 7

 

 

1. Scope of this Article

Bind an Angular json list to a table ..

Implement the mvc html template function ..

2. Advantages of Angular 2.1. bidirectional data binding

Easier dsl implementation

Processing Form data and editing table data bring many advantages

However, the form serialization of Jq is also very simple.

 

In Angular, data is not manipulated by capturing and injecting data. Generally, data binding is used to capture and inject data. It can also change the status of each component, but problems are exposed during the switchover.

2.2. dsl-based

Ng-show, ng-hide, ng-class, and ng-if are used as template control statements-all of which are surprising.

2.3. Dependency injection 2.4. Directive 3. Manually bind the data spa mode and integrate with ajax and dwr

Set the automatically bound data to an empty list

Function listCtrl ($ scope ){

 

$ Scope. listO7 = [];

 

}

 

Click Event

 

Function bindTableData (data)

{

$ ('# Tabid1'). scope (). listO7 = data;

$ ('# Formx'). scope (). $ digest ();

}

4. format data

You need to create a module filter, such as common date formatting.

 

Var homeModule = angular. module ("atiMod", []);

HomeModule. filter ('timefmto7', function (){

Return function (item ){

Try {

Return item. Format ("yyyy-MM-dd hh: mm: ss ");

} Catch (e) {return "";}

}

});

 

Use filter and vertical bar pipe symbols

{ItemO7.ds _ id | 'timefmto7 '}}

 

Author: old wow's paw Attilax iron, EMAIL: 1466519819@qq.com

Reprinted please indicate Source: http://blog.csdn.net/attilax

 

 

4.1. Multi-field combination formatting

Call

{ItemO7.download _ status + ',' + itemO7.startdownFlag + ',' + itemO7.trueDownFlag | statFmt }}

 

Writing Filter

HomeModule. filter ('statfmt', function (){

Return function (item ){

// Alert (item );

Var arr = item. split (",");

Var downedflag = arr [0];

Var startdownFlag = arr [1];

Var failFlag = arr [2];

 

 

If (downedflag = 1 & failFlag = 1)

Return "downloaded ";

If (downedflag = "null" & startdownFlag = 1 & failFlag = "null ")

Return "downloading ";

 

}

});

 

 

4.2. Output html

When angularJs outputs html, the browser does not parse these html tags and does not know how angularjs implements this function.

But here we need to show that the html output by angular can be parsed by the browser. What should we do?

Through APIs, you can find that html output is achieved through the ng-bind-html command.

 

<Td ng-bind-html = "itemO7.downloadStatus + ',' + itemO7.startdownFlag + ',' + itemO7.trueDownFlag + ',' + itemO7.dsId | statFmt"> </td>

 

You also need to use the $ sce service to display html.

HomeModule. filter ('statfmt', ['$ sce', function ($ sce ){

Return function (item ){

// Alert (item );

Var arr = item. split (",");

Var downedflag = arr [0];

Var startdownFlag = arr [1];

Var failFlag = arr [2];

Var dataid = arr [3];

If (failFlag = 3)

Return $ sce. trustAsHtml ("Download failed: <br> other reasons ");

If (failFlag = 4)

Return $ sce. trustAsHtml ("Download failed: <br> the client space is full ");

 

 

}

}]);

 

5. The output is called as a function parameter.

It seems that it cannot be output directly, so I have to learn from the output

<A href = "javascript: void (0)" onclick = "stop (this. id, this)" id = "{itemO7.dsId }}"> terminate </a>

 

 

 

 

6. Load completion events

I searched for half-day information and did not find the information for completing the event .. I had to use the round-robin method .. The principle is to use angular to write a tag on the foreach side .. Check the status of the tag. If yes, it indicates that the tag has been loaded...

 

<Div id = "finishTag" style = "display: none" >{{ '...' }}</div>

If (txt. indexOf ("{", 0)> = 0) // can find {brk, not finish

{

Logx ("find {{");

}

 

It seems to be asynchronous and needs to be further clarified

 

7. Common Errors: 7.1. Atitit. angular. js FilterProvider filter [$ injector: unpr]

 

"Error: [$ injector: unpr] http://errors.angularjs.org/1.2.9/?injector/unpr? P0 = stateFmt1FilterProvider % 20% 3C-% 20stateFmt1Filter \

 

 

This filter is not available.

 

Cause: Estimated browser cache problems...

Refresh .. then OK

 

 

8. Applicability of AngularJS

AngularJS simplifies application development by presenting a higher level of abstraction to developers. Like other abstract technologies, this also compromises some flexibility. In other words, not all applications are suitable for using AngularJS. AngularJS mainly considers building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you must understand what is not suitable for building with AngularJS.

Such as games and graphic interface editors. DOM operations are frequently and complex, which are very different from CRUD applications. They are not suitable for AngularJS construction. In this case, it may be better to use lighter and simple technologies such as jQuery.

 

8.1. Angular vs jquery tmpl. js

In terms of formatting, tmpl is more convenient and you can directly use js functions.

 

9. Angular issue 9.1. It is not conducive to debugging by developers,

Often output information in question 108,000

 

9.2. Difficult to learn more advanced.

Angular requires learning a lot of concepts, including but not limited:

· Module

· Controller

· Instructions

· Scope

· Template

· Chained Functions

· Filter

· Dependency Injection

 

 

10. Reference

Atitit. Design of Loading completed events angular. js

Paip. Improve efficiency-principles and procedures of Data Binding to table Angular js jquery implementation-attilax column-blog channel-CSDN. NET

Atitit. js mvc Summary (2) ---- angular and Knockout o99 best practices-attilax column-blog channel-CSDN. NET

I switched from Angular to React. Why? -CSDN. NET

Combining BootstrapJS with AngularJS and why jQuery-OurJS is not needed

 

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.