angular 命令行项目_Angular命令行界面介绍

angular 命令行项目

Angular is closely associated with its command-line interface (CLI). The CLI streamlines generation of the Angular file system. It deals with most of the configuration behind the scenes so developers can start coding. The CLI also has a low learning curve recommendable for any newcomer wanting to jump right in. Heck, even experienced Angular developers rely on the CLI!

Angular与它的命令行界面(CLI)紧密相关。 CLI简化了Angular文件系统的生成。 它处理了幕后的大多数配置，因此开发人员可以开始编码。 CLI的学习曲线也很低，对于任何想马上加入的新手来说都是值得推荐的。

安装 (Installation)

The Angular CLI requires Node.js and Node Packet Manager (NPM). You can check for these programs with the terminal command: node -v; npm -v. Once installed, open a terminal and install the Angular CLI with this command: npm install -g @angular/cli. This can executed from anywhere on your system. The CLI is configured for global use with the -g flag.

Angular CLI需要Node.js和Node Packet Manager(NPM) 。 您可以使用以下终端命令检查这些程序： node -v; npm -v node -v; npm -v 。 安装完成后，打开终端并使用以下命令安装Angular CLI： npm install -g @angular/cli 。 这可以在系统上的任何位置执行。 通过-g标志将CLI配置为全局使用。

Verify the CLI is there with the command: ng -v. This outputs several lines of information. One of these lines state the version of the installed CLI.

使用以下命令验证CLI是否存在： ng -v 。 这将输出几行信息。 这些行之一表明已安装的CLI的版本。

Recognize that ng is the basic building block of the CLI. All your commands will begin with ng. Time to take a look at four of the most common commands prefixed with ng.

认识到ng是CLI的基本构建块。 您所有的命令都将以ng开头。 是时候来看一下以ng开头的四个最常见的命令了。

按键命令 (Key Commands)

• ng new
  ng新
• ng serve
  ng服务
• ng generate
  ng产生
• ng build
  ng构建
• ng update
  ng更新

The key terms for each of these are quite telling. Together, they comprise what you will need to hit the ground running with Angular. Of course, there are many more. All commands are outlined in the CLI’s GitHub Documentation¹. You will likely find that the commands listed above will cover the necessary bases.

这些中的每一个的关键术语都非常有说服力。 它们共同构成了您使用Angular运行时所需的条件。 当然，还有更多。 CLI的GitHub文档¹中概述了所有命令。 您可能会发现上面列出的命令将涵盖必要的基础。

ng新 (ng new)

ng new creates a new Angular file system. This is a surreal process. Please navigate to a file location desirable for new application generation. Type this command as follows, replacing [name-of-app] with whatever you want: ng new [name-of-app].

ng new创建一个新的 Angular文件系统。 这是一个超现实的过程。 请导航到生成新应用程序所需的文件位置。 键入以下命令，将[name-of-app]替换[name-of-app]您想要的任何内容： ng new [name-of-app] 。

A file system under the folder [name-of-app] should appear. Feel free to explore what lies within. Try to not make any changes yet. All of what you need to run your first Angular application comes packaged together in this generated file system.

应显示文件夹[name-of-app]下的文件系统。 随意探索其中的内容。 尝试不做任何更改。 运行第一个Angular应用程序所需的所有内容都打包在此生成的文件系统中。

ng服务 (ng serve)

To get the application running, the ng serve command must execute within the [name-of-app] folder. Anywhere within the folder will do. The Angular CLI must recognize that it is within an environment generated with ng new. It will run provided this one condition. Go ahead and try it: ng serve.

要使应用程序运行，必须在[name-of-app]文件夹中执行ng serve命令。 文件夹中的任何位置都可以。 Angular CLI必须认识到它在ng new生成的环境中。 只要满足这一条件，它将运行。 继续尝试： ng serve 。

The application runs on port 4200 by default. You can view the Angular application by navigating to localhost:4200 in any web browser. Angular works across all browsers. Unless you are using an old version of Internet Explorer, the application will pop up. It displays the official Angular logo alongside a list of helpful links.

默认情况下，该应用程序在端口4200上运行。 您可以通过在任何Web浏览器中导航到localhost:4200来查看Angular应用程序。 Angular可在所有浏览器中使用。 除非您使用旧版本的Internet Explorer，否则将弹出该应用程序。 它显示官方的Angular徽标以及有用的链接列表。

Ok, the application runs. It hopefully functions, but you need to know what is going on under the hood. Refer back to the [name-of-app] file system. Navigate [name-of-app] -> src -> app. Therein lies the files responsible for what you saw on localhost:4200.

好的，应用程序运行。 它有望发挥作用，但您需要了解引擎盖下正在发生的事情。 返回参考[name-of-app]文件系统。 浏览[name-of-app] -> src -> app 。 这些文件负责您在localhost:4200上看到的内容。

ng产生 (ng generate)

The .component files define an Angular component including its logic (.ts), style (.css), layout (.html), and testing (.spec.ts). The app.module.ts particularly stands out. Together, these two groups of files work together as component and module. Both component and module are two separate examples of Angular schematics. Schematics classify the different purpose-driven blocks of code generatable with ng generate.

.component文件定义了一个Angular组件，包括其逻辑( .ts )，样式( .css )，布局( .html )和测试( .spec.ts )。 app.module.ts特别突出。 这两组文件一起作为component和module一起工作。 component和module都是Angular原理图的两个单独示例。 原理图分类代码能发生的不同目的导向块与ng generate 。

For the sake of this article, understand that a module exports and imports assets to and from an underlying component tree. A component concerns itself with one section of the user interface. That unit’s logic, style, layout, and testing stays encapsulated within the various .component files.

为了本文的目的，请理解module将资产导入到底层组件树或从底层组件树导入资产。 component与用户界面的一部分有关。 该单元的逻辑，样式，布局和测试始终封装在各种.component文件中。

As for ng generate, this command can generate skeletons for each of the available Angular schematics². Navigate to [name-of-app -> src -> app]. Try generating a new component by executing: ng generate component [name-of-component]. Replace [name-of-component] with whatever you would like. A new file [name-of-component] will pop up along with its necessary component files.

至于ng generate ，此命令可以为每个可用的Angular原理图²生成骨架。 导航到[name-of-app -> src -> app] 。 尝试通过执行以下操作来ng generate component [name-of-component]新component ： ng generate component [name-of-component] 。 用任何您想要的替换[name-of-component] 。 将会弹出一个新文件[name-of-component]及其必需的component文件。

You can see that ng generateexpedites Angular’s boilerplate code. ng generate also wires things up. Schematics created within context of an Angular file system connect with the system’s root module. In this case, that would be app.module.ts file inside [name-of-app -> src -> app].

您会看到ng generate expedites Angular的样板代码 。 ng generate也会把东西连接起来。 在Angular文件系统的上下文中创建的示意图与系统的根模块连接。 在这种情况下，这将是[name-of-app -> src -> app] app.module.ts [name-of-app -> src -> app] app.module.ts文件。

ng构建 (ng build)

Angular is a front end tool. The CLI performs its operations on behalf of the front end. ng serve takes care of the back end server setup. This keeps development entirely focused on the front end. That said, connecting your own back end to the Angular application must also be possible.

Angular是一种前端工具。 CLI代表前端执行其操作。 ng serve负责后端服务器的设置。 这使开发完全集中在前端。 也就是说，还必须将自己的后端连接到Angular应用程序。

ng build fulfills this need. Before trying it out inside of the file system. Navigate to [name-of-app] -> angular.json. Look for this single line of code: "outputPath": "dist/my-app".

ng build满足了这一需求。 在文件系统内部尝试之前。 导航至[name-of-app] -> angular.json 。 查找以下单行代码： "outputPath": "dist/my-app" 。

