一、架构方面
（一） Angular框架有service 、controller层：
在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了（因为service的底层机制是通过闭包实现，如果过分使用会导致内存泄露从而导致性能问题）。
（二）Angular框架技术方面
1、angular.ui.grid 数据表的技术
基本结构的案例代码：
HTML页面：
//没有分页的情况<div ui-grid="financialMainOption" ui-grid-selection ui-grid-pinning ui-grid-resize-columns style="height:399px;" class="grid"></div>//分页的情况<div ui-grid="gridOptionsJobCostTemplate" ui-grid-paginationui-grid-selection ui-grid-resize-columns ui-grid-exporter class="grid"style="height: 550px;">
</div>/*分页的模块标志*/ui-grid-pagination
JS页面：
$scope.rateIncomeOptions = {enablePagination : true,// 是否禁用分页useExternalPagination : true,// 必须设为true才能赋值totalItemsenableRowSelection : true,enableSelectAll : true,enableSorting: true,enableCellEditOnFocus:true,//单元格指令enableRowSelection:false,columnDefs : [{name : "rateNme",displayName : '费率名称' ,width : "140",enableCellEdit : false,cellClass:cellRateRow,cellTemplate:'<div class="rateOption_{{row.entity.rateUuid}}">{{row.entity.rateNme}}</div>'},{name : "money",displayName : '实际金额' ,width : "80",type:'number',enableCellEdit : true,cellClass: cellClassOrderFun},{name : 'unit',displayName : '单位' ,width : "60",type:'number',enableCellEdit : false,cellFilter:"rateUnitFilter"},{name : "taxThan",displayName : '纳税比' ,width : "113",type:'number',enableCellEdit : true},{name : 'remarks',displayName :'费用备注',width : "350",enableCellEdit : true},{name : 'settlementStatus',displayName : '审核状态',width : "90",cellFilter : 'settlementStatus',enableCellEdit : false},{name : 'isHaveTicket',displayName :'票',width : "50",enableCellEdit : false,cellFilter:"isOneOrZeroFilter"},{name : 'serialNo',displayName :'序号',type:'number',width : "60",enableCellEdit : true ,sort: { direction: uiGridConstants.ASC, priority: 1 } },]};// 将grid的API绑定到scope作用域$scope.rateIncomeOptions.onRegisterApi = function(gridApi) {$scope.rateIncomeGridApi = gridApi;//点击行头触发gridApi.selection.on.rowSelectionChangedBatch($scope, function (row, event) {/*row选择行头时，event触发该事件的源事件*/$scope.selectRateIncomeDatas=gridApi.selection.getSelectedGridRows();//所有选中的行$scope.sumInAmount = $scope.caluSumMoney($scope.selectRateIncomeDatas); //计算选中行的总金额 });//点击行时触发gridApi.selection.on.rowSelectionChanged($scope, function (row, event) {/*row选择的行，event触发该事件的源事件*/$scope.selectRateIncomeDatas=gridApi.selection.getSelectedGridRows();//所有选中的行$scope.sumInAmount = $scope.caluSumMoney( $scope.selectRateIncomeDatas); //计算选中行的总金额 });//单元格进入事件 gridApi.edit.on.beginCellEdit($scope,function(row,column){$scope.oldValue = row[column.name];});//编辑单元格离开的事件 gridApi.edit.on.afterCellEdit($scope,function(row,column){//当值发生变化时修改if($scope.oldValue!=row[column.name]){}});};
注意点：
（1）Excel导出，中文不乱码的设置，添加属性： 例如：
exporterCsvFilename:"运单报表"+new Date().getTime()+".csv",exporterOlderExcelCompatibility:true, //不使用UTF-8编码
（2）其中Grid中的列属性columnDefs可以动态加载，例如：
statisticsReportService.buildWayBillReportColumns().success(function(columns) {hideLoading();$scope.wayBillReportGrid.columnDefs = columns; //动态的赋值给列属性//动态绑定行颜色$.each(columns,function(i,column){column.cellClass = cellClassJobFun; });$scope.wayBillReportStatistical();});
（3）清除已选中的行，操作方法，如下：
//设置选中的行为0$scope.rateIncomeGridApi.selection.clearSelectedRows();
（4）
2、angular.ui.tree 树形tree技术
HTML页面代码：【控制菜单的收缩性】
<div ui-tree="treeOptions" id="tree-root"><ol ui-tree-nodes="" ng-model="subjectTreeList"><li ng-repeat="node in subjectTreeList" ui-tree-node ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li></ol></div><!--子模板部分--><script type="text/ng-template" id="nodes_renderer.html"><div ui-tree-handle class="tree-node tree-node-content"><a class="btn btn-success btn-xs" ng-if="node.childSubjectSize && node.childSubjectSize > 0" data-nodrag ng-click="toggle(this)"><span class="glyphicon"ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"></span></a><span ng-if="node.subjectAlias">{{node.subjectCode}} : {{node.subjectAlias}}</span><span ng-if="!node.subjectAlias">{{node.subjectCode}} : {{node.subjectName}}</span><span><a ng-show="node.subjectGrade>-1" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="removeSubItem(this)"><spanclass="glyphicon glyphicon-remove"></span></a><a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><spanclass="glyphicon glyphicon-plus"></span></a><a ng-show="node.subjectGrade>-1" class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="editSubItem(this)" style="margin-right: 8px;"><spanclass="glyphicon glyphicon-edit"></span></a></span></div><ol ui-tree-nodes="" ng-model="node.childFinanceSubjects" ng-class="{hidden: collapsed}" style="padding-left:29px;"><li ng-show="node.collapsed" ng-repeat="node in node.childFinanceSubjects" ui-tree-node ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li><li ng-show="!node.collapsed" ng-repeat="node in node.childFinanceSubjects" ui-tree-node data-collapsed="true" data-expand-on-hover="true" ng-include="'nodes_renderer.html'" ng-show="visible(node)"></li></ol></script>
JS代码部分：
数据源：
$scope.getTreeList=function(){ loadingPage();financeSubjectService.findAllFinanSubject2($scope.form).success(function(data){$scope.allData=data.result;//查询树 $scope.subjectTreeList=[]; var subjectList=[];if(data.result["-1"] && data.result["-1"].length>0){$.each(data.result["-1"],function(j,obj){//$scope.initSortNode(obj);subjectList.push(obj);});}var nodeList=$scope.sortNode(subjectList);//创建根节点 var root={}; root.subjectName="财务科目"; root.subjectGrade=-1; root.subjectCode='000'; root.subjectType='PAYINCOME';root.childSubjectSize=nodeList.length;root.childFinanceSubjects=nodeList; $scope.subjectTreeList.push(root); $scope.treeOptions.data=$scope.subjectTreeList; hideLoading();});};
tree结构的控制：
$scope.treeOptions = { //回调函数beforeDrop : function (e) {//拖曳节点下降时候调用的函数 },accept: function(sourceNodeScope, destNodesScope, destIndex) {return true;},removed:function(node){},dropped:function(event){},dragStart:function(event){},dragMove:function(event){},dragStop:function(event){},beforeDrag:function(sourceNodeScope){ //拖曳之前检查节点 },toggle:function(collapsed, sourceNodeScope){if(!collapsed && sourceNodeScope.$modelValue.financeSubjectUuid){loadingPage();if($scope.allData){sourceNodeScope.$modelValue.childFinanceSubjects=$scope.sortNode($scope.allData[sourceNodeScope.$modelValue.financeSubjectUuid]);hideLoading();}}}};
注意点： 可以在toggle中控制节点的延迟加载。
