声明

本系列文章内容梳理自以下来源:

官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 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 编译命令,或者是 serve 构建命令等等。

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

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

常见命令

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

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

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

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

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 配置文件来替换掉默认行为。

先介绍第一种方式,使用命令时,加上一些选项配置:

选项配置 说明
--export=true|false 生成的组件在对应的模块文件中,是否自动在 exports 列表中声明该组件好对外公开,默认值 false。
--flat=true|false 当为 true 时,生成的组件不自动创建 xxx 的文件夹,直接在当前目录下创建那几份文件,默认值 false。
--spec=true|false 当为 false 时,不自动创建 .spec.ts 文件,默认值为 true。
--skipTests=true|false 当为 true 时,不自动创建 .spec.ts 文件,默认值 false。该选项配置是新版才有,旧版就使用 --spec 配置。
--styleext=css|scss|sass|less|styl 设置组件是否使用预处理器,旧版接口
--style=css|scss|sass|less|styl 设置组件是否使用预处理器,新版接口
--entryComponent=true|false 当为 true 时,生成的组件自动在其对应的模块内的 entryComponents 列表中声明,默认 false。
--inlineStyle=true|false 当为 true 时,组件使用内联的 style,不创建对应的 css 文件,默认 false。
--inlineTemplate=true|false 当为 true 时,组件使用内联的模板,不创建对应的 html 文件,默认 false。
--lintFix=true|false 当为 true 时,组件创建后,自己进行 lintFix 操作,默认 false。
--module=module 指定组件归属的模块,默认当前目录所属的模块。
--prefix=prefix 指定组件 selector 取值的前缀,默认 app。
--project=project 指定组件归属的 project。
--selector=selector 指定组件的 selector 名。
--skipImport=true|false 当为 true,生成的组件不在对应的模块中声明任何信息,默认 false。
--changeDetection=Default|OnPush 设置改变组件的检测策略,默认 Default。

以上,是使用 ng g component 命令时,可以携带的一些选项配置,来修改默认的行为,其中,如果选项配置为 true,那么 value 值可以省略,如 --flat=true 可以简写成 --flat

比如:ng g component xxx --flat --inlineStyle --inlineTemplate --spec=false --export

另外,其实这些选项配置中,除了前面几项可能比较常用外,其他的我基本都还没怎么接触过。

下面,讲讲第二种方式,修改 angular.json 配置文件来修改默认行为:

也就是在 projects 里选择当前项目,然后再其 schematics 下进行配置,至于 @schematics/angular:component 这串怎么来的,可以去开头第一行所指的那份 schema.json 文件中查找。

其实,这份 schema.json 文件,就是 Angular-CLI 的默认配置,当忘记都有哪些命令或参数,除了可以借助 help 命令或到官网查阅外,也可以到这份文件中查阅。

除了组件外,也还有指令、模块等命令的默认配置,可以看下其中一项默认配置:

{
"@schematics/angular:component": {
"type": "object",
"properties": {
"changeDetection": {
"description": "Specifies the change detection strategy.",
"enum": [
"Default",
"OnPush"
],
"type": "string",
"default": "Default",
"alias": "c"
},
"entryComponent": {
"type": "boolean",
"default": false,
"description": "Specifies if the component is an entry component of declaring module."
},
"export": {
"type": "boolean",
"default": false,
"description": "Specifies if declaring module exports the component."
},
"flat": {
"type": "boolean",
"description": "Flag to indicate if a directory is created.",
"default": false
},
"inlineStyle": {
"description": "Specifies if the style will be in the ts file.",
"type": "boolean",
"default": false,
"alias": "s"
},
"inlineTemplate": {
"description": "Specifies if the template will be in the ts file.",
"type": "boolean",
"default": false,
"alias": "t"
},
"module": {
"type": "string",
"description": "Allows specification of the declaring module.",
"alias": "m"
},
"prefix": {
"type": "string",
"format": "html-selector",
"description": "The prefix to apply to generated selectors.",
"alias": "p"
},
"selector": {
"type": "string",
"format": "html-selector",
"description": "The selector to use for the component."
},
"skipImport": {
"type": "boolean",
"description": "Flag to skip the module import.",
"default": false
},
"spec": {
"type": "boolean",
"description": "Specifies if a spec file is generated.",
"default": true
},
"styleext": {
"description": "The file extension to be used for style files.",
"type": "string",
"default": "css"
},
"viewEncapsulation": {
"description": "Specifies the view encapsulation strategy.",
"enum": [
"Emulated",
"Native",
"None",
"ShadowDom"
],
"type": "string",
"alias": "v"
}
}
}
}

