AngularJS 实践：应用开发 :: ENA13 价格条码-(五)

上节我们完成了基本用户交互工作，这一个我们将要完成用户表单输入，和数据列表等。相关联 AngularJS 的核心知识包括：Scopes 对象(What are Scopes)，Data Binding，Controller以及 UI Router State Manager等。
上节回顾 AngularJS 实践：应用开发 :: ENA13 价格条码-(四)

本节代码获取

如果已经 Clone 了代码库，你只需要执行 git checkout codetrip-2

$ git clone https://code.aliyun.com/passpile/pricebarcode.git
$ git checkout codetrip-2

控制器 FrontCtrl

在这个控制器我们要完成这几个任务：

1. 收集用户的输入信息：前缀码，品类编号（分类编号）和名称，，价格。
2. 根据用户的输入信息生成相应的 EAN13 条形码的十进制数字序列。(二进制的转换以及图形生成，我们将借助于 AngularJS 的插件 angluar-barcode完成。这个插件在前面我们已经包含了。"angular-barcode": "^0.0.4")
3. 将用户输入的信息相应的EAN13 条形码的十进制数字序列放入列表中，用户可以添加或移除列表中的条目
4. 提供［预览］操作，让用户预览上述列表中的条目所对应的条形码。

scripts/route.js

...
.controller('FrontCtrl',function($state,$scope,ean13gen){
    $scope.frontHeading = 'ENA13 价格条码生成器说明';
    $scope.priceCodeItems = [];
    $scope.prefix = '26';
    //1. 收集用户的输入信息：前缀码，品类编号（分类编号）和名称，，价格。
    $scope.genCode = function(prefix,kindCode,kindName,price){
        var item = {prefix:prefix,kindCode:kindCode,kindName:kindName,price:price};
        //2. 生成相应的 EAN13 条形码的十进制数字序列
        item.priceCode = ean13gen(item);
        //3. EAN13 条形码的十进制数字序列放入列表中
        $scope.priceCodeItems.push(item);
    };
    $scope.remove=function(idx){
        //3. 用户可以除列表中的条目
        $scope.priceCodeItems=_.remove($scope.priceCodeItems,function(n){
                return n === idx;
             });
    };
    //4. 提供［预览］操作，让用户预览上述列表中的条目所对应的条形码
    $scope.preview=function(){
        // go preview
    };
})
...

借助 Scopes 对象，为视图 front.html 提供数据和操作绑定。例如：ng-model="kindCode", ng-click="genCode(prefix,kindCode,kindName,price)" 等( Directives )。

ean13gen 为生成 EAN13 条形码的十进制数字序列的功能模块。是一个自定义的Factory Recipe 并通过 DI 完成模块服务或功能连接组合。
scripts/route.js

...
.factory('ean13gen',function(){
    function checksum(number){
        var result = 0;
        for(var i=0;i<12;i+=2){result+=parseInt(number[i]);}
        for(var i=1;i<12;i+=2){result+=parseInt(number[i])*3;}
        return (10 - (result % 10)) % 10;
    }
    return function(options){
        var pricetmpl = ['0','0','0','0','0','0'];
        var _strp = options.price+'';
        _strp=_strp.replace('.','');
        var diff = 6-_strp.length;
        for(var i=0;i<_strp.length;i++,diff++){
            pricetmpl[diff]=_strp[i];
        }
        var strCode= options.prefix+options.kindCode+pricetmpl.join('');
        return strCode+checksum(strCode);
    };
})
...

一般来说这些服务模块应单独写入一个服务模块文件，当前暂且编入同一个文件，便于阅读

检视用户表单输入及页面效果

如果没有启动 browser sync 请用下列命令进行启动

$ cd ~/webshop/pricebarcode
$ gulp serve

如果出现问题，请通过 Chrome Developer Tools 进行排查

本节总结

1. 我们基本完成了这个小应用的主要功能。下一节只要借助angular-barcode插件完成预览，并制作一个简单的打印就可以完工了。
2. 这里未涉及 AngularJS 的单元测试。有兴趣的同学请自行参考Unit Testing
3. AngularJS 与 Gulp 是否适用于你的项目，请多斟酌。很多概念和模式对于有经验的开发者来说已经是很熟悉的了。至于使用 AngularJS 进行开发不过是一种新的体验罢了。
4. 就在编写这个系列博文的时候 AngularJS 2.0 已经进入 beta 版了。有兴趣的同学可以尝尝鲜。:)

待续...