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`

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

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

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 进行排查

本节总结

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

待续...