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目录

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

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

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

安装依赖

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

  1. npm install

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

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

运行项目

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

  1. npm start

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

目录结构

  1. app/-->项目的源文件
  2. app.css -->默认的css文件
  3. components/-->所有应用程序的特定模块
  4. version/-->相关的组件
  5. version.js -->基本模块的声明
  6. version_test.js -->基本模块的测试
  7. version-directive.js -->用户定义的指令
  8. version-directive_test.js -->用户定义的指令测试
  9. interpolate-filter.js -->用户定义的过滤器
  10. interpolate-filter_test.js -->用户定义的过滤器测试
  11. view1/--> view1视图模板和控制器
  12. view1.html -->局部模板
  13. view1.js -->控制器
  14. view1_test.js -->控制器的测试
  15. view2/--> view2视图模板和控制器
  16. view2.html -->局部模板
  17. view2.js -->控制器
  18. view2_test.js -->控制器的测试
  19. app.js -->主项目模块
  20. index.html -->项目布局模板
  21. index-async.html -->就像index.html,但异步加载JS文件
  22. karma.conf.js -->用于运行karma单元测试的配置文件
  23. e2e-tests/-->端对端测试
  24. protractor-conf.js -->Protractor配置文件
  25. scenarios.js -->Protractor端对端测试的运行文件

测试

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

运行单元测试

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

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

最简单的运行单元测试,使用以下脚本:

  1. npm test

这句命令将启动 Karma来执行单元测试。而且, Karma会监控代码和测试文件的变化,并重新运行单元测试。但每次更改都运行单元测试,可能会打破你预期的代码功能。

你也可以叫Karma运行简单的单元测试后就退出。这样可有效的检验一个特定版本的代码是否是按预期运行的。使用下面的脚本:

  1. npm run test-single-run

端对端测试

angular-seed预先配置的端对端测试是用 Jasmine写的,用 Protractor端对端测试器运行它。它使用本地事件,并对angular应用具有特殊功能。

  • 你能在e2e-tests/protractor-conf.js查看端对端测试配置。
  • 运行e2e-tests/scenarios.js进行端对端测试。

Protractor模拟与我们的Web应用程序的交互并且验证应用程序是否正确响应。所以,我们的web服务器必须能被应用程序正常的打开,以便Protractor能与它互动。使用下面的脚本:

  1. npm start

运行Protractor需要先安装 WebDriver,angular-seed使用以下代码安装它:

  1. npm run update-webdriver

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

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

  1. npm run protractor

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

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

angular-seed — AngularJS种子项目的更多相关文章

  1. Angular系列----AngularJS入门教程00:引导程序(转载)

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  2. 迈向angularjs2系列(8):angular cli和angular2种子项目

    文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...

  3. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  4. Angular系列------AngularJS入门教程:导言和准备(转载)

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

  5. Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  6. Angular系列----AngularJS入门教程01:AngularJS模板 (转载)

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  7. AngularJS+requireJS项目的目录结构设想

    AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default    放页面,不过 ...

  8. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  9. JAVA8,SPRING,ANGULARJS对项目

    java8+spring+angularjs 项目应用 最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联 ...

随机推荐

  1. LeetCode.985-查询后偶数的总和(Sum of Even Numbers After Queries)

    这是悦乐书的第370次更新,第398篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第232题(顺位题号是985).有一个整数数组A和一个查询数组queries. 对于第i ...

  2. 【VS开发】【智能语音处理】MATLAB 与 音频处理 相关内容摘记

    MATLAB 与 音频处理 相关内容摘记 MATLAB 与 音频处理 相关内容摘记 1 MATLAB 音频相关函数 1 MATLAB 处理音频信号的流程 2 音量标准化 2 声道分离合并与组合 3 数 ...

  3. 【VS开发】如何移植对话框?

    [VS开发]如何移植对话框? 标签:[VS开发] 问题描述:当开发好一个可视化界面的时候,想将其移植到另外的工程中,这个时候希望能够导出对话框资源,好直接在另一个工程中进行编辑,而不用再次编辑对话框上 ...

  4. Elasticsearch-安装、日志解读

    ES-安装.日志解读 1. 准备tar包 https://www.elastic.co/cn/products/elasticsearch2. 解压 tar -zxvf elasticsearch-. ...

  5. Object的create、assign、getPrototypeOf与拷贝

    Object的create.assign.getPrototypeOf与拷贝:https://www.cnblogs.com/ninalei/p/8655567.html

  6. jmeter---linux安装运行

    安装jdk 安装jmeter 配置环境变量: export JAVA_HOME=/usr/java/1.8.0_181 export CLASSPATH=.:JAVA_HOME/lib/dt.jar: ...

  7. python-day1(学前了解)

    Markdown基本语法 各级标题 # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 加粗 **加粗文本** 斜体 *我斜了* 高亮 ==我高亮了== 上标 2 ...

  8. 别人的Linux私房菜(24-25)X Window设置介绍、Linux内核编译与管理

    X Window主要组件为:X Server .X Client . Window Manager . Display Manager. X Server管理硬件,X Client则为应用程序,将所需 ...

  9. 无法安装 Microsoft Visual Studio 2010 Service Pack 1,因为此计算机的状态不支持此安装。有关如何解决此问题的说明,请参阅 Microsoft 下载中心网站上的自述文件

    解决办法: 32 位系统删除:HKEY_LOCAL_MACHINE\Software\Microsoft\VSTO Designtime Setup\ 64 位系统删除:HKEY_LOCAL_MACH ...

  10. crm客户资源显示控制

    为便于员工之间的良性竞争,避免恶意挖客户,对于不同的登录用户,在客户列表中只显示当用用户自己所拥有的客户列表. ---具体的,通过在列表显示界面的列表查询语句中增加根据用户id查询其对应的客户资源的条 ...