angular-seed的官方文档翻译

译者按：博主一直喜欢用intellij IDEA来做前端的事情，是因为上面有很多辅助开发的插件都已经准备好了，完全不用怎么配置，而且很多插件可以从一开始就帮你新建成一个结构完整的项目，包括各种测试工具，依赖库文件等等。最近在学angularjs，所以想看看，intellij上面有没有相关的插件，结果真的有。新建一个angular app，结果一看，就傻眼了，完全看不懂项目结构。不过看了一下，里面有一个readme.md的文件，发现这个是说明文档！但是！这个完全是英！文！的！于是咬咬牙，就花了两天时间自己来翻译了。博主六级刚过的水平，看懂是基本没问题的，但是有些涉及到后端的知识没有学过，也不太好翻译，希望看过的朋友，见到有出错的地方在评论帮指正一下！谢谢大家！

angular-seed - AngularJs 应用的快速开发工程

这是一个普通的AngularJS web应用的新的空的工程，你在开发你的项目的时候可以使用它来快速辅助开发你的web应用和构建开发环境。

这个开发平台包含了一个简单的AngularJS应用，并且预先安装好了Angular框架和满足快速web开发的一系列开发和测试工具。

上手开始

刚开始上手的时候你可以简单的复制angular-seed所依赖的库并且安装所需要的组件

前提条件

你需要使用Git来复制angular-seed所需要的资源库. 你可以从下面的地址来获取Git
http://git-scm.com/.

我们也可以使用一些node.js工具来初始化和测试angular-seed。你必须是安装了node.js以及它的包管理工具（npm）你可以从这个网址来获得node.js和npm
http://nodejs.org/.

复制angular-seed

用 git来复制angular-seed依赖的库:

git clone https://github.com/angular/angular-seed.git
cd angular-seed

如果你要新建一个单纯是把angular-seed复制下来自己用（译者注：就是不要.git目录）工程，那么你可以这样做：

git clone --depth=1 https://github.com/angular/angular-seed.git 

代码depth=1的意思是告诉git不要获取到.git目录，直接把angular-seed代码全部复制下来就好。

安装所依赖的文件

在这个项目中，我们有两种依赖的文件需要安装：用于管理和测试程序所需的工具和angular框架。

• 我们通过npm来获取我们需要的工具。获取： node package manager
• 我们通过bower来获取我们angular框架代码，获取：aclient-side code package manager

我们已经预设置了npm自动运行bower了，所以我们可以直接这样做：

npm install

这后台运行的过程也叫作bower install（译者注：就是后台安装了bower的意思吧…），你可以在你的工程里发现了两个新的文件夹。

• node_modules - 这个文件夹包含了我们所需要的工具npm包
• app/bower_components - 这个文件夹包含了我们所需要的angular框架文件

注意，bower_components的文件夹正常情况下都会安装在根目录下，但是angular-seed可以通过.bowerrc文件来改变这个路径。把它放进qpp文件夹可以让web服务器更容易读取到所有文件（译者注：这里原文是“serve the files by a webserver”这句不懂，所以就按自己理解来写了）

我们已经为这个项目预设置了一个简单的开发时用的服务器。启动它最简单的方法是：

npm start

然后你就可以在 http://localhost:8000/index.html看到这个网页了。

项目结构

app/                    --> 应用的所有源文件
  app.css               --> 默认的css样式表
  components/           --> 所有应用特定的module
    version/              --> 版本关联组件
      version.js                 --> 版本模块的声明 和 基本的“版本号”服务
      version_test.js            --> 版本号服务的测试模块
      version-directive.js       --> 配置用来返回app最新版本的指令
      version-directive_test.js  --> 版本指令的测试模块
      interpolate-filter.js      --> custom interpolation filter
      interpolate-filter_test.js --> interpolate filter tests
  view1/                --> 视图1的模板和逻辑代码
    view1.html            --> 模板代码
    view1.js              --> 控制器的逻辑代码
    view1_test.js         --> 控制器测试模块
  view2/                --> 视图2的模板和逻辑代码
    view2.html            --> 模板代码
    view2.js              --> 控制器的逻辑代码
    view2_test.js         --> 控制器测试模块
  app.js                --> 应用的主要模块
  index.html            --> 应用的主要的html视图
  index-async.html      --> 跟index.html一样，不过会异步加载js代码
karma.conf.js         --> 用karma做单元测试的配置文件
e2e-tests/            --> 端到端架构测试
  protractor-conf.js    --> Protractor 的配置文件
  scenarios.js          --> 用 Protractor跑的端到端架构测试

代码测试

angular-seed里有两种用来测试代码的方法：单元测试和端到端测试。

运行单元测试

angular-seed 已经预先配置好了单元测试模块. 这些代码我们都写在了搭配Karma Test Runner一起运行的Jasmine里面.我们也提供了运行他们所需的Karma的配置文件.

• 这个配置文件在karma.conf.js中可以找到
• 单元测试文件就在所要测试的代码那个文件夹里面，也就是那个命名为..._test.js的那个文件

运行单元测试的最简单的方法就是我们在npm上提供的测试命令：

npm test

这个命令会启动Karma的测试运行器来执行单元测试.此外，Karma会在后台比对源文件和测试文件的变化，然后在重新运行测试的时候会根据文件的变化来进行相应的测试。
推荐的做法是：如果你每次保存文件的时候都运行一下单元测试，然后就会看到看到测试结果会返回导致代码模块出现异常的那些被修改的语句。

