Angular-cli的安装使用记录

1. 概述：

Angular CLI 是一个命令行接口(Command Line Interface)，用于实现前端自动化开发工作流程。输入操作命令后，他会执行下面这些事情：

（1）创建一个Angular应用

（2）运行一个开发服务器

（3）添加功能到现有的Angular应用程序

（4）单元测试

（5）构建打包前端应用程序

2. 安装

（1）前提：（一般来说升级node，npm也会一起更新升级）

node  -v  # 大于6.9.0

npm  -v  # 大于3.0.0

typescript

（2）安装命令

cnpm install -g @angular/cli

安装好后：ng -v

输出：

Angular CLI: 6.2.3

Node: 8.9.2

OS: win32 x64

Angular:

...

3. 使用

（1）创建应用程序

ng init - 在当前目录创建新的应用程序（新版本已失效）
ng new - 创建新的目录，然后在新建的目录中运行 ng init 命令

（2）可提供的ng操作命令：

add 为项目添加对库的支持
build (b) 构建您的应用程序并将其放入输出路径（默认情况下为dist目录）
config 获取/设置配置值.
doc (d) 打开给定关键字的官方Angular API文档
e2e (e)
generate (g) 基于原理图生成或修改文件
help 显示Angular CLI的帮助文档
lint (l) 提示现有项目中的代码.
new (n) 在新的目录上新建一个 Angular app.
run 执行构建好的项目
serve (s) 构建并提供应用程序服务，更新文件更改
test (t) 在已存在的项目中执行单元测试
update 更新angular应用以及相关npm依赖包
version (v) 输出 Angular CLI的版本.
xi18n 从源代码中提取i18n消息

（3）执行 “ng new project_name” 会发生什么？

新的 project_name 目录被创建
应用程序相关的源文件和目录将会被创建
应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
自动配置项目中的 TypeScript 开发环境
自动配置 Karma 单元测试环境
自动配置 Protractor (end-to-end) 测试环境
创建 environment 相关的文件并初始化为默认的设置

（4）运行程序

ng server  # 默认地址：http://localhost:4200/

4. 开发过程中使用

（1）创建一个组件：

1-1.命令：

ng generate component my-component

ng generate component myCcomponent

ng generate component MyComponent

1-2.执行内容：

CREATE src/app/my-component/my-component.component.html (31 bytes)

CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)

CREATE src/app/my-component/my-component.component.ts (292 bytes)

CREATE src/app/my-component/my-component.component.css (0 bytes)

注解：Angular CLI 将自动调整文件名和组件名称的字母大小写，并将前缀应用于组件选择器，因此以上三个命令创建出来的组件命名一致

（2）其他操作命令

ng g cl my-new-class        // 新建 class

ng g c my-new-component     // 新建组件

ng g d my-new-directive     // 新建指令

ng g e my-new-enum          // 新建枚举

ng g m my-new-module        // 新建模块

ng g p my-new-pipe          // 新建管道

ng g s my-new-service       // 新建服务

注解：generate ( g ) 、class( cl )、component ( c ) 、directive ( d ) 、enum ( e ) 、module ( m ) 、 pipe ( p ) 、service ( s )

每个命令的具体操作和注意事项可以参考：https://segmentfault.com/a/1190000009771946

5. 单元测试

概述：Angular CLI 在新建项目的时候，自动为我们集成了 Karma test runner 测试框架。当添加新的功能时，我们可以利用 --spec 选项，告诉 Angular CLI 让它在src目录下我们生成功能相关的 .spec.ts 测试单元测试文件。

（1）运行单元测试： ng test

打印出：

arma v3.0.0 server started at http://0.0.0.0:9876/

Launching browser Chrome with unlimited concurrency

Starting browser Chrome 01 10 2018 16:41:54.087:WARN [karma]: No captured browser, open  http://localhost:9876/

Connected on socket HywK2UcZvvo5-rwBAAAA with id 59858921

Executed 4 of 4 SUCCESS (0.106 secs / 0.21 secs)

浏览器中出现：

（2）运行 End-to-End 测试： ng e2e

（3）构建打包应用程序：ng build

chunk {main} main.js, main.js.map (main) 13.9 kB [initial] [rendered]

chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]

chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]

chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]

chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]

打包后的资源，将被默认输出输出到dist目录下“项目名”文件夹下。

Angular-cli的安装使用记录

猜你喜欢