使用Yeoman快速启动AngularJS项目开发

前言

博客迁移到了BAE上，http://owenchen.duapp.com/，以后的文章会首发在自己的博客上，随后在博客园发布。

很久没有写文章了，一是项目比较忙，二来自己在尝试一些互联网新的产品，以微信平台开发为主，看看能不能挣点零花钱以缓解目前的经济压力，也顺便了解和学习一下为什么这东西这么火。最终钱还没挣到，到把自己累个半死。当然收获也是有的，发现了一些挣钱的路子，以后有时间有机会尝试尝试。也在短时间内玩了不少东西，比如PHP的mvc框架thinkphp，比如如何使用jQuery fileupload上传、接收存放文件，以及百度的ueditor的使用。这些都是不错的互联网工具，以后兴许会用到。

简介

好了，切入今天的正题，使用Yeoman快速启动AngularJS项目的开发。这里出现了两个新词，AngularJS和Yeoman，而这些也正是我最近几个月看的最多的东西。

AngularJS我就不多说了，我跟别人介绍的时候都是这样说的：“我觉得这是当下最火，最有前途的前端框架。” 说这话我也是有理由的，从之前看到的美国AngularJS的职位增长速度，以及StackOverflow上Angular的讨论统计，以及自己所在Angular群里每天几千条的对话，都可以感觉到，Angualr很快就会成为风靡的前端框架。或许jQuery那波爆发我没有赶上，但我绝不能错过AngularJS。

YEOMAN，Moden workflows for modern webapps，现代web应用开发的工作流程。Yeoman是一个web应用开发部署的工具，但同时它也规范了现代web应用开发流程。它是一组工具（Yo，Grunt，Bower）的组合，也是一套让web开发过程更加规范轻松的最佳实践。我的理解Yeoman提供给前端开发的工呢功能就如同JAVAEE的ant和maven。

好了，不扯概念，不讲大话。我们来看看，Yeoman到底能做什么。其实Yeoman是由三个工具组成的，yo（脚手架），grunt（build工具），和Bower（package管理）：

• Yo 新应用的脚手架，编写你自己的grunt配置文件，并且获取你项目build过程当中可能使用到的grunt tasks。
• Grunt 主要用来build，预览和测试你的项目，已经内置了很多由Yeoman团队和grunt-contrib提供的task。功能就是前端的ant。
• Bower 主要用于依赖管理，开发人员不需要手动去管理和下载相应的包，以及处理他们之间的依赖关系。我的理解，就是前端的maven。

接下来的能容主要参考（准确的说翻译）了下面这篇文章，看英文的同学可以直接跳过去看原版的。当然，我会在翻译过程中加入自己的实践的内容和想法。
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

正式开始我们的项目

这次AngualrJS教程中会包括如下的内容：
1、使用Yeo搭建一个AngularJS项目的基本框架
2、使用Grunt加速项目开发和执行相关的任务
3、使用Bower来添加第三方的插件/框架
4、对我们AngularJS添加内容

环境要求：
在开始和运行我们的项目之前，你最好已经有如下的一些知识储备和环境的准备：
1、了解控制台和命令行的一些基本知识
2、安装了NodeJS和NPM
3、基础的JS，CSS和HTML知识

安装Yeoman！

好了，让我们从安装Yeoman开始我们的项目。在命令行输入以下的命令，来安装Yeoman，包括yo，Grunt，和Bower。
npm install -g yo grunt-cli bower

命令执行完之后我们就拥有了yeoman的强大工具包。下面会依次介绍和使用这些工具来进行项目的搭建。

Yo

Yo是用来生成项目的脚手架。它会迅速帮助我们创建基本的目录结构，配置文件等让你迅速有一个可用的项目基础。当然除了最基础的目录项目结构之外，还有一些非常强大的定制化的生成器，来为你搭建基于特定框架的项目结构。接下来我们会使用AngularJS的生成器来为我们生成AngularJS的项目结构。

在使用AngularJS的生成器之前，我们需要安装它。运行下面的脚本：

npm install -g generator-angular

然后使用它来生成AngularJS应用的基础结构。我们来到一个空的项目目录中，我用的项目名字叫 YeoAngular。在目录中运行下面的命令：
yo angular

生成器会一问问题的方式来帮你设置项目中可能会使用的一些其他框架或者库，如bootstrap，ngResource等。

这里，我们在项目中需要使用bootstrap，故回答Y。后面的对ngResource、ngCookie等插件的询问使用了类似图形化的方式。在回答完所有的问题之后，yo就开始帮助我们创建、下载和配置项目。需要花一点时间，尤其是在网络不好的情况下。但是在完成之后，你将得到一个满意的结果。最佳实践的目录结构，配置文件，以及所有需要的依赖包。

我们一起来过一下这些文件（夹）
app
这个目录存放了你的项目的静态资源，html,css,javascrip。这个目录也是AngularJS开发最主要的场所。
package.json
相信使用过node的同学都会很熟悉，pakcage.json帮助npm去识别和认定我们项目需要的依赖包。里面也可以包含项目其他的元数据，如项目描述，项目版本等。
node_modules
这里存放了项目所要用到的所有 node模块。
Gruntfile.js
这个文件是提供给Grunt使用的，它是一个js文件，负责配置项目中要使用的Grunt task或者插件。举例来说，在gruntfile中，你可能去指定项目使用Uglify插件，并且希望build的时候在一个特定的目录中去运行uglify任务。这些就需要在gruntfile中配置。可以看作是ant的build.xml文件。后面会有更多详细的介绍。
Bower.js
Bower.js用来告诉Bower项目中的包依赖关系，以及一些元数据。可以看作是maven的pom.xml文件。后面会有详细介绍。
Karma相关文件
Karma是一个测试框架，在我们Angular项目中，会使用它进行一些测试的工作。
在ls -a之后，我们还能看到一些隐藏的文件：

我们稍微提一下：
.gitattributes,.gitignore
使用git的同学应该不陌生，都是git相关的配置文件。ignore文件用的也较多，比如对于node_modules中的文件，可以加入ignore列表，就没有必要把这么多的模块文件放到代码库，可以让开发人员使用npm自行下载。
.jshintrc
使用jshint相关的配置，检查js代码规范和语法上的错误。
眼睛亮的同学肯定发现，它连404页面都帮我们创建好了，那该是多么周到啊。

怎么样，Yo已经帮我们把一个AngularJS应用的基础全部搭建好了，剩下的就是往里面添加内容了。一旦你对这些生成的结构熟悉了之后，相信你会更加爱上这个工具。因为它提供的都是业界最佳的结构和开发模式。

Bower——web应用的包管理器

Bower帮助我们迅速找到并且安装我们想要的CSS框架，javascript库，而我们要做的只是输入几个简单的命令。
首先我们看一下bower.js文件里的内容：

[javascript]
{
  "name": "YeoAngular",
  "version": "0.0.0",
  "dependencies": {
    "angular": "~1.0.7",
    "json3": "~3.2.4",
    "jquery": "~1.9.1",
    "bootstrap-sass": "~2.3.1",
    "es5-shim": "~2.0.8",
    "angular-resource": "~1.0.7",
    "angular-cookies": "~1.0.7"
  },
  "devDependencies": {
    "angular-mocks": "~1.0.7",
    "angular-scenario": "~1.0.7"
  }
}
[/javascript]

从Bower的文件中我们可以到清楚的看到我们应用的依赖关系。上面已有的东西其实是在yo generate的时候调用Bower帮我们下载的。接下来我们要手动调用Bower去加入我们想要的另外的库：Angular UI。Angular UI是Angular实现的一套Bootstrap组件，包含了手风琴，日期选择起，轮播等常用控件。接下来我们运行下面的命令来安装Angular UI。

bower install angular-bootstrap --save

--save的参数告诉Bower在bower.json文件中添加对这个组件的依赖。于是我们的bower文件中就多了下面的这一行："angular-bootstrap": "~0.6.0"

就是这简单，你可以轻松的添加任何你想要的前端框架。

Angular

终于到的Angular的代码部分了，不过今天这篇文章我不准备详细的介绍AngularJS相关的知识点，重点还是放在Yeoman搭建Angular项目的基础架构上。让大家能够迅速的开始一个Angular项目，后面再写几篇Angular特点的专题，一点点深入。

我们来看一下Yeoman Angular generator帮我们生成好的东西：一个module，一个controller和一个view。

Module：app/scripts/app.js

这里首先定义了一个叫YeoAngularApp的module，并且配置了一些路由的信息。针对路由，后面会在介绍AngularJS的文章中详细介绍，这里简单提一下，就是对特定的url配置相应的controller和template。有点像javaee中的web.xml中配置的servlet-mapping。

Controller：app/script/controllers/main.js

这里为YeoAngularApp模块配置了一个叫“MainCtrl”的controller，并且在这个controller中设置了一个名叫awesomeThings的变量数组。后面在view中会使用到。

