前言：在Web开发中常常会遇到这样的情况，有些页面的下拉选项是固定不变的几个，比如：性别，一般有男、女、保密等。对于这样的情形我们一般在数据库中存储的是数字或者其对应的代码，如果是可维护的需要系统给出一些维护的界面，不断的对这些系统代码进行增删改的操作，如果是固定不变的，一般需要配置一下数据字典，下面我记录的这种方式就是在页面配置的一种方式。

1：示例演示文件的放置方式

2：SysCodeConfig.js文件，这个文件是系统代码配置的关键，也是变化的核心，这里可以配置自己的系统代码，系统代码只需要在第二部分进行添加就行了

/**

 * 1：模块声明部分——不需要改变

 */

var app = angular.module('sysCodeConfigModule',[]);

var sysCodeCon={},sysCode;

/**

 * 2：配置自己的代码部分，需要自己配置对应的内容以及存入对应的变量中，常量仅用于翻译信息，请勿改变，另外，命名采用全部大写多个单词使用下划线分割的形式，请自行注释一下

 */

//性别类型

sysCode =[];

sysCode=[{"id_":1,"name_":"男"},{"id_":2,"name_":"女"},{"id_":3,"name_":"保密"}];

sysCodeCon.SEX_TYPE = sysCode;

/*操作类型，添加新的系统代码也是非常简单的哟！

sysCode =[];

sysCode=[{"id_":"A","name_":"添加"},{"id_":"D","name_":"删除"},{"id_":"U","name_":"修改"}];

sysCodeCon.OPERATION_TYPE = sysCode;

*/

/**

 * 3：将配置的常量配置为模块的常量，以便在对应的模块中使用——不需改变

 */

app.constant('SYS_CODE_CON',sysCodeCon);

3：SysCodeTranslate.js文件，翻译系统代码的模块，这个文件不需要任何的改动，其作用非常简单——根据代码类型和代码，将代码翻译成文字用于页面展现

/**

 * 1：根据系统代码的ID和类型将对应的代码翻译为对应的名称，用于在页面详情以及列表中使用——不需要改变

 */

var app=angular.module("sysCodeTranslateModule", ['sysCodeConfigModule']);

app.factory('sysCodeTranslateFactory',function(SYS_CODE_CON) {

    return{

        //系统代码翻译

        codeTranslate:function(code,type)

        {

            if(type)

            {

                var sysCodeCon=SYS_CODE_CON,typeList=sysCodeCon[type],i=0;

                if(typeList)

                {

                    for(;i<typeList.length;i++)

                    {

                        if(code==typeList[i].id_){return typeList[i].name_ }

                    }

                }

            }

            return code;

        }

    };

}); 

4：demo.html文件，这里就是一个简单的演示，具体到实际的项目一定比这复杂的多，但是对于我们要描述的代码展现和翻译是怎么回事，还是足够的

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <!-- 引入angularJS框架文件 -->

        <script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

        <!-- 引入系统代码配置文件 -->

        <script type="text/javascript" src="SysCodeConfig.js"></script>

        <!-- 引入系统代码翻译文件 -->

        <script type="text/javascript" src="SysCodeTranslate.js"></script>

        <script type="text/javascript">

            //声明demo的模块及其依赖的模块

            var app = angular.module('demoModule', ['sysCodeConfigModule' , 'sysCodeTranslateModule']);

            //在demo模块中创建一个控制器，并且引入其依赖的模块中服务

            app.controller('demoController', function($scope , SYS_CODE_CON , sysCodeTranslateFactory) {

                //将系统代码配置、翻译相关的服务挂在当前的作用域变量上

                $scope.sysCode={'con':SYS_CODE_CON,'translate':sysCodeTranslateFactory};

                //打印系统代码先关的对象

                console.info("$scope.sysCode is ======",$scope.sysCode);

                //声明用户对象，用于双向数据绑定、系统代码翻译的演示

                $scope.user={};

            });

        </script>

    </head>

    <body bgcolor="AliceBlue" ng-app="demoModule" ng-controller="demoController" align="center">

          <!-- 使用配置的系统代码，多用在添加、修改的页面 -->

          <select ng-options="s.id_ as s.name_ for s in sysCode.con.SEX_TYPE" ng-model="user.sex">

              <option value="">请选择</option>

          </select>

          <!-- 翻译配置的系统代码，多用在列表查询、详情查询页面 -->

          <p ng-bind="sysCode.translate.codeTranslate(user.sex,'SEX_TYPE')"></p>

    </body>

</html>

5：为了更容易理解我们的例子，下面我截取了几张代码演示的图例

5-1：首次进入页面的图例，使用了AngularJS的”ng-options“指令

5-2：展示系统代码的配置集合

5-3：利用AngularJS的数据双向绑定，展示了一下系统代码翻译的功能

6：小结

示例代码比较简单，不过在Web开发中常常会使用的到，所以，这里小记一笔以备后用。

当然，这里仅仅针对系统代码的控制提供了一种思路，这种思路是我认为是可行的，针对系统代码的处理有如下一些情况，如果是可变的应该提供相应的维护页面，存储在数据库中，如果是不可变的也可以存储在数据库中（需要初始化基础数据）、不过存储在服务器的某个文件中对用户不可见也行，如果对于用户可见（习惯按F12的用户）也没关系，那么存储在前端的JS文件中也是可以的。

