原文地址：http://yeoman.io/codelab/install-packages.html
列出当前程序包
我们现在查看一下我们已经安装的程序包，输入下面的命令
bower list
查找程序包
为了核实AngularUI程序包是有效的，使用Bower来查找 "angular-ui-sortable"
bower search angular-ui-sortable
这个是一个 "angular-ui-sortable" 的结果，所以让我们安装JQuery UI和angular-ui-sortable
安装程序包
使用Bower来安装 "angular-ui-sortable" 和 “jquery-ui”
bower install --save angular-ui-sortable
bower install --save jquery-ui
这个 --save选项会更新bower.json文件中的angular-ui-sortable和jquery-ui。
确认安装
让我们看看bower_components来检查以上的操作，你可以看到 "jquery-ui" 和 "angular-ui-sortable" 安装在这个文件夹中
排列todos列表
引用新的依赖文件，必须将文件添加到index.html。你可以手动的添加AugularUI Sortable和jQeuryUI文件，但是Yeoman可以自动做这些。
使用Ctrl + C来退出当前的服务
再次输入 grunt server
你将看到index.html中script节点底部添加了jquery-ui/ui/jquery-ui.js和angular-ui-sortable/sortable.js
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-sortable/sortable.js"></script>
<!-- endbower -->
<!-- endbuild -->
为了使用Sortable模块，你必须更新scripts/app.js，现在看看起来如下面所示
angular
.module('mytodoApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
在ngTouch之后添加ui.sortable
angular
.module('mytodoApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.sortable'
])
最后，我们在main.html添加ui-sortable指令
<!-- Todos list -->
<div ui-sortable ng-model="todos">
<p class="input-group" ng-repeat="todo in todos">
再次添加css类型让我们可以移动todo元素
<p class="input-group" ng-repeat="todo in todos" style="padding:5px 10px; cursor: move;">
全部的todo列表如下所示
<!-- Todos list -->
<div ui-sortable ng-model="todos">
<p class="input-group" ng-repeat="todo in todos" style="padding:5px 10px; cursor: move;">
<input type="text" ng-model="todo" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" ng-click="removeTodo($index)" aria-label="Remove">X</button>
</span>
</p>
</div>
再次运行grunt server并且看看浏览器，我们就可以重新排序列表了