Angular-seed 是一个Angular项目的框架,可以将它作为Angular项目的工程初始化目录配置。用Angular-seed可以快速的搭建一个基于Angular的WebApp工程。
Angular-seed考虑了合理的文件组织,测试框架。
但Angular-seed只是最基本的Angular项目,在设计时就没有考虑对Grunt的支持,只涵盖了Angular最基本的内容。
安装Node.js。 下载安装包https://nodejs.org/en/download/
安装bower
npm install -g bower
获取Angular-seed源码
git clone https://github.com/angular/angular-seed.git
安装依赖库
npm install
运行
npm start
git clone --depth=1 https://github.com/angular/angular-seed.git <your-project-name>
package.json中的script字段指定了npm命令行的缩写。比如下面的配置
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a localhost -p 8000 -c-1",
}
当你在cmd里运行“npm install”时,执行的命令是,先运行” bower install”,再运行” npm install”。
运行“npm start”时,也是先运行“npm install”(结合postinstall,就是先运行” bower install”,再运行” npm install”),再运行” http-server -a localhost -p 8000 -c-1”.
有的公司的防火墙不允许访问http网站,配置git访问https:
git config --global url."https://".insteadOf git://
根目录下的.bowerrc是bower的配置文件,里面有这个配置,指定了bower组件安装目录的位置。
{
"directory": "app/bower_components"
}
AngularJS团队开发的JS测试框架。
使用bower命令安装第三方库,并将信息保存到bower.json中。bower.json记录了第三方库的信息,在代码开发中,不需要将第三方库push到remote server,clone下来后执行”npm install”即可安装工程需要的所有第三方库。
bower install bootstrap --save
只有app/目录下的文件是跟产品相关的内容。
npm ls
npm ls bower
bower ls
本节内容主要来自http://javascript.ruanyifeng.com/tool/bower.html#toc8。
bower是twitter团队开发的前端package管理工具。方便之处在于:
bower help
npm update –g bower
npm uninstall –global bower
bower init
然后,回答一些问题,生成bower.json
向Bower.com提交你的库,该网站会读取bower.json,列入在线索引。
bower register <my-package-name> <git-endpoint>
bower register jquery git://github.com/jquery/jquery
bower install backbone
bower install git://github.com/documentcloud/backbone.git
bower install http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js
bower install ./some/path/relative/to/this/directory/backbone.js
bower install jquery-ui#1.10.1
可以在install后指定github地址,http地址,本地文件。
如果某个库依赖另一个库,安装时默认将所依赖的库一起安装。比如,jquery-ui依赖jquery,安装jquery-ui时会连jquery一起安装。
搜索:bower search jquery
查看:bower info jquery
更新:bower update jquery
卸载:bower uninstall jquery
bower ls
本节内容主要来自:http://javascript.ruanyifeng.com/nodejs/npm.html
npm是Node.js默认的node模块安装、管理工具。
Package manager. Installs, publishes and manages node programs
命令列表:npm –help
各个命令的用法:npm –l
npm ls
npm ls http-server
安装:npm install path --save
更新:npm update
卸载:npm uninstall
Grunt is a JavaScript Task Runner.
使用Task Runner的好处:自动化
npm install
grunt
对已配置好Gruntfile.js和package.json的项目,直接运行 Grunt
grunt
代码示例见我的github地址:https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/1_uglify
代码示例见我的github地址:https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/2_jshint
代码示例见我的github地址:https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/3_multi_tasks
代码示例见我的github地址:https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/4_concat
代码示例见我的github地址:https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/6_htmlhint
Jasmine is a behavior-driven development framework for testing JavaScript code.
Jasmine是JS的测试框架。
假设我们在add.js里写了这样一个函数:
add = function(a, b){
return a+b;
}
接下来怎么测试这个add()函数呢?
首先,写一个Test.html,在中引入jasmine库,要测试的add.js和测试用例test_case.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="../jasmine_lib/lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" href="../jasmine_lib/lib/jasmine-2.3.4/jasmine.css">
<script src="../jasmine_lib/lib/jasmine-2.3.4/jasmine.js"></script>
<script src="../jasmine_lib/lib/jasmine-2.3.4/jasmine-html.js"></script>
<script src="../jasmine_lib/lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script src="add.js"></script>
<!-- include spec files(test cases) here... -->
<script src="test_case.js"></script>
</head>
<body>
</body>
</html>
然后,在test_case.js里写测试用例
describe("This is an exmaple suite", function() {
it("contains spec with an expectation", function() {
var sum = add(2, 3);
expect(sum).toBe(5);
});
});
双击刚才写的那个Test.html,就能看到测试结果(把toBe(5)改成toBe(4)能看到测试不通过的结论)。
Jasmine最重要的就是测试用例的编写。由上例可知,Test.html内容基本是固定的,测试用例写在test_case.js里。Jasmine最重要的三个关键字:describe, it, expect。由3.5.2可知:
常用expect方法:
toBe/toEqual
* toBe相当于JS中的===
* toEqual用于判断字面量、变量、对象
比如:
var foo = { a: 12, b: 34 };
var bar = { a: 12, b: 34 };
expect(foo).toBe(bar) -> false
但expect(foo).toEqual(bar) -> true
toMatch用于正则表达式
var message = 'foo bar baz';
expect(message).toMatch(/bar/);
expect(message).toMatch('bar');
expect(message).not.toMatch(/quux/);