mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
51 lines
2 KiB
Markdown
51 lines
2 KiB
Markdown
# Sharing modules
|
|
|
|
Creating shared modules allows you to organize and streamline your code.
|
|
You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application.
|
|
|
|
Consider the following module from an imaginary app:
|
|
|
|
<code-example format="typescript" language="typescript">
|
|
|
|
import { CommonModule } from '@angular/common';
|
|
import { NgModule } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { CustomerComponent } from './customer.component';
|
|
import { NewItemDirective } from './new-item.directive';
|
|
import { OrdersPipe } from './orders.pipe';
|
|
|
|
@NgModule({
|
|
imports: [ CommonModule ],
|
|
declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
|
|
exports: [ CustomerComponent, NewItemDirective, OrdersPipe,
|
|
CommonModule, FormsModule ]
|
|
})
|
|
export class SharedModule { }
|
|
|
|
</code-example>
|
|
|
|
Notice the following:
|
|
|
|
* It imports the `CommonModule` because the module's component needs common directives
|
|
* It declares and exports the utility pipe, directive, and component classes
|
|
* It re-exports the `CommonModule` and `FormsModule`
|
|
|
|
By re-exporting `CommonModule` and `FormsModule`, any other module that imports this `SharedModule`, gets access to directives like `NgIf` and `NgFor` from `CommonModule` and can bind to component properties with `[(ngModel)]`, a directive in the `FormsModule`.
|
|
|
|
Even though the components declared by `SharedModule` might not bind with `[(ngModel)]` and there may be no need for `SharedModule` to import `FormsModule`, `SharedModule` can still export `FormsModule` without listing it among its `imports`.
|
|
This way, you can give other modules access to `FormsModule` without having to import it directly into the `@NgModule` decorator.
|
|
|
|
## More on NgModules
|
|
|
|
You may also be interested in the following:
|
|
|
|
* [Providers](guide/providers)
|
|
* [Types of Feature Modules](guide/module-types)
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|