使用Yeoman搭建 AngularJS 应用 (9) —— 让我们搭建一个网页应用

原文地址：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并且看看浏览器，我们就可以重新排序列表了