上节回顾

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

本节代码获取

如果已经 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');};...

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

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

 返回 打印输出
    
    
    
     
        
      
            
       
                
        
         [类别代码] { {item.kindCode}}
         [类别名称] { {item.kindName}}
        
                
        
                
        
{ {item.price}} 元
                
        
         
        
            
       
                    
      
    
     
    

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

检视浏览器呈现

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

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

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

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

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

附：Sass 作为参考，就不详述了 :)

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

结束

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