angular-seed — 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是否安装。
若没安装,你可以点击这里下载它。
angular-seed — AngularJS种子项目的更多相关文章
- Angular系列----AngularJS入门教程00:引导程序(转载)
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- 迈向angularjs2系列(8):angular cli和angular2种子项目
文章目录 1.angular cli快速搭建项目 2.angular2-seed 3.手动配置 题外话:如何更好的阅读本篇文章 一: angular cli的安装 Angular-cli(命令行界面, ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- Angular系列------AngularJS入门教程:导言和准备(转载)
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
- Angular系列---- AngularJS入门教程03:AngularJS 模板(转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- Angular系列----AngularJS入门教程01:AngularJS模板 (转载)
是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...
- AngularJS+requireJS项目的目录结构设想
AngularJS+requireJS项目的目录结构设想 准备用AngularJS + require.js 作为新项目的底层框架,以下目录结果只是一个初步设想: /default 放页面,不过 ...
- Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架
在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...
- JAVA8,SPRING,ANGULARJS对项目
java8+spring+angularjs 项目应用 最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联 ...
随机推荐
- CSS未完
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- C++ 11的右值引用
目录 一.问题导入 二.右值和右值引用 2.1 左值(lvalue)和右值(rvalue) 2.2 左值引用和右值引用 总结 参考资料 C++11 引入了 std::move 语义.右值引用.移动构造 ...
- jenkins自动化部署工具
jenkins自动化测试 & 持续集成 知识点: 1.下载地址:jenkins.io download:
- vue-蒙层弹窗里的内容滚动。外层大页面禁止滚动
此需求 有两种方法,第一种,这种方法适用于,底层 和弹窗是两个平行的没有关系的两部分.重叠(https://blog.csdn.net/yuhk231/article/details/741717 ...
- [ASP.NET] 解决点击控件下载文件没有响应的问题
下载文件的方法是使用http响应输出流来实现的,使用到了response.write() 导致下载文件时点击控件出错,没有响应,也获取不了文件 是因为在母版页使用了updatepanel,因此回传时发 ...
- 猎豹wifi的坑
最近想看看外面的风景,装了Cisco的VPN,但总是连不了外网,国内的网站连接速度比较慢. 运维人员看了很长时间都没发现原因,route print查看之后,说: 在连接外网之前,多走了层路由... ...
- 吴恩达深度学习:2.12向量化logistic回归
1.不使用任何for循环用梯度下降实现整个训练集的一步迭代. (0)我们已经讨论过向量化如何显著加速代码,在这次视频中我们会设计向量化是如何实现logistic回归,这样酒桶同时处理m个训练集,来实现 ...
- 六、while循环
案例1: do while 循环 很少用到. for循环和while循环用的最多.
- Proxy&Reflect
大部分时候我们使用的都是前置代理, 即我们把直接和代理对象进行交互(所有操作都发生在代理对象身上)的方式叫做前置代理. 那什么是后置代理? 借助原型链机制, 我们直接和 obj 进行交互而不是和代理对 ...
- Android判断是debug还是release模式
1.当有些功能不希望在release模式实现时,但是debug模式又需要的时候,就可以对当前版本模式进行判断.如是debug模式则日志输出级别设置为Level.DEBUG,release模式设置为Le ...