angular 模块_Angular模块简介

angular 模块

阅读之前要知道的事情 (Things to know before you read)

This article is geared towards people who have some experience with Angular. If this is your first time learning about Angular, go check out their docs on getting started!

本文针对的是对Angular有一定经验的人。 如果这是您第一次学习Angular，请查看他们的入门文档 ！

什么是Angular模块？ (What are Angular modules?)

Angular defines modules as a metadata object that describes how to compile a component’s template and how to create an injector at runtime. In other words, a module is a group of components, directives, pipes, and services that you want to make available in parts of your Angular application. These modules should have a single responsibility and be extensible to help you build your Angular application.

Angular将模块定义为元数据对象，该元数据对象描述了如何编译组件模板以及如何在运行时创建注入器。 换句话说，模块是要在Angular应用程序的某些部分中提供的一组组件，指令，管道和服务。 这些模块应负有单一责任，并且可以扩展以帮助您构建Angular应用程序。

常见的模块类型 (Common Types of Modules)

应用模块 (App Module)

The app (also referred to as root) module is the entry point module. Because of this, you want to keep this to the bare essentials needed to bootstrap your app. In this module, you will bring in entry-level components and other app-level modules. See

app (也称为root )模块是入口点模块。 因此，您希望将其保留为引导应用程序所需的基本知识。 在此模块中，您将引入入门级组件和其他应用程序级模块。 看到

核心模块 (Core Module)

The core module is used to provide your singleton services and any high-level functionality. Any component, directive, or pipe that isn’t feature specific and is only used once in the app should end up in the core module. An example of this could be a navbar or footer component that is called once in your app component. This module should be imported once in the App module.

core模块用于提供您的单例服务和任何高级功能。 任何与功能无关的组件，指令或管道，仅在应用程序中仅使用一次，应最终出现在core模块中。 例如，导航栏或页脚组件在您的app组件中被调用过一次。 此模块应在App模块中一次导入。

共享模块 (Shared Module)

The shared module holds common UI components, directives, and pipes that are going to be used in many — if not every — feature module. This can include common Material UI modules, such as MatButtonModule or MatSelectModule. If you notice you are importing a module into every feature module, you should refactor it to live in the shared module instead.

shared模块包含通用的UI组件，指令和管道，这些功能将在许多(即使不是每个)功能模块中使用。 这可以包括常见的Material UI模块，例如MatButtonModule或MatSelectModule 。 如果发现正在将模块导入每个功能模块，则应将其重构为驻留在shared模块中。

功能模块 (Feature Modules)

Feature modules will depend heavily on your application but ultimately this allows you to break up your app into small, single-purpose, chunks. In a feature module, you can import other modules, services, components, pipes, and directives that will be used in this feature.

功能模块将在很大程度上取决于您的应用程序，但是最终，这将使您可以将应用程序分解为单一的小块。 在功能模块中，您可以导入将在此功能中使用的其他模块，服务，组件，管道和指令。

路由模块 (Routing Module)

The routing module is used when your application needs to have multiple pages. For example, a shopping app might need a route to /shopping-cart and /inventory. You can have multiple routing modules within your application, typically these will correlate to a feature module. This article won't go over routing modules in-depth — if you are curious to learn more start here!

当您的应用程序需要多个页面时，将使用路由模块。 例如，购物应用可能需要到/shopping-cart和/inventory的路线。 您的应用程序中可以有多个路由模块，通常这些路由模块将与功能模块相关。 本文不会深入探讨路由模块-如果您想了解更多信息，请从这里开始 ！

定义模块 (Defining a Module)

You can define a module by importing NgModule decorator from @angular/core and passing a config with components, directives, pipes, and services that you want to use. Imagine we have a feature module called ShoppingCartModule — the module could look something like this:

您可以通过从@angular/core导入NgModule装饰器并传递包含您要使用的组件，指令，管道和服务的配置来定义模块。 假设我们有一个名为ShoppingCartModule的功能模块-该模块可能看起来像这样：

The config used above holds the most commonly used fields when defining a module. A more in-depth description of these fields can be found in Angular’s source code.

定义模块时，上面使用的配置包含最常用的字段。 可以在Angular的源代码中找到对这些字段的更深入的描述。

• delcarations : An array of components, pipes, and directives you want to make available to this module. This is scoped to the current module you are in.

  delcarations ：要供此模块使用的组件，管道和指令的数组。 此范围仅限于您所在的当前模块。

• imports : An array of other modules you will reference in this module

  imports ：您将在本模块中引用的其他模块的数组

• providers : An array of services that will only be used in this module. Rember that services can be singletons and in that case, and should only be provided once in your app. If you need to use this service in multiple places feature modules, move it into the core.module.ts .

  providers ：仅在此模块中使用的服务数组。 请记住， 在这种情况下， 服务可以是 单 例的，并且应仅在您的应用程序中提供一次。 如果需要在多个位置功能模块中使用此服务，请将其移至 core.module.ts 。

• exports : An array of components, directives, and pipes that you want to make available to the module this is imported to

  exports ：要对其导入到的模块可用的组件，指令和管道的数组

结论 (Conclusion)

As you can gather, Angular modules are a fundamental building block to any Angular application. They are a great way to consolidate components, directives, services, and pipes into specific chunks of functionality within your application.

如您所知，Angular模块是任何Angular应用程序的基本构建块。 它们是将组件，指令，服务和管道整合为应用程序中特定功能块的好方法。

翻译自: https://medium.com/@josce.james7/an-introduction-to-angular-modules-c26d441e42fa

angular 模块