This one line of configuration determines where ng build dumps its results. The results being the entire Angular application compiled into one folder dist/my-app. Inside of that folder, there exists index.html. The whole Angular application can run with index.html. No ng serve is necessary from here. With this file, you can easily wire up your back end.

这一行配置确定ng build将结果转储到何处。 结果是将整个Angular应用程序编译到一个文件夹dist/my-app 。 在该文件夹中，存在index.html 。 整个Angular应用程序都可以使用index.html运行。 从这里不需要ng serve 。 使用此文件，您可以轻松地连接后端。

Give it a go: ng build. Again, this must execute within the Angular file system. Based of the key value of “outputPath:” in angular.json. A file will generate wherein the original application is fully compiled. If you kept “outputPath:” the same, the compiled application will be in: [name-of-app] -> dist -> [name-of-app].

尝试一下： ng build 。 同样，这必须在Angular文件系统中执行。 基于angular.json中“outputPath:”的angular.json 。 将生成一个文件，其中原始应用程序已完全编译。 如果您将“outputPath:”保持不变， “outputPath:”编译的应用程序将位于： [name-of-app] -> dist -> [name-of-app] 。

ng更新 (ng update)

In angular cli ng update do automatic updation on all the angular and npm packages to latest versions.

在角度更新中，将所有角度和npm软件包自动更新到最新版本。

Here is the syntax and options can be used with ng update.

这是ng update可以使用的语法和选项。

ng update [package]

ng update [package]

选件 (Options)

• dry-run --dry-run (alias: -d)

  空运行- --dry-run (alias: -d)

  Run through without making any changes.

  无需进行任何更改即可运行。

• force --force

  力--force

  If false, will error out if installed packages are incompatible with the update.

  如果为false，如果已安装的软件包与更新不兼容，则会出错。

• all --all

  所有--all

  Whether to update all packages in package.json.

  是否更新package.json中的所有软件包。

• next --next

  未来--next

  Use the largest version, including beta and RCs.

  使用最大的版本，包括beta和RC。

• migrate-only --migrate-only

  迁移只--migrate-only

  Only perform a migration, does not update the installed version.

  仅执行迁移，不会更新已安装的版本。

• from --from

  从--from从

  Version from which to migrate from. Only available with a single package being updated, and only on migration only.

  从其迁移的版本。 仅在更新单个程序包时才可用，并且仅在迁移时才可用。

• to --to

  到--to

  Version up to which to apply migrations. Only available with a single package being updated, and only on migrations only. Requires from to be specified. Default to the installed version detected.

  应用迁移的版本。 仅在更新单个程序包时才可用，并且仅在迁移时才可用。 需要从指定。 默认为检测到的安装版本。

• registry --registry

  注册表--registry

  The NPM registry to use.

  要使用的NPM注册表。

These commands cover the basics. Angular’s CLI is an incredible convenience that expedites application generation, configuration, and expansion. It does all this while maintaining flexibility, allowing the developer to make necessary changes.

这些命令涵盖了基础知识。 Angular的CLI是令人难以置信的便利，可加快应用程序的生成，配置和扩展。 它在保持灵活性的同时做到了所有这些，使开发人员可以进行必要的更改。

Please check out those links on localhost:4200 if you have not already. Do not forget to run ng serve before opening it up. With a better understanding of the CLI, you are now ready to learn more about what is generated by its most essential commands.

如果尚未localhost:4200请在localhost:4200上查看这些链接。 不要忘了运行ng serve打开它之前。 在对CLI有了更好的了解之后，您现在就可以了解有关其最基本命令所生成内容的更多信息。

更多信息： (More information:)

• The Best Angular Examples

  最佳角度示例

• The Best Angular and AngularJS Tutorials

  最好的Angular和AngularJS教程

• How to Validate Angular Reactive Forms

  如何验证角React形式

翻译自: https://www.freecodecamp.org/news/angular-command-line-interface-explained/

angular 命令行项目