AngularJS 实践：应用开发 :: ENA13 价格条码-(最后一里)
作者:神秘网友
发布时间:2020-09-07 20:35:45
AngularJS 实践：应用开发 :: ENA13 价格条码-(最后一里)
AngularJS 实践：应用开发 :: ENA13 价格条码-(最后一里)上节回顾 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'
});
...
-
front.preview申明视图路由状态 -
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;}
}
结束
没有结束，一切才刚刚开始，匠人精神，学无止境 :)