Angular(02)-- Angular-CLI命令 (3)

可以看到,在官网中看到的关于 component 的各个选项配置的信息,其实在这份文件中也全列出来了,每一项配置的值类型,描述,默认值都清清楚楚在文件中了。

ng g directive

这个是创建指令的命令,组件其实是指令的一种,所以,上面介绍的关于组件命令中的各种选项配置,在指令这里也基本都可以使用,这里不列举了,清楚相关默认文件来源后,不懂的,去翻阅下就可以了。

因为指令并没有对应的 Template 模板和 CSS 样式文件,所以,默认生成的文件中,只有 xxx.directive.ts 和 xxx.spec.ts 两份文件。

ng g pipe

这个是创建管道的命令,它支持的选项配置跟指令的命令基本一样。

所以,同样的,它生成的也只有两份文件,ts 文件和测试文件。

ng g service

这个是创建服务类的命令,支持的选项配置参考上面几种命令。

默认生成的有两份文件,ts 和 测试文件。

ng g class/interface/enum

创建实体类,接口,或枚举的命令,因为这些类型的文件,默认需要的代码模板并不多,即使不用命令创建,手动创建也行。

ng g module

创建一个模块,这个命令有几个比较常用的选项配置:

--flat=true|false

当为 true 时,在当前目录下创建指定的 xxx.module.ts 和 xxx-routing.module.ts 文件,默认 false,会自动创建 xxx 的文件夹。

--routing=true|false

当为 true 时,会自动创建对应的 routing 路由模块,默认 false。

--routingScope=Child|Root

创建路由模块时,配置项是 Child 还是 Root,默认 Child。

以上,是 ng generate 命令的常见用法,它还可以用来创建其他东西,但我常用的就这几种,而且,很多时候,都不是使用默认的行为,因此常常需要配置选项配置一起使用。

另外,为什么非得用 Angular-CLI 命令来创建文件,用 WebStrom 自己创建个 ts 文件不行吗?

借助 CLI 工具其实就是为了高效开发,减少繁琐的处理,比如,创建一个 xxx.component.ts 文件:

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-cc', template: ` <p> cc works! </p> `, styles: [] }) export class CcComponent implements OnInit { constructor() { } ngOnInit() { } }

上面就是执行了 ng g component cc --inlineStyle --inlineTemplate 命令后创建的 cc.component.ts 文件的内容,如果不借助 CLI 工具,那么这些代码就需要自己手动去输入,即使复制黏贴也比较繁琐。

ng server

使用该命令,可以编译我们的项目,并在本地某个端口上运行该项目,默认还可以做到实时更新修改,不用重新编译,是本地调试项目常用的命令。

目前对该命令的使用,只接触到默认配置,还不清楚一些选项配置的适用场景,后续有了解再补充。

ng build

该命令用来将 Angular 项目编译、打包输出到指定目录下,最终输出的文件就是些 HTML,CSS,JavaScript 这些浏览器能够识别、运行的文件。

有时候,前端和后端的工作都由同一个人开发,此时在本地调试时,前端就没必要造假数据,可以直接将 Angular 项目编译输出到后端项目的容器中,直接在本地调试后端接口。

那么,这种时候就不能用 ng server 命令了,只能使用 ng build 命令,但该命令,默认只是编译项目,那么岂不是每次代码发生修改,都得重新跑一次 ng build 命令?当项目有些复杂时,岂不是需要浪费很多时间?

这种时候,就该来了解了解这个命令的一些选项配置了,经过配置,它也可以达到类似 ng server 命令一样自动检测文件变更并增量更新部署,提高开发效率。

选项配置 说明
--watch=true|false   当为 true 时,会自动检测文件变更,并同步更新,默认 false  

还有其他配置项,没使用过,就用过这个,因为我们是直接前端后端一起做,后端用了 spring boot,所以 Angular 项目使用 ng build 命令编译输出到后端项目的容器中,后端跑起来,就可以直接在本地调试了。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfdpg.html