1.什么是Angular CLI?
Angular CLI 是一个命令行接口(Command Line Interface),用于实现自动化开发工作流程。它帮助你做如下事情:
- 创建一个新的 Angular 应用程序
- 运行带有 LiveReload 支持的开发服务器,以便在开发过程中预览应用程序
- 添加功能到现有的 Angular 应用程序
- 运行应用程序的单元测试
- 运行应用程序的端到端 (E2E) 测试
- 构建应用程序
2.常用指令
ng init :在当前目录创建新的应用程序。
ng new :创建新的目录,然后在新建的目录中运行 ng init 命令。因此 ng new 与 ng init 的功能是相似的,只是 ng new 会为我们创建新的目录。
ng serve:命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
使用--open(或-o)参数可以自动打开浏览器并访问: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即可。