Angular-seed 入门

1. 简介

Angular-seed 是一个Angular项目的框架，可以将它作为Angular项目的工程初始化目录配置。用Angular-seed可以快速的搭建一个基于Angular的WebApp工程。

Angular-seed考虑了合理的文件组织，测试框架。

但Angular-seed只是最基本的Angular项目，在设计时就没有考虑对Grunt的支持，只涵盖了Angular最基本的内容。

2. 安装

2.1 安装步骤

1. 安装Node.js。 下载安装包https://nodejs.org/en/download/

2. 安装bower

   npm install -g bower
      
      
   1
      
      
   1

3. 获取Angular-seed源码

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

4. 安装依赖库

   npm install
      
      
   1
      
      
   1

5. 运行

   npm start
      
      
   1
      
      
   1

6. 访问http://localhost:8000/app/index.html

2.2 几点说明

2.2.1 获取没有历史commit的Angular-seed源码

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

2.2.2 安装了bower但为啥不用bower命令

package.json中的script字段指定了npm命令行的缩写。比如下面的配置

  "scripts": {
    "postinstall": "bower install",

    "prestart": "npm install",
    "start": "http-server -a localhost -p 8000 -c-1",
}
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

当你在cmd里运行“npm install”时，执行的命令是，先运行” bower install”，再运行” npm install”。 
运行“npm start”时，也是先运行“npm install”（结合postinstall，就是先运行” bower install”，再运行” npm install”），再运行” http-server -a localhost -p 8000 -c-1”.

2.2.3 运行“npm install”报错” fatal: unable to connect to github.com”

有的公司的防火墙不允许访问http网站，配置Git访问https：

git config --global url."https://".insteadOf git://
 
 
1
 
 
1

2.2.4 bower_components目录怎么不在根目录下

根目录下的.bowerrc是bower的配置文件，里面有这个配置，指定了bower组件安装目录的位置。

{
  "directory": "app/bower_components"
}
 
 
1
2
3
 
 
1
2
3

2.2.5 npm和bower有啥区别

• npm是Node.js的包管理器，用于下载/安装/删除Node的工具包；
• bower是专门为前端模块管理设计的工具，用于下载/安装/删除jquery等模块；
• 它们之间最大的区别是，npm的依赖管理是奇特的倒向树管理，不适合前端代码的部署。

2.2.6 karma是什么

AngularJS团队开发的js测试框架。

3. 使用

3.1 基本功能

3.1.1 安装第三方库（jquery，bootstrap）

使用bower命令安装第三方库，并将信息保存到bower.json中。bower.json记录了第三方库的信息，在代码开发中，不需要将第三方库push到remote server，clone下来后执行”npm install”即可安装工程需要的所有第三方库。

bower install bootstrap --save
 
 
1
 
 
1

3.1.2 Release版本

只有app/目录下的文件是跟产品相关的内容。

3.1.3查看bower/npm已安装的库

npm ls
npm ls bower
bower ls
 
 
1
2
3
 
 
1
2
3

3.2 bower常用操作

本节内容主要来自http://javascript.ruanyifeng.com/tool/bower.html#toc8。

3.2.1 使用bower的优点

bower是twitter团队开发的前端package管理工具。方便之处在于：

• 不需要记住库的版本，不需要考虑库的依赖关系（比如安装bootstrap依赖于jquery，安装bootstrap还要安装jquery）。
• 方便查看库的信息（bower info）。
• 不需要将第三方库push到remote git server，只要存在bower.json，就能一键安装（bower install）项目需要的所有第三方库。

3.2.2 help，更新/卸载bower

bower help
npm update –g bower
npm uninstall –global bower
 
 
1
2
3
 
 
1
2
3

3.2.3 项目初始化

bower init
 
 
1
 
 
1

然后，回答一些问题，生成bower.json

3.2.4 向bower.com提交自己的库

向Bower.com提交你的库，该网站会读取bower.json，列入在线索引。

bower register <my-package-name> <git-endpoint>
 
 
1
 
 
1

• 实例：在 bower.com 登记jquery

bower register jquery git://github.com/jquery/jquery
 
 
1
 
 
1

3.2.5 库的安装

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
 
 
1
2
3
4
5
 
 
1
2
3
4
5

