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'
    });
...

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;}
}

结束

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