为什么这样存储哪？直接存储汉字不也行吗？

直接存储汉字也是可以的，不过没有存储数字或者代码好，存储数字或者代码相对于存储汉字有如下的几点好处：

1：节省存储空间

2：能提高数据库查询的效率

3：使编程更简单，不然汉字多了，会多写许多的代码，汉字如果需要变换，使用汉字的维护成本就高了去啦（可能前端、后端、数据库视图中都需要做出更改）！

AngularJS-系统代码的配置和翻译的更多相关文章

  1. AngularJS PhoneCat代码分析

    转载自:http://www.tuicool.com/articles/ym6Jfen AngularJS 官方网站提供了一个用于学习的示例项目:PhoneCat.这是一个Web应用,用户可以浏览一些 ...

  2. 基于DRL和TORCS的自动驾驶仿真系统——之环境配置

    基于DRL和TORCS的自动驾驶仿真系统 --之环境配置 玩TORCS和DRL差不多有一整年了,开始的摸爬滚打都是不断碰壁过来的,近来在参与CMU的DRL10703课程学习和翻译志愿者工作,也将自己以 ...

  3. Windows系统通用安全配置基线

    一:共享账号检查 配置名称:账号分配检查,避免共享账号存在 配置要求: 1.系统需按照实际用户分配账号: 2.根据系统的使用需求,设定不同的账户和账户组,包括管理员用户,数据库用户,审计用户,来宾用户 ...

  4. Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间

    Django---路由系统,URLconf的配置,正则表达式的说明(位置参数),分组命名(捕获关键字参数),传递额外的参数给视图,命名url和url的反向解析,url名称空间 一丶URLconf配置 ...

  5. 2021年-在windwos下如何用TOMACT发布一个系统（完整配置案列）

    2021年新年第一篇:博主@李宗盛-关于在Windwos下使用TOMCAT发布一个系统的完成配置案列. 之前写过关于TOMCAT的小篇幅文档,比较分散,可以作为对照与参考. 此篇整合在一起,一篇文档写 ...

  6. Oracle 11g客户端在Linux系统上的配置步骤详解

    Oracle 11g客户端在Linux系统上的配置步骤详解 2011-07-26 10:47 newhappy2008 CSDN博客 字号:T | T 本文我们主要介绍了Oracle 11g客户端在L ...

  7. Linux系统网络基本配置

    1. ifconfig命令的使用: (1)查看所有网卡基本信息:ifconfig (2)查看特定网卡信息:ifconfig (网卡名,如:eht0) (3)停止网卡设备服务:ifconfig (网卡名 ...

  8. 在Ubuntu 12.04系统中安装配置OpenCV 2.4.3的方法

    在Ubuntu 12.04系统中安装配置OpenCV 2.4.3的方法   对于,在Linux系统下做图像识别,不像在windows下面我们可以利用Matlab中的图像工具箱来实现,我们必须借助Ope ...

  9. Entity Framework入门教程（18)---EF6中基于代码进行配置方式

    EF6中基于代码进行配置方式 我们以前对EF进行配置时是在app.config/web.config下的<entityframework>节点下进行配置的,EF6引进了基于代码的配置方法. ...

随机推荐

  1. URL Scheme APP跳转safari以及跳回APP

    上图 : 在plist文件里面设置. URL identifier 一般为反域名+项目名称 (尽可能保证少重复) URL Schemes是一个数组.一个APP可以添加多个.该参数为跳转时使用的标识. ...

  2. 对tomcat中使用反射加载类的理解

    public void init() throws Exception { initClassLoaders(); //加载一下jar包和类 Thread.currentThread().setCon ...

  3. Single Number

    Given an array of integers, every element appears twice except for one. Find that single one.Your al ...

  4. Ext.Net 学习随笔 003 Panel基本使用

    Panel() 1.使用Content和Html属性设置Panel内容 前台View代码 @(X.Panel() .ID("panel1") .Width() .Height() ...

  5. pwnable echo1

    最近忙的好久没有更新了,有空把之前拿来练手的CTF pwn题逐渐整理一下放出来 题目是 linux 64位程序 ,流程很简单,大致思路就是先把一个跳转的机器指令写进name的地址,然后溢出覆盖eip, ...

  6. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  7. LoadRunner 11 安装及破解

    LoadRunner 11 安装及破解   前提条件: 内存:2G,硬盘空闲空间10G,安装完成后实际只占不到2G 支持winXP  SP3;32位与64位win7浏览器支持IE6-8,IE9,fir ...

  8. 浅谈pads的铜（灌铜）

    在pads中,先按照<pads实战攻略与高速PCB设计>中所说分类,大面积的灌铜有三个重要的概念: (1)copper(铜箔,静态铜): (2)copper pour(覆铜,动态铜): ( ...

  9. hibernate:Named query not known: findXXXX or XXXX is not mapped

    .hbm.xml文件所放的位置怎么看怎么都在spring配置的扫描路径中,就是会出现标题所示错误,查看log日志,的确也没发现XXXX被mapped的记录~ 参考解决方案: 在eclipse导出jar ...

  10. 基于Netty的私有协议栈的开发

    基于Netty的私有协议栈的开发 书是人类进步的阶梯,每读一本书都使自己得以提升,以前看书都是看了就看了,当时感觉受益匪浅,时间一长就又还回到书本了!所以说,好记性不如烂笔头,以后每次看完一本书都写一 ...