Angular CLI 入门指南

大家好！在本篇博文中，我们将学习如何利用 Angular CLI 提供的功能来创建一个新的 Angular 5 应用。我们还将了解 Angular CLI 中提供的各种命令，以提高我们的生产力。

CLI (命令行界面)

在讨论 Angular CLI 之前，让我们先简单了解一下 CLI。CLI 代表命令行界面，许多其他编程语言已经提供了用于不同目的的 CLI。

例如，Maven 有命令行工具用于安装包和运行各种命令，npm 已经提供了各种命令行工具，Python 也是如此。

如果您注意到上述示例中的一个共同点，那就是所有技术都是开源的，并且可以在任何平台上使用。Angular 也是如此，Angular 是平台无关的，我们可以在任何操作系统上进行 Angular 开发，并在任何服务器上部署。

CLI 为我们提供了可以在本地机器和工作目录中执行的命令，以加速我们的开发，因为我们不必依赖任何特定的 IDE。如今，几乎每个开发者都有自己的 CLI。就云开发而言，Azure、Google Cloud 和 AWS 都提供了自己的 CLI。

为什么需要 Angular CLI

现在我们对 CLI 有了大致的了解，接下来让我们讨论一下为什么实际上需要 Angular CLI。

我们知道 Angular 是开源的，我们可以选择任何操作系统，也可以选择任何 IDE。我个人偏爱 Visual Studio Code，因为它对 TypeScript 提供了很好的支持。

这里的问题在于创建项目的骨架。从 AngularJs 时代开始，我们就必须手动完成这项工作。创建骨架包括创建文件夹结构、为 Karma 和 Protractor 设置配置以分别执行单元测试用例和端到端测试用例、通过 npm 安装所有包、编写 gulp 或 grunt 任务以在生产环境中最小化应用程序，并确保我们没有遗漏任何东西。

当 Angular 2 发布时，其设置与 AngularJs 不同，人们通常需要两天以上的时间来创建初始项目的骨架。正是在这里，Angular 团队决定推出 CLI，这样我们就无需应对所有这些麻烦，作为开发人员，我们可以专注于开发本身。

安装

在继续安装 Angular CLI 之前，我们需要安装 Node 和 npm。

我们可以从这里下载并安装 Node。

安装 Node 后，请从命令提示符运行以下命令，以验证 Node 和 npm 是否已正确安装。

1. node -v ：此命令将显示已安装的 Node 版本
2. npm -v：此命令将显示已安装的 npm 版本

安装 Node 后，我们可以在命令提示符中运行以下命令

1. npm install @angular/cli -g ：这里的 -g 表示该包需要全局安装，以便我们可以在机器上的任何位置运行 CLI 命令。
2. ng –version：用于验证我们已安装的 CLI 版本。

在安装之前，请确保您不在任何代理服务器后面，因为在您的组织中运行 npm 命令时可能会遇到错误。因此，在运行 npm 命令之前，请检查您是否可以访问 http://registry.npmjs.org/，如果无法访问，请联系您的组织了解如何配置 NPM。

在大多数情况下，只需使用以下命令设置代理即可

npm config set proxy http://<username>:<password>@<proxy-server-url>:<port>

Commands

现在我们已经安装了 Node 和 Angular CLI，让我们继续了解如何使用 Angular CLI 的各种命令。

创建新应用

要创建一个新应用，我们可以在命令提示符中执行 **“ng new <dir_name>”** 命令。执行此命令后，CLI 将在提供的目录名称中创建整个应用程序，并包含默认模板。它还会创建该目录。该模板还包含 Karma 和 Protractor 的配置，并默认使用 css 进行样式设置。

但是，如果我们不想要这些配置，而是想使用 SCSS 文件，该怎么办？不用担心，我们在创建新应用时还有其他选项。

• ng new <dir_name> –style <css/scss> ：默认情况下是 css，但如果我们想使用 scss，可以使用 –style 参数指定。
• ng new <dir_name> –minimal：这将创建一个配置最少的应用程序，不包含 Karma 和 Protractor 的配置，css 和 html 也将仅作为组件文件的一部分。
• ng new <dir_name> –skip-tests： 此命令将跳过创建单元测试用例文件。
• ng new <dir_name> –skip-install：此命令创建项目骨架，但不会下载依赖包。
• ng new <dir_name> –inline-style： 使用默认配置，我们会为每个组件创建单独的 css 文件，但此选项会将 css 作为内联样式包含在 .component.ts 文件中。
• ng new <dir_name> –inline-template：与 css 类似，我们会为视图创建单独的文件，此选项会将 html 作为组件的一部分，我们必须在 template 属性中提供整个 html。
• ng new <dir_name> –dry-run：此命令仅用于在不使用 –dry-run 参数运行命令时检查将创建哪些文件。
• ng new <dir_name> –service-worker：Service worker 是 Angular 5 中引入的一项新功能，使用此功能所需的最低要求是 Angular 5 和 CLI 1.6。此功能使我们能够离线运行我们的应用程序。此命令将帮助我们获得可用于此功能的默认配置。

下面是文件夹结构以及 ng new 命令输出的示例。

 

创建不同的文件

除了创建新应用，CLI 还帮助我们创建在 Angular 应用中使用的不同文件，这样我们就无需手动创建它们。让我们看看接下来的命令。

我们可以使用 “ng generate” 或 “ng g” 命令来添加不同的文件。

常用命令

有一些命令可以与所有类型的文件一起使用，让我们先看看它们。

<file_type>：c/module/service/guard/directive/pipe — 可用的文件类型选项

1. ng g <file_type> <name> –dry-run/-d/-dryRun：此命令将在不实际更改的情况下显示将要进行的更改。
2. ng g <file_type> <name> –force/-f/-force：在文件存在的情况下强制覆盖文件。
3. ng g <file_type> <name> –flat：CLI 为每个组件/模块创建一个文件夹，并跳过为指令/服务/守卫创建文件夹；如果指定此项，将跳过文件夹创建，所有文件将在 app 文件夹中创建；如果我们将其设置为 false，则会创建一个文件夹。
4. ng g <file_type> <name> –spec true/false：如果设置为 false，CLI 将跳过创建 .spec.ts 文件。
5. ng g <file_type> <name> –lint-fix/-lf/-lintFix：此命令将在文件生成后修复任何 linting 错误。
6. ng g <file_type> <name> –module/-m <value>：我们可以指定文件需要注册的模块名称。

注意：我们可以在单个命令中指定多个选项，以一起利用多个选项。

组件 (Component) 

要向我们的应用添加新组件，我们可以使用 “ng g c <component_name>” 命令。此命令将在我们使用 angular CLI 创建的应用程序中创建组件。例如，如果我们想创建 EmployeeComponent，只需在命令中传入 “ng g c Employee”。 CLI 默认会为组件创建 4 个文件。下面是将被创建的文件。

• employee.component.css：这是一个 css 文件，我们可以在其中编写 css 代码。
• employee.component.html：这是我们将编写要渲染的 html 的地方。
• employee.component.spec.ts：此文件用于编写我们的单元测试用例。
• employee.component.ts：这是我们将编写组件的 Typescript 代码的地方。
• 让我们看看我们可以与 “ng g c <component_name>” 命令一起使用的其他选项。
  1. ng g c <component_name> –inline-styles：在这种情况下，将不会创建 .css 文件，css 将作为 .component.ts 文件的一部分。
  2. ng g c <component_name> –inline-template：如果指定此项，则不会创建 .html 文件，它将作为 .component.ts 文件的一部分。
  3. ng g c <component_name> –view-encapsulation none/emulated/native：我们可以定义封装策略，可以选择 none/emulated/native。
  4. ng g c <component_name> –change-detection default/onpush：我们可以定义要使用的变更检测策略。如果不定义任何值，则使用默认值，或者定义 onpush。
  5. ng g c <component_name> –skip-import：默认情况下，CLI 会将创建的组件添加到模块的 declarations 数组中，如果指定此项，CLI 将跳过该条目。
  6.  ng g c <component_name> –selector <value>：如果我们不希望 CLI 创建选择器名称，我们可以指定一个。
  7. ng g c <component_name> –export：如果指定此项，CLI 还会将组件添加到 angular 模块的 exports 数组中。 
  8. ng g c <component_name> –prefix/-p <name>： 默认情况下，CLI 使用“app”作为所有组件的前缀，如果我们想覆盖它，有两种方法：在 .angular-cli.json 文件中更改，或者可以在命令中提供。
  9. ng g c <component_name> –styleext <value>： 我们可以指定要使用的样式表格式。默认使用 css，但我们也可以指定 scss。如果我们在创建应用时使用了 scss，那么将默认创建 scss。

Angular 模块

当我们使用 CLI 创建应用时，CLI 会默认创建一个 Angular 模块。我们可以在 app 文件夹中找到它，它名为 app.module.ts 。原因是 Angular 应用至少需要一个 Angular 模块，它将被用作根模块。但是，如果我们想创建更多 Angular 模块，我们可以这样做。用于创建 Angular 模块的命令是 “ng g module <module_name>”

让我们看看此命令的多个可用选项

1. ng g module <module_name> –routing：如果您需要一个单独的文件来定义特定模块的所有路由，您可以使用此选项。它将创建 2 个文件，一个用于模块，一个用于路由配置。假设我们执行 ng g module order –routing，输出将是下面的 2 个文件
2. ng g module <module_name> –common-module true/false： 当我们使用 CLI 创建一个新的 Angular 模块时，默认会导入 CommonModule。但如果我们为特定模块不想默认导入它，可以使用此选项。

服务

就像所有其他编程语言一样，服务在 Angular 应用中也至关重要。我们广泛使用服务来编写一些通用逻辑（可重用代码）、在多个组件之间共享数据，以及与我们的 REST API 进行交互。我们可以使用 “ng g service <service_name>” 命令来创建服务。

CLI 默认不注册也不为服务创建文件夹。如果您想在文件夹中创建服务，请确保从该文件夹执行此命令。例如，如果我们想在 Order 文件夹中创建服务，我们需要创建一个 Order 文件夹，然后从命令提示符切换到该文件夹。

CLI 默认创建 2 个文件。假设我们执行 “ng g service employee”，我们将得到下面显示的文件。

指令

当我们想要在 Angular 中进行 DOM 操作时，指令非常重要。它们几乎与组件相似，但它们没有自己的视图。

我们可以使用 “ng g directive <directive_name>” 指令没有 .css 和 .html 文件。

例如：如果我们执行 “ng g diretive hover”，将创建 2 个名为 “hover.directive.ts” 和 “hover.directive.spec.ts” 的文件。

让我们看看除常用命令之外的其他选项。

1. ng g directive <directive_name> –selector <value>： 如果我们不希望 CLI 创建选择器名称，我们可以指定一个。
2. ng g directive <directive_name> –export： 如果指定此项，CLI 还会将指令添加到 angular 模块的 exports 数组中。 
3. ng g directive <directive_name> –skip-import： 默认情况下，CLI 会将创建的指令添加到模块的 declarations 数组中，如果指定此项，CLI 将跳过该条目。

管道

Pipe 用于在 Angular 中转换 UI 中显示的数据。我们可以使用 “ng g pipe <pipe_name>”。CLI 为 pipe 创建 2 个文件，并将其注册到根组件。

让我们看看常用命令之外的其他选项。

