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目录下“项目名”文件夹下。