可以在install后指定github地址，http地址，本地文件。 
如果某个库依赖另一个库，安装时默认将所依赖的库一起安装。比如，jQuery-ui依赖jquery，安装jquery-ui时会连jquery一起安装。

3.2.6 库的搜索和查看

搜索：bower search jquery
查看：bower info jquery
 
 
1
2
 
 
1
2

3.2.7 库的更新、卸载

更新：bower update jquery
卸载：bower uninstall jquery
 
 
1
2
 
 
1
2

3.2.8 列出所有库

bower ls    
 
 
1
 
 
1

3.3 npm常用操作

本节内容主要来自：http://javascript.ruanyifeng.com/nodejs/npm.html 
npm是node.js默认的node模块安装、管理工具。

3.3.1 使用npm的优点

Package manager. Installs, publishes and manages node programs

3.3.2 help

命令列表：npm –help
各个命令的用法：npm –l
 
 
1
2
 
 
1
2

3.3.3库的搜索

• 列出当前安装的所有库

npm ls
 
 
1
 
 
1

• 列出当前安装的单个模块

npm ls http-server
 
 
1
 
 
1

3.3.4 库的安装、更新、卸载

安装：npm install path --save
更新：npm update
卸载：npm uninstall
 
 
1
2
3
 
 
1
2
3

3.4 Grunt常用插件

Grunt is a JavaScript Task Runner. 
使用Task Runner的好处：自动化

• 自动压缩css/js
• 自动检查js/HTML语法错误
• 自动合并css/js文件

3.4.1 初始化Grunt项目

1. 安装Node.js
2. 为项目创建Gruntfile.js和package.json
3. 安装grunt和grunt-plugin

npm install
 
 
1
 
 
1

1. 运行 Grunt

grunt
 
 
1
 
 
1

3.4.2 对已配置好的项目使用Grunt

对已配置好Gruntfile.js和package.json的项目，直接运行 Grunt

grunt
 
 
1
 
 
1

3.4.3 uglify插件

代码示例见我的github地址：https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/1_uglify

3.4.4 jshint插件

代码示例见我的github地址：https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/2_jshint

3.4.5 Grunt执行多个任务

代码示例见我的github地址：https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/3_multi_tasks

3.4.6 concat插件

代码示例见我的github地址：https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/4_concat

3.4.7 htmlhint插件

代码示例见我的github地址：https://github.com/ybdesire/WebLearn/tree/master/18_Grunt/6_htmlhint

3.5 Jasmine

Jasmine is a behavior-driven development framework for testing javascript code. 
Jasmine是JS的测试框架。

3.5.1 安装Jasmine

1. 下载”jasmine-standalone-2.3.4.zip”， https://github.com/jasmine/jasmine/releases
2. 解压”jasmine-standalone-2.3.4.zip”，双击目录下的”SpecRunner.html”即可运行example的测试用例

3.5.2 Jasmine使用初窥

假设我们在add.js里写了这样一个函数：

add = function(a, b){
    return a+b;
}
 
 
1
2
3
 
 
1
2
3

接下来怎么测试这个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>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

然后，在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);
  });
});
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

双击刚才写的那个Test.html，就能看到测试结果（把toBe(5)改成toBe(4)能看到测试不通过的结论）。

3.5.3 Jasmine基本原理

Jasmine最重要的就是测试用例的编写。由上例可知，Test.html内容基本是固定的，测试用例写在test_case.js里。Jasmine最重要的三个关键字：describe, it, expect。由3.5.2可知：

• describe表示一组测试用例的集合
• it表示具体的测试用例
• expect表示期望结果 
  为了使某个测试用例之间不互相影响，Jasmine提供了全局的beforeEach()和afterEach()。beforeEach()在describe中的每个it之前运行，afterEach()在describe中的每个it之后运行。(示例见我的github地址，https://github.com/ybdesire/WebLearn/tree/master/19_Jasmine)

常用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
 
 
1
2
3
4
 
 
1
2
3
4

toMatch用于正则表达式

    var message = 'foo bar baz';
    expect(message).toMatch(/bar/);
    expect(message).toMatch('bar');
    expect(message).not.toMatch(/quux/);