View：app/views/main.html

view中是大家熟悉的html代码片段，只是在代码中我们加入了一些Angular特有的标签和属性。 主要在第五行代码中：

[html]
<li ng-repeat="thing in awesomeThings">{{thing}}</li>
[/html]

这里用到了ng-repeat的指令，以及双花括号的表示方式。ng-repeat大家从名字里可以看出应该是遍历。那这句话的意思就是，遍历aswesomeThings数组中的元素，赋值给thing变量，并以显示在li标签里。

上面的几个文件已经基本展示了Angular的MVC模式相关的内容：
View：main.html中定义的页面的显示
Controller：main.js中定义的MainCtr模块
Model：MainCtrl中定义的awesomeThings数组数据。

下面我们来看一下Yeoman为我们生成的这些文件的运行情况。Grunt作为一个功能丰富的打包、测试和部署工具，为我们提供了非常方便的查看预览项目的方式。
运行命令：grunt server
它会帮我们打开一个浏览器，并在浏览器中显示我们应用的页面。

Grunt
Grunt是一个强大的功能丰富的javascript任务执行工具。它帮助我们自动运行我们设定的任务，如便宜coffeescript，压缩css，代码检查等。在我们开发和部署应用过程中的所有任务都可以由Grunt帮我们完成。对于开发人员来说，它会实时监控我们对代码的改动，帮助我们自动更新页面的内容。如果你在配置文件中配置了压缩、打包、测试等任务，它都可以在你代码修改的同时帮你自动运行。这样你就随时随地测试和查看自己代码的改动。

实时刷新

我们试着在main.js中的awesomeThings添加一些新的条目，在保存之后，可以很快发现页面上的内容也自动更新了。这省去了很多前端开发手动刷新查看更新的操作。

测试

前端代码的测试一直是一个非常头疼的事情。很多项目中，大家都想对前端代码，尤其是js代码进行单元测试，对于页面的内容页希望有一些自动化的测试。但是经常苦于找不到方便的方式而又受限于项目的进度，都作罢。Grunt配合Karma框架，为我们提供了非常便利的前端测试流程。

我们首先看一下yeoman为我们生成好的测试文件的例子。打开文件test/spec/controllers/main.js

简单看一下，这个测试文件是用来测试我们的MainCtrl控制器，利用了Angular的inject机制，我们可以在测试环境中，是controller拥有运行时的状态。这里主要是测试在awesomeThings中是否存在3个元素。我们来看一下运行的结果。
运行命令：grunt test
我在运行的时候遇到了一些错误，首先是关于/test/mock/**/*.js does not match相关的问题，查了一下，由于我们目前没有模拟数据，所以在karma.js文件中，注释掉下面这一行
'test/mock/**/*.js',
接下来运行没有问题，但是打开的浏览器中显示的是 no data received。看了一下，发现了端倪，测试打开的url使用的是8080端口，而我机器中的apache一直处于开的状态，所以肯定是端口被apache占用了。所以将karma.js中的port设置改成9080，运行成功。

使用Angular-bootstrap修改页面

前面我们已经在代码中添加了angular-bootstrap的插件，下面我们来用它稍微修改一下我们的页面。

首先在index.html中添加对ui-bootstrap.js的引用：

[javascript]
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
[/javascript]

然后在app.js的controller中添加对 ui.bootstrap模块的依赖：

[javascript]
angular.module('testYeoApp', ['ui.bootstrap'])
[/javascript]

接下来，将main.html中的内容换成使用dropdown的方式来显示之前asesomeThings变量中的内容。

[html]
<ul>
  <li class="dropdown">
    <a class="dropdown-toggle">
      Click me to see some awesome things!
    </a>
    <ul class="dropdown-menu">
      <li ng-repeat="thing in awesomeThings">
        <a>{{thing}}</a>
      </li>
    </ul>
  </li>
</ul>
[/html]

可以在运行了grunt server之后再进行修改，这样就可以实时看到更新的页面：

OK，到这里今天要介绍的内容都讲完了。是不是一切看起来都很简单。希望大家能从中对Yeoman以及Angular产生一定的认识和好感。

后面会找时间写一些Angular相关的系列文章，会在现有的这个代码结构中不断加入新的内容以做演示。代码先放到github上，有时间在bae上搭一个基于nodejs的环境供演示用。

代码：https://github.com/owenXin/YeoAngular

参考：
http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
http://yeoman.io/