Angular-seed 入门

前端之家收集整理的这篇文章主要介绍了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

       
       
    • 1
    • 1
    npm install -g bower
  3. 获取Angular-seed源码

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

    install
  7. 运行

        
        
  8. 1
  9. npm start
  10. 访问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
    @H_291_403@ 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
    • 列出当前安装的单个模块
    @H_403_442@
  • 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的好处:自动

    3.4.1 初始化Grunt项目

    1. 安装Node.js
    2. 为项目创建Gruntfile.js和package.json
    3. 安装grunt和grunt-plugin
      
      
  • 1
  • npm install
    1. 运行 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

    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里写了这样一个函数

      
      
  • 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/);

    猜你在找的Angularjs相关文章