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

AngularJS 可能大家都在用了。我从以前的一项目中提取了一个功能模块并重新组织了一下代码成为一个小应用与大家一起学习交流 AngularJS 的应用开发以及一些工具的使用，比如：bower, gulp等。

这个小应用的功能是让用户输入一些必要信息，然后生成一个相应的 _价格条码_。 这种价格条码常用于商业零售环境中，一些生鲜类商品按计量计重的方式进行销售时销售前台通过扫码识别其品类和价格，辅助其计价结算。

• 价格条码－借助 EAN13 条码格式，将品类和价格编入条码
• ENA13 一种条码编码格式

Quick View

$ gulp serve
[11:44:39] Using gulpfile ~/Workshop/weblive/pricecode/gulpfile.js
[11:44:39] Starting 'styles'...
[11:44:41] Starting 'scripts'...
[11:44:41] Starting 'fonts'...
[11:44:41] Finished 'styles' after 2.43 s
[11:44:41] Finished 'scripts' after 433 ms
[11:44:42] Finished 'fonts' after 686 ms
[11:44:42] Starting 'serve'...
[11:44:42] Finished 'serve' after 63 ms
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:9000
    External: http://192.168.112.75:9000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.112.75:3001
 ---------------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: .

预备知识

1. AngularJS 开发的一些基本知识，比如：Template, Directives, Model, Controllers, Scopes, Data Binding 等。 请参考 Conceptual Overview
2. Gulp，运行 NodeJS 环境下的一种类似于 Grunt 的开发工作流构建工具。注：类似的还有 Java 中常用的 Ant 或者 Maven
3. bower 常用的 web 开发的包依赖管理工具
4. npm NodeJS 下的包依赖管理工具
5. sass 一种 CSS 的模板语言

环境准备

NodeJS & NPM

$ node -v
v0.12.0
$ npm -v
3.4.1

Bower

$ bower -v
1.7.7

代码编辑工具

选自己常用吧。比如：Editplus, Note++, Sublime Text等，个人偏好 Sublime Text

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