账户系统前端小规范

为了后来的开发维护方便，在此写下账户系统前端部分的概述，包括所用框架，依赖，管理工具，命名规范，项目结构等，后面有时间也会总结下前端开发的规范。

所用框架

系统所用框架为angular1.3版本，为2016年之前主流版本，前端这几年涌现了太多框架，自己熟悉了这个版本后也要跟上时代的步伐，学习angular2等

依赖

angular参照Java搞出了依赖注入和指令，系统的依赖注入和个部分功能解释如下

ui-router

angular1.x 本身有ng-router，但是满足不了复杂的应用，系统采用的
依赖为ui-router，ui-router具体用法配置和其自带的指令会单独讲一下。

管理工具

包管理工具用了gulp，主要执行如下功能

css压缩

js压缩

注意，为了避免压缩时注入的部分被误识别为变量部分，从而导致替换，应写成数组格式的依赖注入，特别是系统采用的angular-ui的modal服务，在实例化时也要写成数组格式的注入，分别如下

1.控制器初始化

 var appModule=angular.module("app",[])
     appModule.controller("controllerName",
                 ["dev1","dev2",function(dev1,dev2){
   //controller body here
}])

2.举例modal模态框的

 var modalInstance =$modal.open({
//配置部分,只显示modal控制器配置，我懒
controller:modalController
})
//by the way 这里可以写modalInstance的promise
//初始化modal的控制器，采用数组格式的依赖注入
var modalController =["dev1","dev2",function(dev1,dev2){
}]

扯远了，那个modal的作用域独立，要resolve进来数据或方法

去注释去空格

图片压缩

命名规范

这里只针对本系统给出一定的规范

控制器js文件和模板html名字相同，参照ui-router的命名结构，并相应的将点替换为下短横,ui-sref指令的值命名如下
在如总模板页为app,其下的一级菜单为app.Level1NavName,一级菜单下的二级菜单为app.Level1NavName.level2NavName,可参考config.router.js文件的配置，三级相同命名。
相应的文件命名Level1NavName_level2NavName.js/html

其中Level1NavName和Level2NavName全系统唯一，注意路由配置的url属性，表现为URL层级

madal弹出框的templete命名为触发事件函数的名称，controller属性的名称命名为函数名加Ctrl，例如

 $scope.appRegisterEdit=function(row){
   var myrow=row.entity;
   console.log(myrow);
   var modalInstance = $modal.open({
   templateUrl: 'appRegisterEdit.html',
   controller: appRegisterEditCtrl,
   resolve: {
    items: function () {
      return myrow;
    },
    shuaxing: function(){
      return $scope.shuaxing;
    },
    pop:function(){
      return $scope.pop;
    }
   }
 });
    modalInstance.result.then(function () {
}, function () {
  $scope.shuaxing();
});
}

项目结构