Angular-seed 入门

发布时间：2020-12-17 09:04:31 所属栏目：安全来源：网络整理

导读：1. 简介 Angular-seed 是一个Angular项目的框架，可以将它作为Angular项目的工程初始化目录配置。用Angular-seed可以快速的搭建一个基于Angular的WebApp工程。 Angular-seed考虑了合理的文件组织，测试框架。但Angular-seed只是最基本的Angular项目，在设计

1. 简介

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

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

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

2. 安装

2.1 安装步骤

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

安装bower

   
   
    
    1
   
   
   
   
    
    1
   
   
npm install -g bower

获取Angular-seed源码

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

安装依赖库
```
install
```
运行
```
    
    1
   
   npm start
```
访问http://localhost:8000/app/index.html

2.2 几点说明

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

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

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

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

  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
 
 
 
 
  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
 
 
"scripts": {
    "postinstall": "bower install","prestart": "npm install",0); box-sizing: border-box;">"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”.

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

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

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

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

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

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

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”即可安装工程需要的所有第三方库。

  
  1
 
 bower install bootstrap --save

3.1.2 Release版本

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

3.1.3查看bower/npm已安装的库

  
  1
  
  2
  
  3
 
 npm ls
npm ls bower
bower ls

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

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

3.2.3 项目初始化

  
  1
 
 bower init

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

3.2.4 向bower.com提交自己的库

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

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

实例：在 bower.com 登记jquery

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

3.2.5 库的安装

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

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

3.2.6 库的搜索和查看

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

3.2.7 库的更新、卸载

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

3.2.8 列出所有库

ls

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

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

3.3.3库的搜索

列出当前安装的所有库

  
  1
 
 npm ls

列出当前安装的单个模块

  
  1
 
 npm ls http-server

3.3.4 库的安装、更新、卸载

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

3.4 Grunt常用插件

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

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

3.4.1 初始化Grunt项目

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

  
  1
 
 npm install

运行 Grunt

  
  1
 
 grunt

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

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

  
  1
 
 grunt

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 testingjavascriptcode.
Jasmine是JS的测试框架。

3.5.1 安装Jasmine

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

3.5.2 Jasmine使用初窥

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

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

接下来怎么测试这个add()函数呢？
首先，写一个Test.html，在中引入jasmine库，要测试的add.js和测试用例test_case.js

  
  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
 
 
<!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">
  "stylesheet" "../jasmine_lib/lib/jasmine-2.3.4/jasmine.css">

  script src="../jasmine_lib/lib/jasmine-2.3.4/jasmine.js">script>
  "../jasmine_lib/lib/jasmine-2.3.4/jasmine-html.js">"../jasmine_lib/lib/jasmine-2.3.4/boot.js">script>

  <!-- include source files here... -->
  "add.js"><!-- include spec files(test cases) here... -->
  "test_case.js">script>

head>

body>
html>

然后，在test_case.js里写测试用例

  
  1
  
  2
  
  3
  
  4
  
  5
  
  6
 
 describe("This is an exmaple suite",() {
  it("contains spec with an expectation",102); box-sizing: border-box;">() {
    var sum = add(2,3);
    expect(sum).toBe(5);
  });
});

双击刚才写的那个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用于判断字面量、变量、对象

比如：

  
  1
  
  2
  
  3
  
  4
 
 
 
 
  
  1
  
  2
  
  3
  
  4
 
 
var foo = {        a: 12,b: 34      };
var bar = {        a: 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/);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!