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

本博客中止更新，请访问新我的博客：owenchen.net

 

前言

博客迁移到了BAE上，http://owenchen.net/，之后的文章会首发在本身的博客上，随后在博客园发布。

好久没有写文章了，一是项目比较忙，二来本身在尝试一些互联网新的产品，以微信平台开发为主，看看能不能挣点零花钱以缓解目前的经济压力，也顺便了解和学习一下为何这东西这么火。最终钱还没挣到，到把本身累个半死。固然收获也是有的，发现了一些挣钱的路子，之后有时间有机会尝试尝试。也在短期内玩了很多东西，好比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教程中会包括以下的内容：
一、使用Yeo搭建一个AngularJS项目的基本框架
二、使用Grunt加速项目开发和执行相关的任务
三、使用Bower来添加第三方的插件/框架
四、对咱们AngularJS添加内容

环境要求：
在开始和运行咱们的项目以前，你最好已经有以下的一些知识储备和环境的准备：
一、了解控制台和命令行的一些基本知识
二、安装了NodeJS和NPM
三、基础的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/

 

本博客中止更新，请访问新我的博客：owenchen.duapp.com