你也可以让Karma运行单次的测试然后退出。如果你想检查一下某个具体版本的代码是不是符合你想要的功能的时候，这样做会很有用。项目中已经预先定义了这样的命令让你可以这样做：

npm run test-single-run

端到端测试

angular-seed 中含有端到端的测试, 还是写在了 Jasmine里面. 这些测试时配合 Protractor 端对端测试框架来运行的.
它这里使用了原生的测试事件并且针对angular的应用有特别的测试特性。

• 配置文件课题在这个目录里找到： e2e-tests/protractor-conf.js
• 端到端测试文件就在： e2e-tests/scenarios.js

Protractor 模拟和我们的web 应用进行交互，然后验证应用是否正确的响应. 因此我们的web服务器要上线给应用提供返回数据, 让 Protractor 可以跟应用进行交互。

npm start

另外，因为Protractor是基于WebDriver的，所以我们要安装WebDriver。angular-seed里面也集成了一条命令来安装它：

npm run update-webdriver

这样就可以下载并安装最新版本的独立的WebDriver工具。

当你确定好你的开发用的服务器已经建立好了并且能成功和你的应用通讯的同时，你的 WebDriver 也安装好了的话, 你可以用这条npm命令来运行端到端测试：

npm run protractor

这个命令会创建针对你托管在开发服务的web应用的端到端测试。

注意:
Protractor在后台会使用 Selenium Stadalone Server这个依赖于Java的工具集来进行相应的测试。
所以你要确保Java Development Kit (JDK)已经正确安装好在你的计算机上。你可以在命令行输入java -version来查看。

如果发现JDK没有安装的话，你可以从这里下载.

更新 Angular

首先，我们建议你把 angular-seed和你自己的工程先合并起来，因为angular框架的核心代码和工具都需要包管理工具（npm和bower）
所以你可以直接用这些工具来更新所依赖的库文件。

你可以这样来更新工具集：

npm update

这样就可以检查最新版本的工具集是否和 package.json 文件里标注的版本一致了.

你可以这样更新angular的依赖库

bower update

这样就可以检查最新版本的angular和bower.json 文件里标注的版本一致了.

异步加载Angular

angular-seed支持异步加载框架和应用脚本。index-async.html文件就是设计来支持这种异步加载模式的。
如果要这个页面成功工作的话，你要将一小段Angular的JavaScript代码嵌入到这个HTML页面中。
项目里已经预先配置了命令来做这件事了：

npm run update-index-async

这个命令会复制angular-loader.js 库文件的内容到 index-async.html这个页面里面.
每次你更新你所用的angular版本的时候都可以运行一下这个页面.

为应用提供后台服务

因为angular是一个客户端方面的技术，我们完全可以创建一个angular web应用不需要后台服务的支撑，
但是我们还是推荐在开发的时候使用本地的服务器来为web应用提供访问服务，这样可以避免直接用浏览器开发时出现的安全限制问题。
直接用浏览器开发虽然可以查看不同浏览器的兼容性，但是通过file://来访问HTML页面很多时候却会阻止cookies，XHR等操作。
如果用http://访问页面则不会这样的情况。

在开发过程中运行应用

angular-seed在项目中预先配置了一个本地的开发用的web服务器。
它是用node.js开发的一个叫http-server工具。
你可以用命令npm start来启动这个服务器，不过你也可以选择全局安装这个工具：

sudo npm install -g http-server

然后你就可以在你静态文件的目录下用命令行启动你自己的开发web服务器来提供服务了：


http-server -a localhost -p 8000


另外你也可以选择自己来配置你的web服务器，比如使用Apache或者nginx。
只要配置你的服务器在app/文件夹下就可以了。

在发布之后运行应用

这完全取决于你的应用有多复杂和你的应用系统的架构,但是最基本的是你的所有项目文件都应该在app/的目录下。
除此之外的其他东西都可以不要了。

Angular 应用是完全由html，css和js构成的，所以部署的时候一定要部署在浏览器可以访问的地方。

如果你的angular应用是通过XHR或者其他方式跟后端服务器进行通信的, 你需要找到一个最好的方式来托管你的代码。
applicable. 通常这是由后端服务器托管静态代码的方式或者通过反向代理后端服务器和web服务器来完成的。

持续集成构建项目

Travis CI

Travis CI 是一个持续集成构建项目的服务,它可以管理github上新提交到代码库的代码，然后创建脚本来构建应用或者运行测试模块。
angular-seed里面已经包含了一个Travis的配置文件, .travis.yml, 它可以在你向github推送代码的时候让Travis运行测试。

你需要允许Travis 和 GitHub连接，具体方法你可以查看Travis的官网来了解如何操作。

CloudBees

CloudBees提供了持续集成（CI）开发的安装包：

If you run this, you will get a cloned version of this repo to start working on in a private git repo,
along with a CI service (in Jenkins) hosted that will run unit and end to end tests in both Firefox and Chrome.

联系方式

更多有关angularjs的内容请查看： http://angularjs.org/

---

后记

翻译了之后就完全弄懂了这个新建的项目的结构了，它里面提前帮我弄了很多设置文件，包括单元测试和端到端测试的模块，所以其实是很实用的。我之前搜过了网上，在国内没有找到相关的资料，希望这篇东西能对大家有一点点的帮助吧。
最后附上官方文档的地址（没错还是在我博客上）：http://blog.csdn.net/u013750103/article/details/52966746