1. ng g directive <directive_name> –export： 如果指定此项，CLI 还会将 pipe 添加到 angular 模块的 exports 数组中。 
2. ng g directive <directive_name> –skip-import： 默认情况下，CLI 会将创建的 pipe 添加到模块的 declarations 数组中，如果指定此项，CLI 将跳过该条目。

Guard（守卫）：

Guard 是 Angular 4 中路由引入的最重要功能之一。我们可以使用 “ng g guard <guard_name>” 来创建一个新的 guard。

Guard 与服务类似，它们也需要注册才能使用。

运行应用程序

要检查我们的应用程序是否运行正常，我们需要本地运行它以查看其工作方式和行为。我们可以使用 “ng serve/server/s” 命令。

一旦在命令提示符中看到类似上面的消息，请打开 Chrome 并输入 https://:4200/。

我们应该会看到下面的 UI。这是 Angular 的入门页面。

让我们看看此命令提供的其他选项。

1. ng serve –target/-t/-dev/prod <envorionment>：我们可以定义构建目标。默认情况下，它使用开发环境，我们可以使用生产环境作为其他选项，我们还可以为环境定义更多选项。如果我们使用 -dev 或 -prod 选项，则不需要 environment，因为 -dev 代表 –target=development，而 -prod 代表 –target=production。
2. ng serve –environment/-e <value>：定义构建环境。
3. ng serve –sourcemaps/–sm/–sourcemap <true/false>： 我们可以定义是否创建源映射。如果我们禁用它，我们将无法调试我们的应用程序。
4. ng serve –open <true/false>：如果指定此选项，应用程序将在构建成功后加载到默认浏览器中。
5. ng serve –ssl <true/false>： 如果指定此项，应用程序将在 https 模式下运行。
6. ng serve –ssl-key/–sslKey <kep_path>： 在 https 模式下运行时，我们可以指定要使用的 ssl-key 文件。
7. ng serve –ssl-cert/–sslCert <cert_path>： 在 https 模式下运行时，我们可以指定要使用的证书路径。
8. ng serve –live-reload/-lr/–liveReload <true/false>： 默认情况下，Angular 应用在进行任何更改时都会重新加载，我们可以控制是否要这样做。
9. ng serve –port <port_number>： 默认情况下，Angular CLI 使用 4200 端口运行应用，但如果 4200 端口已被使用，我们可以在此处指定端口。
10. ng serve –watch <true/false>：默认情况下，Angular 应用在 watch 模式下运行，我们可以使用此标志控制它。
11. ng serve –poll <time>： 启用并定义文件监视轮询时间间隔，时间以毫秒为单位。

运行测试用例

Angular 中可以编写两种类型的测试用例：单元测试和自动化测试用例。CLI 默认提供两者的配置。

单元测试用例

在我们的应用程序目录中创建的以 .spec.ts 结尾的文件被视为单元测试用例文件。代码使用 Jasmine 编写，可以使用 “ng test” 命令执行。

让我们看看可用的其他选项。

1. ng test –progress：此命令将应用程序构建的进度记录到控制台，此选项默认启用。
2. ng test –code-coverage：如果指定此项，我们将在 coverage 文件夹中获得代码覆盖率报告。覆盖率报告如下所示。
3. ng test –config <file_name>：如果使用 CLI 提供的默认配置文件以外的配置文件，请在此处指定。
4. ng test –single-run/-sr/–singleRun：运行单元测试一次。
5. ng test –browsers <browser_name>：指定测试用例将执行的浏览器，默认情况下 CLI 使用 Chrome。
6. ng test –port <port_number>：指定要使用的端口号。
7. ng test  –reporters <value>：指定要使用的报告器列表。

自动化测试用例

在我们的文件夹结构中，有一个名为 e2e 的文件夹，该文件夹用于自动化或端到端测试。在 Angular 中，我们使用 Protractor 编写端到端测试用例。要运行 e2e，我们可以简单地使用 “ng e2e” 命令。

