Angular CLI学习整理

Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它允许你做以下这些事情：
1．创建一个新的 Angular 应用程序
2．运行带有 LiveReload 支持的开发服务器，以便在开发过程中预览应用程序
3．添加功能到现有的 Angular 应用程序
4．运行应用程序的单元测试
5．运行应用程序的端到端 (E2E) 测试
6．构建应用程序
前提条件
在使用 Angular CLI 之前，你必须确保系统中 Node.js 的版本高于 6.9.0 且 npm 的版本高于 3.0.0。
若你尚未安装 Node.js，你可以访问 Node.js 官网，然后根据你所用的操作系统选择对应的安装方式。
若你本机已经安装 Node.js 和 npm，你可以通过运行以下命令，确认一下当前环境信息
$ node - v # 显示当前Node.js的版本
$ npm -v # 显示当前npm的版本
当你本机 Node.js 环境确认无误后，你可以在命令行使用 npm 安装 TypeScript
$ npm install -g typescript  # 安装最新的TypeScript稳定版
安装 Angular CLI
若要安装 Angular CLI，只需在命令行中运行以下命令：
$ npm install -g @angular/cli
验证是否成功安装 Angular CLI，可在命令行运行：
$ ng version
在我本机运行上述命令，则输出以下结果：
@angular/cli: 1.1.1
node: 6.10.2
os: darwin x64
创建新的 Angular 应用程序
Angular CLI 为我们提供了两种方式，用于创建新的应用程序：
ng init - 在当前目录创建新的应用程序
ng new - 创建新的目录，然后在新建的目录中运行 ng init 命令

因此 ng new 与 ng init 的功能是相似的，只是 ng new 会为我们创建新的目录。

假设你还未创建新的目录，那么我们需要使用 ng new 命令来创建新的项目：
$ ng new my-app
当运行上面的命令后，将发生以下事情：
1．新的 my-app 目录被创建
2．应用程序相关的源文件和目录将会被创建
3．应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
4．自动配置项目中的 TypeScript 开发环境
5．自动配置 Karma 单元测试环境
6．自动配置 Protractor (end-to-end) 测试环境
7．创建 environment 相关的文件并初始化为默认的设置
可用选项
–dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
–verbose: boolean, 默认为 false
–link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
–skip-install: boolean, 默认为 false, 表示跳过 npm install
–skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
–skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
–skip-commit: boolean, 默认为 false, 表示不进行初始提交
–directory: string, 用于设置创建的目录名，默认与应用程序的同名
–source-dir: string, 默认为 ‘src’, 用于设置源文件目录的名称
–style: string, 默认为 ‘css’, 用于设置选用的样式语法 (‘css’, ‘less’ or ‘scss’)
–prefix: string, 默认为 ‘app’, 用于设置创建新组件时，组件选择器使用的前缀
–mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
–routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
–inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
–inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板
除此之外，你可以在本机上运行 ng generate --help 查看更多的可用选项。接下来让我们来看一下如何运行应用程序
运行应用程序
首先进入使用 Angular CLI 创建的应用程序目录，例如：
$ cd my-app
然后运行：
$ ng serve
当运行上面的命令后，将发生以下事情：
1．Angular CLI 从 .angular-cli.json 文件中加载配置信息
2．Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
3．Angular CLI 启动 本地开发服务器，默认的地址是 localhost:4200
若要停止应用程序，你可以使用 ctrl+c 快捷键。
添加功能到现有的 Angular 应用程序
你可以使用 ng generate 命令，为已有的 Angular 应用程序添加新的功能。
1．ng generate class my-new-class: 新建 class
2．ng generate component my-new-component: 新建组件
3．ng generate directive my-new-directive: 新建指令
4．ng generate enum my-new-enum: 新建枚举
5．ng generate module my-new-module: 新建模块
6．ng generate pipe my-new-pipe: 新建管道
7．ng generate service my-new-service: 新建服务
ng generate 命令与其它的子命令一样，也有快捷键，具体如下：
1．ng g cl my-new-class: 新建 class
2．ng g c my-new-component: 新建组件
3．ng g d my-new-directive: 新建指令
4．ng g e my-new-enum: 新建枚举
5．ng g m my-new-module: 新建模块
6．ng g p my-new-pipe: 新建管道
7．ng g s my-new-service: 新建服务
构建应用程序
若要构建应用程序，则可以运行：
$ ng build
运行上述命令后，在幕后将发生以下事情：
1．Angular CLI 从 .angular-cli.json 文件中加载配置信息
2．Angular CLI 运行 Webpack 打包项目相关的 JavaScript 与 CSS 文件
3．打包后的资源，将被输出到配置文件中 outDir 所指定的目录，默认是输出到 dist 目录
可用选项
–aot: 开启 ahead-of-time 编译
–base-href: string, 设置 index.html 文件中 元素的链接地址
–environment: string, 设置所使用的环境，默认为 dev
–output-path: string, 设置输出的路径
–target: string, 设置所使用的环境，默认为 development
–watch: boolean, 默认为 false, 开启 watch 模式，监听文件异动并自动重新构