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

在这一个节我将完成这个小应用。并且附加一个简单的 Fade In & Fade Out 效果。这个将涉及 angular-animate 模块插件和一些 Sass

本节代码获取

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

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

实现价格条形码预览功能

完善 FrontCtrl 的 $scope.preview 操作并添加 angular-barcode 模块依赖

scripts/route.js

'use strict';
angular.module('pbcodeApp',[...,'barcode',...
])
...
...
//4. 提供［预览］操作，让用户预览上述列表中的条目所对应的条形码
$scope.preview=function(){// 缓存列表数据$window.sessionStorage.setItem('priceCodeItems',angular.toJson($scope.priceCodeItems));// 调度视图路由状态$state.go('.preview');
};
...

添加状态管理下的视图路由 ( UI Routing )

scripts/route.js

...
.state('front.preview',{url: '/preview',templateUrl: 'preview.html',resolve:{'priceCodeItems':function($window){return angular.fromJson($window.sessionStorage.getItem('priceCodeItems'));}},controller: 'PreviewCtrl'});
...

1. front.preview 申明视图路由状态
2. resolve 为 PreviewCtrl 提供数据依赖注射引用 priceCodeItems

添加 PreviewCtrl 和 preview.html 视图

scripts/route.js

...
.controller('PreviewCtrl',function($scope,priceCodeItems){$scope.priceCodeItems = priceCodeItems;// 显示条码数字$scope.barcodeOpts={displayValue: true},$scope.printout = function(){// to print};
})
...

preview.html

<a role="button" class="btn btn-default" ui-sref="^"><i class="fa fa-angle-left"></i> 返回</a>
<button type="button" class="btn btn-primary" ng-click="printout()"><i class="fa fa-print"></i> 打印输出</button>
<hr>
<div class="row"><div class="col-md-6 col-md-offset-2"><div class="panel panel-default" ng-repeat="item in priceCodeItems" ><div class="panel-body"><div><strong class="pull-right">[类别代码] {{item.kindCode}}</strong><strong>[类别名称] {{item.kindName}}</strong></div><hr><p><span style="font-size: 3em;padding-left:.9em;"><strong>{{item.price}} 元</strong></span></p><div class="center-block"><barcode type="ean" string="{{item.priceCode}}" options="barcodeOpts"></barcode></div></div></div></div></div>

<barcode type="ean" ... 为引用现成的 angular-barcode directive，注：引入模块依赖'barcode'

检视浏览器呈现

至此，我们完成了这个小应用

PreviewCtrl 的 $scope.printout 操作的编写就算是个练习吧，有兴趣的同学自由发挥吧

补充说明几个开发工作流指令

$ gulp #发布应用，将进行文件合并，代码压缩等
$ gulp serve:dist #预览发布过的应用
$ gulp styles #处理 Sass, autoprefixer等

如果有兴趣可以为我们的开发工作流增加 wiredep 工具

附：Sass 作为参考，就不详述了 :)
styles/main.scss

.view-container{position:relative;
}.view-frame {&.ng-enter, &.ng-leave {background:white;position: absolute;top:0;left:0;right:0;}&.ng-enter{animation:0.5s fade-in;z-index:100;}&.ng-enter{animation:0.5s fade-in;z-index:99;}
}
@keyframes fade-in{from{opacity: 0;}to{opacity: 1;}
}
@keyframes fade-out{from{opacity: 1;}to{opacity: 0;}
}

结束

没有结束，一切才刚刚开始，匠人精神，学无止境 :)