让我们看看要使用的其他命令。

1. ng e2e –config <file>：默认情况下，Angular CLI 为我们提供了 Protractor 配置，但如果我们想使用另一个配置文件，可以在此处指定。
2. ng e2e –specs <file>：默认情况下，Protractor 将所有 spec.ts 文件视为测试用例，但如果我们只想执行 2 或 3 个文件，此命令非常有用。我们可以指定文件，例如 ng e2e –specs=app.e2e-spec.ts –specs=login.e2e-spec.ts
3. ng e2e –suite <name>： Suites 是组织相关测试用例的最佳方式。如果我们只想执行特定的测试 suites，可以使用此选项，例如 ng e2e –suite=smoke,regression。
4. ng e2e –webdriver-update/wu/webdriverUpdate <true/false>： 当我们尝试运行测试用例时，命令将默认尝试更新 webdriver，可以在此处禁用。

创建部署构建 

一旦我们的应用程序准备好使用，最重要的事情就是创建一个部署构建。使用 Angular CLI 创建部署构建非常容易，我们可以使用 “ng build” 命令来创建一个 dist 文件夹。

让我们看看用于创建部署构建的各种命令。

1. ng build –stats-json/statsJson <true/false>：此命令创建一个名为 stats.json 的额外文件，该文件可用于 webpack bundle analyser，您可以在此处找到它。
2. ng build –skip-app-shell/skipAppShell <true/false>： App shell 来自 angular universal，它将帮助我们缩短应用程序的初始加载时间。有关此功能的更多详细信息，请参阅此博文。
3. ng build –service-worker/sw/serviceWorker <true/false>： 此命令将为我们在生产环境中使用 service worker 提供配置文件。
4. ng build –target/-t/-dev/prod <envorionment>： 我们可以定义构建目标。默认情况下，它使用开发环境，我们可以使用生产环境作为其他选项，我们还可以为环境定义更多选项。如果我们使用 -dev 或 -prod 选项，则不需要 environment，因为 -dev 代表 –target=development，而 -prod 代表 –target=production。
5. ng build–environment/-e <value>： 定义构建环境。
6. ng build –output-path/-op/outputPath <value>： 默认情况下，CLI 将输出创建到 dist  文件夹中，但如果我们想将输出放到其他文件夹中，可以在此处指定文件夹名称，例如：ng build -op=dev
7. ng build –aot： 如果我们指定此标志，输出将使用 Ahead of Time (AOT) 编译生成。
8. ng build –sourcemaps/sm/sourcemap <true/false>： 我们可以定义是否创建源映射。如果我们禁用它，我们将无法调试我们的应用程序。在生产模式下，此选项默认禁用。
9. ng build –base-href/-bh/baseHref <value>： 在生产环境中，我们通常会将代码部署在某个上下文中，我们需要在此处提供相同的上下文名称。
10. ng build  –output-hashing/-oh/outputHashing=none|all|media|bundles：默认情况下，当我们创建构建时，CLI 会在文件名后面追加一些哈希值到所有输出文件，以实现缓存清除，因此每当部署新构建时，我们都不会遇到缓存问题。我们可以在此处定义策略，以防我们想覆盖某些文件类型。
11. ng build –show-circular-dependencies <true/false>： 此命令将报告我们代码中存在的任何循环依赖关系，此选项默认启用。
12. ng build –build-optimizer <true/false>：  此选项启用了 @angular-devkit/build-optimizer 提供的代码优化，此选项在 aot 和 Angular 5 中是启用的。

结论

Angular CLI 确实是一个很棒的工具，可以提高您的生产力。通过使用它，我们还可以确保我们的应用程序结构良好，并且易于理解应用程序结构，同时减少了应用程序进入支持阶段时的工作量。

如有任何疑问，您可以发送邮件至 santosh.yadav198613@gmail.com 与我联系。在下一篇博文中，我们将讨论 Angular 中的绑定。