当前位置: 首页 > 工具软件 > angular-seed > 使用案例 >

Angular-seed 入门

陈文景
2023-12-01

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
  3. 获取Angular-seed源码

    git clone https://github.com/angular/angular-seed.git
  4. 安装依赖库

    npm install
  5. 运行

    npm start
  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>

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",
}

当你在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://

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

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

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

bower install bootstrap --save

3.1.2 Release版本

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

3.1.3查看bower/npm已安装的库

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

bower help
npm update –g bower
npm uninstall –global bower

3.2.3 项目初始化

bower init

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

3.2.4 向bower.com提交自己的库

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

bower register <my-package-name> <git-endpoint>
  • 实例:在 bower.com 登记jquery
bower register jquery git://github.com/jquery/jquery

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

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

3.2.6 库的搜索和查看

搜索:bower search jquery
查看:bower info jquery

3.2.7 库的更新、卸载

更新:bower update jquery
卸载:bower uninstall jquery

3.2.8 列出所有库

bower 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

命令列表:npm –help
各个命令的用法:npm –l

3.3.3库的搜索

  • 列出当前安装的所有库
npm ls
  • 列出当前安装的单个模块
npm ls http-server

3.3.4 库的安装、更新、卸载

安装:npm install path --save
更新:npm update
卸载:npm uninstall

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. 运行 Grunt
grunt

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

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

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 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;
}

接下来怎么测试这个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)能看到测试不通过的结论)。

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

toMatch用于正则表达式

    var message = 'foo bar baz';
    expect(message).toMatch(/bar/);
    expect(message).toMatch('bar');
    expect(message).not.toMatch(/quux/);
 类似资料: