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

上一节我们完成了开发工作流工具和环境准备，这一节我们将进行渐进式应用编程。熟悉 AngularJS 开发的同学请跳过。

上一节参考: AngularJS 实践：应用开发 :: ENA13 价格条码-(二)

获取本节代码

https://code.aliyun.com/passpile/pricebarcode

添加 web 应用所依赖的 JavaScript, Stylesheet 引用

编辑 index.html

添加 bootstrap 和 font-awesome 的 CSS 库引用

添加 angularjs 的核心 js 以及一些插件：

angular-ui-router，angular-barcode，lodash，angular-touch(option)，angular-animate(option)

注：如果你现在处于 gulp serve 状态，则你每一次修改后的保存，将引起浏览器自动重新加载新的内容。

[BS] Serving files from: .
[BS] Reloading Browsers...

...
<!-- build:css(../) styles/vendor.min.css --><link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" /><link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
<!-- endbuild -->
...
...
<!-- build:js(../) scripts/vendor.min.js -->
<script src="/bower_components/lodash/lodash.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/bower_components/angular-barcode/dist/angular-barcode.js"></script>
<!-- endbuild -->

你可能会看到如下错误：

这是由于我们在前一节漏掉了一个 JavaScript 的依赖库。我将使用如下命令安装遗漏的 lodash。如果你现在处于 browser sync 状态下，你可以 Ctrl + C 退出 browser sync 状态。再执行下述命令，或新打开一个 Terminal 来执行。

$ cd ~/webshop
$ bower install lodash --save

--save 参数将使我们安装的依赖库记入 ~/webshop/bower.json 文件

例如

...
"dependencies": {...,...,"lodash": "^4.6.1"
},
...

安装完成后，如果你先前停止了 browser sync ，你可以回到项目目录 cd ~/webshop/pricebarcode 通过命令 gulp serve 开始 browser sync，这时 Chrome 会自动打开，你可检视到如下样本：

Hello AngularJS

编辑 `scripts/route.js` 添加如下代码：

//console.log('Hi, console')
'use strict';
angular.module('pbcodeApp',[])
.controller('GreetingCtrl',function($scope){$scope.greeting = 'Hello AngularJS!';
});

编辑 `index.html`，修改并添加如下代码：

<!DOCTYPE html>
<html ng-app="pbcodeApp">
...
...
<!--h1>It's Work</h1-->
<h1 ng-controller="GreetingCtrl">{{greeting}}</h1>
...
</html>

这几处代码涉及到了 AngularJS 的 MVC, Data Binding, 模块申明 pbcodeApp， Scoping 对象的使用，还有 Expression 的使用，由于篇幅有限请自行参考学习 AngularJS 或其它相关资料

Tip: 如果你有过 ASP, JSP&Servlet 等的开发经验，这些对你来说应该很熟悉(比如：Scoping 对象就有点类似于 JSP&Servlet 的 application scope, session scope, request scope等, 并且JSP&Servlet 的 EL Expression 和 JSTL 在AngularJS也有类似概念)，其差别在于一个(AngularJS)在浏览器中聚合呈现内容，另一个(ASP,JSP...)在服务器上聚合呈现内容

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