Angular控制台：简化AngularCLI体验
如果您曾经使用过 Angular（如果您正在阅读本文，我假设您有），那么不可否认 Angular CLI 的强大功能和便利性。 只需几次击键，您就可以生成一个功能齐全的 Web 应用程序。 这对许多开发人员来说非常有用，但是一些开发人员 - 尤其是那些来自非 Unix 开发环境的开发人员 - 可能更喜欢以 UI 为导向的方式来利用 CLI，从而消除所有命令可用的所有选项的猜测. 这就是 Angular 控制台的用武之地。 让我们开始吧！
下载并安装 Angular 控制台
前往 Angular Console，下载并安装适用于您平台的工具。 Angular Console 是一个桌面应用程序，安装向导你应该很熟悉。
注意：Angular 控制台由 Nrwl 创建。 截至本文发布时，该软件处于测试阶段。 该网站还指出，Linux 的版本是实验性的。
创建新工作区
首次运行应用程序时，第一步是打开现有工作区或创建新工作区。 出于本演示的目的，我们将创建一个新工作区。 请注意，如果您确实想打开现有工作区，Angular Console 仅与 Angular 6+ 项目兼容。
当你创建一个新的工作区时，你会得到一个小向导来选择父目录，名称你的工作区，然后选择一个示意图。 您不需要为您的项目手动创建文件夹； 只需选择将保存您的项目的目录，然后将根据您命名的项目为您的项目创建一个新文件夹。 截至目前，可供选择的两个原理图是 @schematics/angular（Angular CLI 使用的默认值）和 @nrwl/schematics，由 Nrwl 创建的自定义原理图包。
点击右上角的“创建”。 您实际上会看到 CLI 开始创建应用程序和安装依赖项。
管理工作区
一旦你创建了一个工作区，管理它就非常简单了——不需要在你旁边打开 Angular CLI 参考 来执行常见任务。 在工作区中，您可能有多个应用程序 - 如果您运行了上一步，您将看到两个：您的主项目和一个用于端到端测试的量角器项目。 每个应用程序都有一个常见 CLI 任务的简短列表，例如服务、测试或生成新组件的能力。
在左侧导航中，您有一些更高级的选项。
生成代码
本节允许您根据通过扩展加载的任何原理图为您的应用程序生成任何新代码（见下文）。 例如，如果您基于 @schematics/angular 原理图生成项目，您的选项可能包括：
- 服务工作者
- 应用
- 零件
- 指示
- 警卫
- 模块
- 管道
- 服务
……还有其他几个。
如果您添加了扩展，那么您可能会看到许多其他要生成的选项。
单击原理图可为您提供该原理图的所有可用选项的表单。 只需填写表格 - 它分为“重要”和“可选”字段 - 然后单击“生成”，瞧！ 无需再猜测 ng generate 的所有选项是什么！ 为该原理图定义的所有内容都可在此表单中获得，以及有关每个选项含义的有用提示。
用于生成指令的 Angular 控制台表单。
运行任务
在此选项卡上，您将看到项目的其他常见 CLI 任务列表，以及定义的任何 package.json 脚本。 CLI任务包括build、extract-i18n、lint、serve、test； 其中每一个都包含与代码生成示意图类似的形式，让您清楚地了解您可以在任务中包含的所有选项。
扩展
Angular Console 还允许您通过提供其他要包含的原理图包来“扩展”可用原理图的数量。 添加包后，这些代码生成项现在可以在“生成代码”选项卡中使用。 例如，我添加了 @angular/material 包，然后出现了以下原理图，每个原理图都有自己的形式，定义了所有可用的选项：
- ng-add-setup-project
- 仪表盘
- 桌子
- 导航
- 树
- 地址表格
结论
Angular Console 是一个简洁干净的基于 UI 的工具，可加快和简化开发人员使用 Angular CLI 的体验。 即使您仍然喜欢直接使用 CLI 来完成大多数任务，也值得一看 Angular Console - 像我一样，您可能会了解您甚至不知道存在的不同原理图和选项。
但是，存在一些限制，例如在生成新工作区/应用程序时设置的选项非常稀疏，或者无法添加您自己的自定义原理图包。 然而，这是相当新的、积极维护的开源软件。 因此，本文中提到的任何这些特性（或缺少的特性）都可能随着新版本的发布而改变。
