CodeMix使用教程2：理解CLis的运行机制

程序员文章站 2022-03-22 14:41:33

...

Angular IDE 集成了用于Angular、npm 和Node的命令行接口（Clis），因此您可以受益于直观接口的易用性和命令行的灵活性。

在上一节里面我们讲解了Angular的创建，以及接下来会讲解的主要几个关于CodeMix开发的知识点，如果不是很清楚的朋友可以看上一篇内容或者登录Myeclipse中文网研究下整个体系。

命令行接口

直到几年前，大多数 Web 开发都使用 IDEs的高级图形界面，或者使用简单的文本编辑器等基本工具进行，无论您是要编写代码、部署应用程序还是将某些内容签入到版本控制系统中。

最近，命令行接口（Clis）的开发和使用重新抬头。在许多情况下，CLI 提供的灵活性超过了图形界面可以提供的灵活性。例如，大多数使用旧版本控制系统（如 CVS）的用户都会使用图形界面，但使用 Git 这样的现代 VCS 时，使用命令行无处不在。同样，现代 Web 开发在很大程度上依赖于 CLIs 的使用来处理从构建新应用程序，以及生成应用程序组件到将其部署到进行测试的所有问题。

Angular IDE 与 CLI 配合使用，为您提供更好的图形和命令行世界。如果需要，您可以同时使用直观界面的易用性和命令行的灵活性。

使用的工具

ng =Angular CLI 节点包
Node.js 和 npm =节点运行 ng; npm 管理节点包依赖项
Bash =ng 具有高级命令，必须在 Bash 外壳中处理

Angular IDE 不依赖于系统中存在的任何这些工具，并可按要求自动下载它们。

注意：在 Windows 上，本机终端无法处理某些 ng 命令，因此，如果不存在，则下载并安装 Git-Bash。

创建新项目

首次创建Angular项目时，Angular IDE 可确保相关依赖和工具可用。因为 Git Bash（在 Windows 上）以及项目创建向导中选择的节点、npm 和Angular CLI 版本被下载，您可以在”终端+”视图中监视下载进度。

注：可能需要下载大约 80 MB 的工具，因此所需时间可能因网络下周速度而异。下载后，即使切换到其他工作区，这些内容也无需下载。因此，在此系统上使用相同的版本创建的后续项目也不需要下载。

项目初始化命令

CodeMix使用教程2：理解CLis的运行机制

新的Angular项目向导

下载工具后，将执行以下命令以初始化项目：

`npm install aaa@qq.com(selected ng version)`	将 ng 安装到项目中
`npm install aaa@qq.com(selected npm version)`	将 npm 安装到项目中
`ng init --name (project name)`	在项目中创建骨架Angular应用程序、测试和元数据
`npm install --save-dev angular-ide`	安装我们的Angular ide 包，实现无缝命令行<>IDE 交互

这些命令在终端视图中运行，您可以在运行时查看每个命令的详细输出，从而更好地了解在创建项目期间发生的情况。

注：ng init 命令还下载 Angular 应用程序运行时需要的其他依赖项。这可能需要几分钟时间，具体取决于您的网络下载速度。

使用终端|

终端视图是一个智能的本地外壳，具有项目上下文感知功能。选择项目时，Angular IDE 可确保将Node、npm 和 ng（由此项目的设置确定）的正确版本添加到您的 PATH 中，因此当您执行 ng、npm 或Node命令时，将使用这些在项目创建期间选择的工具的版本。

请注意，可以从项目的终端属性页更改这些版本。您可以轻松地跨不同的项目使用这些工具的多个版本，且不用考虑他们的兼容问题。

CodeMix使用教程2：理解CLis的运行机制

Terminal+ 视图

生成Angular元素

使用向导生成Angular元素，如组件、指令、防护装置、模块、管道和服务。这些向导执行相应的 ng 命令来生成元素。

CodeMix使用教程2：理解CLis的运行机制

按代码混合表示的Angular IDE 中的Angular CLI 组件向导

例如，要生成名为 MyComponent 的组件，将在终端® 中执行以下命令。

ng generate component MyComponent

与往常一样，使用为该项目设置的 ng 版本，使用正确的上下文执行该命令。

可以使用多个其他交换机来自定义生成;例如，内联模板，创建模板 HTML 标记内联，而不是在单独的文件中，这是默认行为。除了向导支持的范围之外，您可以使用终端视图生成Angular类、接口、步高和路由。

部署应用程序

若要部署应用程序进行测试，请右键单击项目，然后从上下文菜单中选择”Run As/Debug As>Angular Web Application。或者从服务器视图进行部署。展开 Web 应用程序，选择项目，然后右键单击，然后从上下文菜单中选择”开始服务器”，或者单击”开始 CodeMix使用教程2：理解CLis的运行机制 “按钮。

CodeMix使用教程2：理解CLis的运行机制

启动服务器

您的应用程序不仅在浏览器中提供本地测试，还启动 LiveReload 服务器。使用 LiveReload 时，当您将更改保存到源文件时，将重新生成应用程序，更新部署，并刷新浏览器页面（如果打开）。

用于在本地部署应用程序的基本命令是：

ng serve