Angular----安置物流项目前端框架经验总结

一、架构方面

（一） 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-pagination
                ui-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才能赋值totalItems
            enableRowSelection : true,
            enableSelectAll : true,
            enableSorting: true,
            enableCellEditOnFocus:true,//单元格指令
            enableRowSelection:false,
            columnDefs : [
                {name : "rateNme",displayName : '费率名称' ,width : "",enableCellEdit : false,cellClass:cellRateRow,cellTemplate:'<div class="rateOption_{{row.entity.rateUuid}}">{{row.entity.rateNme}}</div>'},
                {name : "money",displayName : '实际金额' ,width : "",type:'number',enableCellEdit : true,cellClass: cellClassOrderFun},
                {name : 'unit',displayName : '单位' ,width : "",type:'number',enableCellEdit : false,cellFilter:"rateUnitFilter"},
                {name : "taxThan",displayName : '纳税比' ,width : "",type:'number',enableCellEdit : true},
                {name : 'remarks',displayName :'费用备注',width : "",enableCellEdit : true},
                {name : 'settlementStatus',displayName : '审核状态',width : "",cellFilter : 'settlementStatus',enableCellEdit : false},
                {name : 'isHaveTicket',displayName :'票',width : "",enableCellEdit : false,cellFilter:"isOneOrZeroFilter"},
                {name : 'serialNo',displayName :'序号',type:'number',width : "",enableCellEdit : true ,sort: { direction: uiGridConstants.ASC, priority:  } },
                ]};
    // 将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)"><span
            class="glyphicon glyphicon-remove"></span></a>
        <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span
             class="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;"><span
            class="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>){
                $.each(data.result["-1"],function(j,obj){
                    //$scope.initSortNode(obj);
                    subjectList.push(obj);
                });
            }
            var nodeList=$scope.sortNode(subjectList);
            //创建根节点
            var root={};
            root.subjectName="财务科目";
            root.subjectGrade=-;
            root.subjectCode='';
            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中控制节点的延迟加载。