AngularJS的实例讲解-AngularJS种子项目

AngularJS Seed 是典型 AngularJS web 应用的应用骨架，可以快速启动你的 AngularJS webapp 项目和这些项目的开发环境。

AngularJS Seed 包括一个示例 AngularJS 应用，预配置安装 Angular 框架，为满足即时 Web 开发提供一些开发和测试工具。

Seed 应用只是展示如何连接两个控制器和视图。。

开始

准备条件

你需要先用 git 将angular-seed克隆到自己的本地，然后安装它的依赖。

如果你没有安装过git,你可已再 http://git-scm.com/获取他。

当然我们还需要用node.js来初始化和测试angular-seed，如果你没有安装node.js及相应的NPM,你可以从http://nodejs.org/获取它。

克隆 angular-seed

使用git克隆 angular-seed，并进入 angular-seed目录

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

如果你想获取没有历史commit的Angular-seed源码，请使用

git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>

安装依赖

angular-seed已经预先设定npm去自动运行bower，所以我们能这样简单运行：

npm install

后面的场景，也将调用bower install。安装后，你能发现有两个新文件夹在你的项目中。

• node_modules- 包含我们需要的npm工具包。
• app/bower_components- 包含angular的框架文件。

运行项目

angular-seed已经预先项目带有一个简单的开发Web服务器，我们可以很简单的启动它。

npm start

在浏览器中访问应用程序，http://localhost:8000/index.html。

目录结构

app/                    --> 项目的源文件
  app.css               --> 默认的css文件
  components/           --> 所有应用程序的特定模块
    version/              --> 相关的组件
      version.js                 --> 基本模块的声明
      version_test.js            --> 基本模块的测试
      version-directive.js       --> 用户定义的指令
      version-directive_test.js  --> 用户定义的指令测试
      interpolate-filter.js      --> 用户定义的过滤器
      interpolate-filter_test.js --> 用户定义的过滤器测试
  view1/                --> view1视图模板和控制器
    view1.html            --> 局部模板
    view1.js              --> 控制器
    view1_test.js         --> 控制器的测试
  view2/                --> view2视图模板和控制器
    view2.html            --> 局部模板
    view2.js              --> 控制器
    view2_test.js         --> 控制器的测试
  app.js                --> 主项目模块
  index.html            --> 项目布局模板
  index-async.html      --> 就像index.html，但异步加载JS文件
karma.conf.js         --> 用于运行karma单元测试的配置文件
e2e-tests/            --> 端对端测试
  protractor-conf.js    --> Protractor配置文件
  scenarios.js          --> Protractor端对端测试的运行文件

测试

有两种测试，单元测试和端对端测试。

运行单元测试

angular-seed预先配置了单元测试。它们是Jasmine写的，我们使用 Karma测试运行器运行它。有一个默认的 Karma文件去运行它。

• 你能在karma.conf.js查看单元测试配置。
• 每个运行的代码下有它对应的单元测试代码，并命名为..._test.js

最简单的运行单元测试，使用以下脚本：

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,angular-seed使用以下代码安装它：

npm run update-webdriver

这句脚本将会下载并安装最新的独立的WebDriver工具。

确保你的web服务器环境运行起来了，并且WebDriver已经更新过了，你可以进行端对端测试了，运行以下代码：

npm run protractor

提醒： Protractor使用Selenium Standalone Server，这需要你的本地机器安装了Java Development Kit (JDK)。在命令行输入java -version检查下JDK是否安装。

若没安装，你可以点击这里下载它。