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