Angular 5.0 学习4：Angular CLI常用指令

1.什么是Angular CLI？

Angular CLI 是一个命令行接口(Command Line Interface)，用于实现自动化开发工作流程。它帮助你做如下事情：

1. 创建一个新的 Angular 应用程序
2. 运行带有 LiveReload 支持的开发服务器，以便在开发过程中预览应用程序
3. 添加功能到现有的 Angular 应用程序
4. 运行应用程序的单元测试
5. 运行应用程序的端到端 (E2E) 测试
6. 构建应用程序

2.常用指令

ng init ：在当前目录创建新的应用程序。
ng new ：创建新的目录，然后在新建的目录中运行 ng init 命令。

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

ng serve：命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。

ng serve --open

常用于新建的指令

ng generate class my-new-class // 新建 class
ng generate component my-new-component // 新建组件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建枚举
ng generate module my-new-module // 新建模块
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服务

可以简写成：

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 // 新建服务

运行单元测试

ng test

运行 End-to-End 测试

ng e2e

构建应用程序

ng build

可用选项：

--aot: 开启 ahead-of-time 编译

--base-href: string, 设置 index.html 文件中 <base> 元素的链接地址。

--environment: string, 设置所使用的环境，默认为 dev。

--output-path: string, 设置输出的路径。

--target: string, 设置所使用的环境，默认为 development。

--watch: boolean, 默认为 false, 开启 watch 模式，监听文件异动并自动重新构建。

3.怎么使用这些指令？

以新建一个test名称的组件为例：

• 使用cmd进入相应的目录输入ng g c test命令可使用。

• 在IDE的Terminal面板输入ng g c test命令可使用，我的IDE是WebStorm。

如果想要新建目录demo，再新建test组件，可以执行ng g c demo/test,这样test组件就会出现在demo目录下。

4.不想使用这些指令新建怎么操作？

1.点击想要新建组件的目录，比如app目录，然后右键new，选择Angular CLI;

2.出现一些新建的选项，点击component;

3.输入组件名称test，点击OK即可。