Angular(02)-- Angular-CLI命令

Angular 官方中文版教程

官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主。

因为这系列文章,更多的会带有我个人的一些理解和解读,由于目前我也才刚开始接触 Angular 不久,在该阶段的一些理解并不一定是正确的,担心会有所误导,所以还是以官网为主。

正文- Angular-CLI 命令

Angular 的项目其实相比老旧的前端项目模式或者是 Vue 的项目来说,都会比较重一点,因为它包括了: 模块 @NgModel, 组件 @Component, 指令 @Directive 等各种各样的东西,而每一种类型的 ts 文件,都需要有一些元数据的配置项。

这就导致了,如果是手工创建 ts 文件,需要自己编写很多重复代码,因此,可以借助 Angular-CLI 命令来创建这些文件,自动生成所需的这些重复代码。

而且,不仅在创建文件方面,在对项目的编译、打包等各种操作中也需要借助 Angular-CLI。

所以,日常开发中,不管是借助 WebStrom 的图形操作,还是直接自己使用命令方式,都需要跟 Angular-CLI 打交道,了解一些基本的配置和命令也是有好处的。

安装的方式就不讲了,要么直接使用 WebStrom 内置的,要么借助 npm 下载一个,要么通过 WebStrom 创建的 Angular 项目的 package.json 中就会自动配置一个 cli 依赖库。

概览

命令格式:ng commandNameOrAlias arg [optionalArg] [options]

也就是 ng 之后带相应命令或命令的别名,接着带命令所需的参数,如果有多个参数就紧接着,最后是一些选项配置,选项的格式都加 -- 前缀,如 --spec=false

示例:ng g component --flat --spec=false

g 是 generate 命令的别名,component 是 g 命令的参数,表示要创建组件,--flat 和 --spec 是选项配置,具体意思后面说。

Angular-CLI 大体上两种类型的命令,一是创建或修改文件,二是类似运行某个脚本来编译、构建项目。

比如创建项目生成初始骨架的命令、创建组件、指令、服务这类文件命令;

或者是执行 build 编译命令,或者是 server 构建命令等等。

以下是概览,粗体字是我较为常接触的:

命令 别名 说明
generate   g   创建相应的文件,如组件、指令、管道、服务、模块、路由、实体类等  
build   b   编译项目,并输出最后的文件到指定目录,可以配置很多参数来达到各种效果,比如实时更新等目的  
server   s   编译项目,并让它运行起来,且默认支持实时更新修改  
new   n   创建新项目,生成项目初始骨架,默认包括根模块、根视图,还有基本的各种配置文件  
e2e   e   编译并运行项目,跑起来后,运行 e2e 测试  
lint   l   对项目进行 lint 检查  
test   t   运行单元测试  
help     查看命令的帮助信息  
...   ...   还有一些没用过,也不大清楚的命令,后续再补充  
常见命令

其实,这么多命令中,我最常使用的,就只有 ng g 命令,也就是 generate 命令,用来生成各种类型的文件代码,比如生成组件、生成服务等。

因为项目开发过程中,就是在编写组件,编写服务,而这些文件又都需要一些元数据配置,自己创建 ts 文件再去写那么代码有些繁琐,借助命令比较方便。

还有,运行项目时,会使用 build 或 server 命令。

所以,下面就只介绍这三个命令,其他命令,等到后续有接触,深入了解后再补充。

ng g component

ng g component xxx 是用来创建组件的,直接使用该命令,会默认在当前目录下创建一个 xxx 文件夹,并在内部创建以下几个文件:

xxx.component.css

xxx.component.html

xxx.component.spec.ts

xxx.component.ts

每个文件内都会自动生成一些所需的代码,另外,还会在当前目录所属的模块文件中,将该 xxxComponent 组件声明在相应的 declarations 列表中。

以上是命令的默认行为,如果要改变这个默认行为,有两种方式,一是使用命令时携带一些选项配置,二是直接修改 angular.json 配置文件来替换掉默认行为。

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

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