你的第一个AngularJS应用--教程二：基架、创建和測试的工具

介绍
有很是多可用的工具可以帮助你开发AngularJS 应用，那些很是复杂的框架不在个人讨论范围之中，这也是我開始这系列教程的缘由。
在第一部分，咱们掌握了AngularJS框架的基本结构，开发了第一应用。这篇博文是为那些刚開始学习的人写到。假设你是一个经验丰富的AngularJS开发人员，你可能对揭秘指令或者AngularJS在创业公司的使用更感兴趣。
在这一部分，咱们将把应用的逻辑层放在一边，而是去学习怎样组织正确的AngularJS项目。包含：脚手架、依赖管理、准备測试（包含单元測试和端到端測试）。咱们用来开发AngularJS的工具备：Yeoman, Grunt, and Bower。如下咱们将又一次看一下写代码和用 Karma 測试的过程。

3Karma, Jasmine, Grunt, Bower, Yeoman…这些工具是什么？

若是你使用JavaScript来工做，有很是大的可能性你已经知道了他们当中的一些工具，即便你是刚接触Angular。但是为了确保一个共同的基准，我将不会使用不论什么若是。让咱们简单地回想一下这些技术和他们的用途吧。

- Karma（以前的名字是Testacular），是Google的JavaScript測试器，因此它也是測试Angular的天然选择。另外也赞成你在真实的浏览器执行你的測试（包含手机/平板电脑的浏览器），它也支持測试无关的框架。这意味着你可以使用它结合其它框架，比方 Jasmine, Mocha, 或者 QUnit。
- Jasmine也是咱们測试框架的一个选择，至少在这里。假设你之前用它工做过，你会发现它的语法和Rspec很相近。假设没有也不用操心，咱们将在本教程里具体地解说。
- Grunt是一个測试器，可以帮助咱们本身主动处理一些反复的任务，比方：压缩、编译、測试和创建一个简单的AngularJS应用。
- Bower是一个包管理器，能够帮助你找到并安装你应用所依赖的包，比方CSS框架，JavaScript库，等等。它执行在git上，十分像Rails，避免了需要手动下载和更新的依赖关系。
- Yeoman是一个工具集，包括3个核心组件：Grunt，Bower，和脚手架工具Yo。Yo在generators（也是脚手架模版）的帮助下生产代码样板文件，为你的项目本身主动配置Grunt和Bower。你可以差点儿在不论什么JavaScript框架（比方：Angular，Backbone，Ember等）中发现generators，但是因为咱们现在讲Angular，咱们将使用generator-angular项目。

因此，咱们从这里開始
很是好，咱们需要作的第一件事是安装咱们需要的工具
1. 假设你没有安装git，node.js和npm，那么要先安装它们。
2. 而后，咱们将进入命令行输入如下的命令来安装Yeomen工具。

npm install -g yo grunt-cli bower

噢，不要忘了，咱们将使用AngularJS generator。因此你也需要安装它。

npm install -g generator-angular

好的现在咱们准备好了。

 

生成咱们的AngularJS应用
上一次，咱们从angular-seed项目手动地复制了咱们的基本文件。这一次，咱们将使用yo（结合generator-angular）来为咱们作这些。
now，咱们需要作的就是建立咱们新项目的文件，浏览并执行

yo angular

咱们将展现一些选择项，比方是否包括Bootstrap和Compass，此时，让咱们对Compass说no，对Bootstrap说yes。而后，当提示包括哪个模块的时候(resource, cookies, sanitize and route)，咱们将仅仅选择

angular-route.js

咱们项目的基本文件应该会在一分钟以内建立出来。集成了Karma和一些预配置的。
提示：必须牢记咱们要限制这里的模块。
当你正在作本身的一个项目时，使用哪些模块将取决于你本身。
现在，由于咱们正在使用Jasmine，让咱们把它的适配器增长到咱们的项目

npm install karma-jasmine --save-dev

在这个样例中，咱们但愿測试能够在浏览器里运行。让咱们再次加入

npm install karma-chrome-launcher --save-dev

ok，假设咱们所作的每一件事都是正确的，咱们的项目文件结构应该是这种：

咱们应用代码应该在 app/ 这个文件夹下。 test/ 这个文件夹固然是測试文件。在根文件夹下咱们看到那些是项目的配置文件。他们中的每一个都有很是多需要学习的，但是现在咱们仅仅是坚持了默认配置。那么让咱们执行一次咱们的项目吧，咱们可以用如下的命令执行

grunt serve

瞧，咱们的app现在应该跳出在咱们面前了。

 

上一篇译文在这里：http://segmentfault.com/blog/news/1190000000347412

原文连接：http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing