Atitit.angular.js use best practices principles and FAQs To resolve and list display Cases Attilax Summary

Atitit.angular.js use best practices principles and FAQs To resolve and list display Cases attilax Summary

1. Scope of this article 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 data spa approach and integration with the Ajax and dwr 2

4. Format Data 2

4.1. Multi-field combination formatting 3

4.2. Output HTML 4

5. Output as a function parameter call 4

6. Loading Complete Event 5

7. Common Error 5

7.1. Atitit.angular.js filterprovider Filter [$injector: UNPR] 5

8. Where to fit the AngularJS 5

8.1. Angular vs jquery Tmpl.js 6

9. Angular 's question 6

9.1. Not conducive to the commissioning of developers, 6

9.2. Difficulty in learning advanced. 6

10. Reference 7

1. The scope of this document

Use angular to bind a JSON list to tablemainly.

Implementing the MVC HTML template feature:

2. AngularThe advantages2.1. Bidirectional data binding

Easier to implement DSL

Working with form data and editing tabular data offers many advantages

However, the form serialization of JQ is very simple.

In angular, manipulating data is not done by crawling and injecting. Typically implemented by data binding, brute fetch injects data. It is also possible to change the state of each component, but the problem is exposed when switching.

2.2. DSLof

Ng-show,ng-hide,ng-class and Ng-if as control statements for the template-all of this is amazing.

2.3. Dependency Injection 2.4. Directive 3. Binding Data manuallySpamanner and withAjaxwith theDwrthe Integration

Set automatic bound data to an empty list

function Listctrl ($scope) {

$scope. ListO7 =[];

}

Click Event

function Bindtabledata (data)

{

$ (' #tabid1 '). Scope (). listO7 =data;

$ (' #formx '). Scope (). $digest ();

}

4. Formatting data

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 "";}

}

});

Using the filter, use the vertical pipe symbol

{{itemo7.ds_id| ' TimeFmtO7 '}}

Author:: old Wow's paw attilax ayron, email:[email protected]

Reprint please indicate source: Http://blog.csdn.net/attilax

4.1. Multi-field combination formatting

Call

{{itemo7.download_status+ ', ' +itemo7.startdownflag+ ', ' +itemo7.truedownflag|statfmt}}

Writing filters

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 " in the download ";

}

});

4.2. OutputHTML

AngularJs output HTML , the browser does not parse these HTML tags, do not know angularJs How this function is implemented.

But here we need its display angular output HTML can be parsed by the browser what to do?

Through the API, it is found that the output of HTML is realized through instruction ng-bind-html .

<TD ng-bind-html= "itemo7.downloadstatus+ ', ' +itemo7.startdownflag+ ', ' +itemo7.truedownflag+ ', ' +itemO7.dsId | Statfmt "> </td>

It is also necessary to implement HTML presentation through the $SCE service.

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> client space full ");

}

}]);

5. The output is called as a function parameter

Does not seem to direct output, had to draw on the output

<a href= "javascript:void (0)" onclick= "Stop (this.id,this)" id= "{{itemo7.dsid}}" > terminate </a>

6. Load Complete Event

Found a half-day information, did not find the completion of the event information. Had to use the polling method to achieve the. The principle is that a tag in a foreach ha is written using angular : Check the status of this tag , if possible, the description has been loaded complete ...

<div id= "Finishtag" style= "Display:none" >{{' ... '}}</div>

if (Txt.indexof ("{", 0) >=0)//can Find {{brk,,, not finish

{

LOGX ("Find {");

}

Seems to be asynchronous and needs to be further clarified

7. Common Error 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 new.

Reason ::: Estimating browser cache issues ...

Refresh : Then OK

8. AngularJSof thewhere it fits

ANGULARJS simplifies application development by presenting a higher level of abstraction for developers. As with other abstractions, this also loses some of the flexibility. In other words, not all applications are suitable for use with ANGULARJS. Angularjs is primarily concerned with building crud applications. Fortunately, at least 90% of Web applications are CRUD applications. But to understand what is appropriate to build with ANGULARJS, you need to understand what does not fit angularjs build.

such as the game, graphical interface Editor, this DOM operation is very frequent and very complex applications, and crud applications are very different, they are not suitable for angularjs to build. It might be better to use some lighter, simpler technology like jquery in this case.

8.1. Angular vs jquery Tmpl.js

Formatting aspects , Tmpl more convenient, directly using the JS function can be.

9. Angularthe problem9.1. Not conducive to the debugging of developers,

Output information is often irrelevant 108,000 miles

9.2. Difficulty in learning advanced.

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

· Module

· Controller

· Instructions

· Scope

· Template

· Chained functions

· Filter filters

· Dependency Injection

10. Reference

Atitit. design of the load completion event Angular.js

Paip. lifting efficiency -- data binding to table Principle and process angular js jquery - attilax -&NBSP; blog channel   - csdn.net

Atitit. JS MVC Summary (2)----angular and Knockout o99 Best Practices -Attilax 's Column - Blog channel -Csdn.net

I turned from angular to react, why? -csdn.net

Use Bootstrapjs and AngularJS together and why not jquery-ourjs

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Atitit.angular.js use best practices principles and FAQs To resolve and list display Cases Attilax Summary