可以看到,在官网中看到的关于 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 serve

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

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

ng build

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

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

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

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

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

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


大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~

Angular(02)-- Angular-CLI命令的更多相关文章

  1. 简话Angular 02 Angular控制器-作用域嵌套

    一句话: 就是孩子可以啃老,老子不能动孩子一根毛! * 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. * 父控制器不能读,也不能修改孩子的变量 1. html代码 <div ng- ...

  2. 有用的 Angular CLI 命令参数

    这是一些有用的 Angular 5 CLI 命令参数,注意参数前面的-和--的不同... 1. 指定build的输出为production version,合并优化css and js files. ...

  3. Angular的一些常用命令

    Angular的一些常用命令 cmd中创建项目: ng new taskmgr -si --style=scss //先不安装依赖,si 为skip install material需要scss样式的 ...

  4. .NET CLI 命令

    您可以立即使用的部分通用 .NET CLI 命令 命令 说明 dotnet new 使用 C# 语言初始化用于类库或控制台应用程序的有效项目. dotnet restore 还原在指定项目的 proj ...

  5. 使用 dotnet cli 命令上传 nuget 程序包

    前言 前面写了一篇文章介绍了如何将自己的程序集打包成nuget package并上传到nuget.org,传送门.全部是通过网页端来进行操作的,现在介绍一种比较方便快捷的方法就是用dotnet cli ...

  6. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  7. GO语言之urfave/cli命令行解析

    练习URL: https://blog.csdn.net/sd653159/article/details/83381786 相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络. ...

  8. Jenkins CLI 命令详解

    笔者在前文<通过 CLI 管理 Jenkins Server>中介绍了如何通过 SSH 或客户端命令行的方式管理 Jenkins Server,限于篇幅,前文主要的目的是介绍连接 Jenk ...

  9. php cli命令 自定义参数传递

    所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本,都在默认情况下带有一个PHP可执行文件.这个可执行文件可以被用来运行命令行的PHP程序.要在你的系统上找到这个可执行文件,就要遵照下面的步 ...

  10. [转]php cli命令 自定义参数传递

    FROM :http://www.cnblogs.com/zcy_soft/archive/2011/12/10/2283437.html 所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本 ...

随机推荐

  1. Data_r_and_w(csv,json,xlsx)

    import osimport sysimport argparsetry:    import cStringIO as StringIOexcept:    import StringIOimpo ...

  2. SpringMVC中的拦截器

    1. 自定义拦截器 实现HandlerInterceptor接口 拦截器一: package cn.rodge.ssm.interceptor;import javax.servlet.http.Ht ...

  3. Pat1108: Finding Average

    1108. Finding Average (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The b ...

  4. PAT1094:The Largest Generation

    1094. The Largest Generation (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yu ...

  5. RedHat Linux下iptables防火墙设置

    一般情况下iptables已经包含在Linux发行版中.运行 # iptables --version 来查看系统是否安装iptables 启动iptables:# service iptables ...

  6. Java中创建线程的三种方式及其优缺点

    1.自定义一个继承Thread的类,由于Java的单继承特性,限制了该类的扩展性. 2.实现Runnable接口,重写run()方法. 3.实现Callable接口,重写call方法.线程执行体可以有 ...

  7. InnoDB基本特性

    Ⅰ.double write 目的:保证数据写入的可靠性 小知识: 什么是partial write? 16k的page只写入了4k,6k,8k,12k就断掉了的情况 corrupt的page就是pa ...

  8. GitHub 系列之「怎样使用 GitHub?」

    1.写在前边的话,为什么要写CitHub? 跟朋友在交流的时候听到求职的时候发现有些公司要附Github帐号,一个优秀的 GitHub 账号当然能让你增色不少.自己之前听说过,但没有花时间研究,最后花 ...

  9. 运用BT在centos下搭建一个博客论坛

    在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...

  10. Spring Boot自动配置源码解析(基于Spring Boot 2.0.2.RELEASE)

    在Spring Boot官方介绍中,首一段话是这样的(如下图).我们可以大概了解到其所表达的含义:我们可以利用Spring Boot写很少的配置来创建一个非常方便的基于Spring整合第三方类库的单体 ...