引入资源同上一篇随笔第一步，不再赘述，
第二步：构建应用
html 标签上 加指令：ng-app="app"
body 标签上 加指令：ng-controller="AppController"
html代码:
<div class="pure-u-1-1" style="margin-bottom: 40px" > <h3>文件队列</h3> <p>队列长度: {{ uploader.queue.length }}</p> <table class="table"> <thead> <tr> <th width="50%">文件名称</th> <th ng-show="uploader.isHTML5">大小</th> <th ng-show="uploader.isHTML5">进度</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="item in uploader.queue"> <td><strong>{{ item.file.name }}</strong></td> <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td> <td ng-show="uploader.isHTML5"> <div class="progress" style="margin-bottom: 0;"> <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div> </div> </td> <td class="text-center"> <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span> <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span> <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span> </td> <td nowrap> <!--<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">--> <!--<span class="glyphicon glyphicon-upload"></span> 上传--> <!--</button>--> <!--<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading"> <span class="glyphicon glyphicon-ban-circle"></span> 取消 </button>--> <button type="button" class="btn btn-danger btn-xs" ng-click="removeFile(item)"> <span class="glyphicon glyphicon-trash"></span> 删除 </button> </td> </tr> </tbody> </table> <div> <div> 队列总进度: <div class="progress" style=""> <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div> </div> </div> </div> </div>
