Skip to content

Commit 0731c7f

Browse files
authored
docs: traducir compartiendo módulos al español (#235)
Co-authored-by: Daniel Díaz <[email protected]> Fixes #165
1 parent cf2d40e commit 0731c7f

File tree

2 files changed

+83
-29
lines changed

2 files changed

+83
-29
lines changed
+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Sharing modules
2+
3+
Creating shared modules allows you to organize and streamline your code. You can put commonly
4+
used directives, pipes, and components into one module and then import just that module wherever
5+
you need it in other parts of your app.
6+
7+
Consider the following module from an imaginary app:
8+
9+
10+
```typescript
11+
import { CommonModule } from '@angular/common';
12+
import { NgModule } from '@angular/core';
13+
import { FormsModule } from '@angular/forms';
14+
import { CustomerComponent } from './customer.component';
15+
import { NewItemDirective } from './new-item.directive';
16+
import { OrdersPipe } from './orders.pipe';
17+
18+
@NgModule({
19+
imports: [ CommonModule ],
20+
declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
21+
exports: [ CustomerComponent, NewItemDirective, OrdersPipe,
22+
CommonModule, FormsModule ]
23+
})
24+
export class SharedModule { }
25+
```
26+
27+
Note the following:
28+
29+
* It imports the `CommonModule` because the module's component needs common directives.
30+
* It declares and exports the utility pipe, directive, and component classes.
31+
* It re-exports the `CommonModule` and `FormsModule`.
32+
33+
By re-exporting `CommonModule` and `FormsModule`, any other module that imports this
34+
`SharedModule`, gets access to directives like `NgIf` and `NgFor` from `CommonModule`
35+
and can bind to component properties with `[(ngModel)]`, a directive in the `FormsModule`.
36+
37+
Even though the components declared by `SharedModule` might not bind
38+
with `[(ngModel)]` and there may be no need for `SharedModule`
39+
to import `FormsModule`, `SharedModule` can still export
40+
`FormsModule` without listing it among its `imports`. This
41+
way, you can give other modules access to `FormsModule` without
42+
having to import it directly into the `@NgModule` decorator.
43+
44+
### Using components vs services from other modules
45+
46+
There is an important distinction between using another module's component and
47+
using a service from another module. Import modules when you want to use
48+
directives, pipes, and components. Importing a module with services means that you will have a new instance of that service, which typically is not what you need (typically one wants to reuse an existing service). Use module imports to control service instantiation.
49+
50+
The most common way to get a hold of shared services is through Angular
51+
[dependency injection](guide/dependency-injection), rather than through the module system (importing a module will result in a new service instance, which is not a typical usage).
52+
53+
To read about sharing services, see [Providers](guide/providers).
54+
55+
56+
<hr />
57+
58+
## More on NgModules
59+
60+
You may also be interested in the following:
61+
* [Providers](guide/providers).
62+
* [Types of Feature Modules](guide/module-types).
+21-29
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
# Sharing modules
1+
# Compartiendo módulos
22

3-
Creating shared modules allows you to organize and streamline your code. You can put commonly
4-
used directives, pipes, and components into one module and then import just that module wherever
5-
you need it in other parts of your app.
3+
La creación de módulos compartidos te permite organizar y optimizar tu código. Puedes colocar directivas, `pipes`, y componentes de uso común en un módulo y despues importar solo ese módulo donde lo necesites en otras partes de tu aplicación.
64

7-
Consider the following module from an imaginary app:
5+
Considera el siguiente módulo de una aplicación imaginaria:
86

97

108
```typescript
@@ -24,39 +22,33 @@ import { OrdersPipe } from './orders.pipe';
2422
export class SharedModule { }
2523
```
2624

27-
Note the following:
25+
Ten en cuenta lo siguiente:
2826

29-
* It imports the `CommonModule` because the module's component needs common directives.
30-
* It declares and exports the utility pipe, directive, and component classes.
31-
* It re-exports the `CommonModule` and `FormsModule`.
27+
* Esto importa `CommonModule` porque el componente del módulo necesita directivas comunes.
28+
* Declara y exporta las clases de componentes, directivas y `pipes`
29+
* Esto reexporta `CommonModule` y `FormsModule`.
3230

33-
By re-exporting `CommonModule` and `FormsModule`, any other module that imports this
34-
`SharedModule`, gets access to directives like `NgIf` and `NgFor` from `CommonModule`
35-
and can bind to component properties with `[(ngModel)]`, a directive in the `FormsModule`.
31+
Al reexportar `CommonModule` y `FormsModule`, cualquier otro módulo que importe este
32+
`SharedModule`, obtiene acceso a directivas como `NgIf` y `NgFor` desde `CommonModule`
33+
y puede vincularse a las propiedades del componente con `[(ngModel)]`, a una directiva en `FormsModule`.
3634

37-
Even though the components declared by `SharedModule` might not bind
38-
with `[(ngModel)]` and there may be no need for `SharedModule`
39-
to import `FormsModule`, `SharedModule` can still export
40-
`FormsModule` without listing it among its `imports`. This
41-
way, you can give other modules access to `FormsModule` without
42-
having to import it directly into the `@NgModule` decorator.
35+
Aunque los componentes declarados por `SharedModule` pueden no vincularse con `[(ngModel)]` y puede que no sea necesario que `SharedModule` importe `FormsModule`, `SharedModule` aún puede exportar
36+
`FormsModule` sin incluirlo entre sus `imports (importaciones)`. De esta manera, puedes dar acceso a otros módulos a `FormsModule` sin tener que importarlo directamente al decorador `@NgModule`.
4337

44-
### Using components vs services from other modules
38+
### Uso de componentes vs servicios de otros módulos
4539

46-
There is an important distinction between using another module's component and
47-
using a service from another module. Import modules when you want to use
48-
directives, pipes, and components. Importing a module with services means that you will have a new instance of that service, which typically is not what you need (typically one wants to reuse an existing service). Use module imports to control service instantiation.
40+
Existe una distinción importante entre usar el componente de otro módulo y utilizar un servicio de otro módulo. Importa módulos cuando quieras usar directivas, `pipes` y componentes. Importar un módulo con servicios significa que tendrá una nueva instancia de ese servicio, que normalmente no es lo que necesitas (normalmente, quieres reutilizar un servicio existente). Utiliza las importaciones de módulos para controlar la creación de instancias de servicios.
4941

50-
The most common way to get a hold of shared services is through Angular
51-
[dependency injection](guide/dependency-injection), rather than through the module system (importing a module will result in a new service instance, which is not a typical usage).
42+
La forma más común de obtener servicios compartidos es através de la
43+
[inyección de dependencia](guide/dependency-injection) en Angular, en lugar de a través del sistema del módulo (la importación de un módulo dará como resultado una nueva instancia de servicio, que no es un uso típico).
5244

53-
To read about sharing services, see [Providers](guide/providers).
45+
Para leer acerca de compartir servicios, consulta [Proveedores](guide/providers).
5446

5547

5648
<hr />
5749

58-
## More on NgModules
50+
## Más en NgModules
5951

60-
You may also be interested in the following:
61-
* [Providers](guide/providers).
62-
* [Types of Feature Modules](guide/module-types).
52+
También te puede interesar lo siguiente:
53+
* [Proveedores](guide/providers).
54+
* [Tipos de Módulos de funciones](guide/module-types).

0 commit comments

Comments
 (0)