173 lines
7.2 KiB
Markdown
173 lines
7.2 KiB
Markdown
# Lanzando tu aplicación con un módulo raíz
|
|
|
|
#### Pre-requisitos
|
|
|
|
Una comprensión básica de lo siguiente:
|
|
* [JavaScript Modules vs. NgModules](guide/ngmodule-vs-jsmodule).
|
|
|
|
<hr />
|
|
|
|
Un NgModule describe cómo encajan las partes de la aplicación.
|
|
Cada aplicación tiene al menos un módulo Angular, el módulo _root_,
|
|
que debe estar presente para arrancar la aplicación en el lanzamiento inicial.
|
|
Por convención y por defecto, este NgModule se llama `AppModule`.
|
|
|
|
Cuando se usa el comando de [Angular CLI](cli) `ng new` para generar una aplicación, el `AppModule` predeterminado es el siguiente.
|
|
|
|
```typescript
|
|
/* JavaScript imports */
|
|
import { BrowserModule } from '@angular/platform-browser';
|
|
import { NgModule } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { HttpClientModule } from '@angular/common/http';
|
|
|
|
import { AppComponent } from './app.component';
|
|
|
|
/* the AppModule class with the @NgModule decorator */
|
|
@NgModule({
|
|
declarations: [
|
|
AppComponent
|
|
],
|
|
imports: [
|
|
BrowserModule,
|
|
FormsModule,
|
|
HttpClientModule
|
|
],
|
|
providers: [],
|
|
bootstrap: [AppComponent]
|
|
})
|
|
export class AppModule { }
|
|
|
|
```
|
|
|
|
Después de las declaraciones de importación hay una clase con
|
|
[decorador](guide/glossary#decorator 'Explicando "Decorator"') **`@NgModule`**.
|
|
|
|
El decorador `@NgModule` identifica `AppModule` como una clase `NgModule`.
|
|
`@NgModule` toma un objeto de metadatos que le dice a Angular cómo compilar e iniciar la aplicación.
|
|
|
|
* **_declarations_**— el único componente de esta aplicación..
|
|
* **_imports_**— importar `BrowserModule` para tener servicios específicos del navegador como renderizado DOM, sanitization y ubicación.
|
|
* **_providers_**— los proveedores de servicios.
|
|
* **_bootstrap_**— el componente raíz que Angular crea e inserta
|
|
en la página web de host `index.html`.
|
|
|
|
La aplicación predeterminada creada por Angular CLI solo tiene un componente, `AppComponent`, por lo que
|
|
está en los arrays de `declarations` y `bootstrap`.
|
|
|
|
{@a the-declarations-array}
|
|
{@a declarations}
|
|
|
|
## El array `declarations`
|
|
|
|
El array de `declarations` le dice a Angular qué componentes pertenecen a ese módulo.
|
|
A medida que crees más componentes, agrégalos a las `declarations`.
|
|
|
|
Debe declarar cada componente en exactamente una clase `NgModule`.
|
|
Si se usa un componente sin declararlo, Angular devuelve un
|
|
mensaje de error.
|
|
|
|
El array `declarations` solo acepta declarables. Declarables pueden ser
|
|
componentes, [directivas](guide/attribute-directives) y [pipes](guide/pipes).
|
|
Todos los declarables de un módulo deben estar en el array de `declarations`.
|
|
Los declarables deben pertenecer exactamente a un módulo. El compilador emite
|
|
un error si se intenta declarar la misma clase en más de un módulo.
|
|
|
|
Estas clases declaradas son visibles dentro del módulo pero invisibles
|
|
a componentes en un módulo diferente, a menos que se exporten desde
|
|
éste módulo y el otro módulo importe éste mismo módulo.
|
|
|
|
A continuación, se muestra un ejemplo de un array `declarations`:
|
|
|
|
```typescript
|
|
declarations: [
|
|
YourComponent,
|
|
YourPipe,
|
|
YourDirective
|
|
],
|
|
```
|
|
|
|
Un declarable solo puede pertenecer a un módulo, por lo que solo debe ser declarado en
|
|
un `@NgModule`. Cuando se necesite en otro lugar,
|
|
importa el módulo que tiene el declarable que necesites.
|
|
|
|
**Solo las referencias de `@NgModule`** van en el array `imports`.
|
|
|
|
|
|
### Usando directivas con `@NgModule`
|
|
|
|
Usa el array `declarations` para las directivas.
|
|
Para usar una directiva, un componente o un pipe en un módulo, hay que hacer algunas cosas:
|
|
|
|
1. Exportarlo desde el archivo donde se escribió.
|
|
2. Importarlo al módulo apropiado.
|
|
3. Declararlo en el array `declarations` del `@NgModule`.
|
|
|
|
|
|
Esos tres pasos se parecen a los siguientes. En el archivo donde se crea la directiva, expórtalo.
|
|
El siguiente ejemplo, llamado `ItemDirective` es la estructura de directiva predeterminada que la CLI genera en su propio archivo, `item.directive.ts`:
|
|
|
|
<code-example path="bootstrapping/src/app/item.directive.ts" region="directive" header="src/app/item.directive.ts"></code-example>
|
|
|
|
El punto clave aquí es que se debe exportar para poder importarlo en otro lugar. A continuación, importar
|
|
en el `NgModule`, en este ejemplo, `app.module.ts` con una declaración de importación de JavaScript:
|
|
|
|
<code-example path="bootstrapping/src/app/app.module.ts" region="directive-import" header="src/app/app.module.ts"></code-example>
|
|
|
|
Y en el mismo archivo, agregarlo al array `declarations` del `@ NgModule`:
|
|
|
|
<code-example path="bootstrapping/src/app/app.module.ts" region="declarations" header="src/app/app.module.ts"></code-example>
|
|
|
|
|
|
Ahora puedes usar tu `ItemDirective` en un componente. Este ejemplo usa `AppModule`, pero se haría de la misma manera para un módulo de funciones. Para obtener más información sobre las directivas, consulta [Directivas de atributos](guide/attribute-directives) y [Directivas estructurales](guide/structural-directives). También se usaría la misma técnica para [pipes](guide/pipes) y componentes.
|
|
|
|
Recuerda, los componentes, directivas y pipes pertenecen a un solo módulo. Solo se necesita declararlos una vez en tu aplicación porque se comparten importando los módulos necesarios. Esto ahorra tiempo y ayuda a mantener la aplicación optimizada.
|
|
|
|
|
|
{@a imports}
|
|
|
|
## El array de `imports`
|
|
|
|
El array de `imports` del módulo aparece exclusivamente en el objeto de metadatos del `@NgModule`.
|
|
Le dice a Angular sobre otros NgModules que este módulo en particular necesita para funcionar correctamente.
|
|
|
|
Esta lista de módulos son los que exportan componentes, directivas o pipes
|
|
que las plantillas de componentes en este módulo hacen referencia. En este caso, el componente es
|
|
`AppComponent`, que hace referencia a componentes, directivas o pipes en `BrowserModule`,
|
|
`FormsModule`, o `HttpClientModule`.
|
|
Una plantilla de componente puede hacer referencia a otro componente, directiva,
|
|
o pipe cuando la clase referenciada se declara en este módulo o
|
|
la clase se importó de otro módulo.
|
|
|
|
{@a bootstrap-array}
|
|
|
|
## El array `providers`
|
|
|
|
El array `providers` es donde se enumeran los servicios que necesita la aplicación. Cuando
|
|
enumera los servicios, están disponibles en toda la aplicación. Puedes reducir el scope
|
|
al usar módulos de funciones y carga diferida. Para más información, ver
|
|
[Proveedores](guide/providers).
|
|
|
|
## El array `bootstrap`
|
|
|
|
La aplicación se inicia haciendo bootstraping desde la raíz `AppModule`, que es
|
|
también conocido como `entryComponent`.
|
|
Entre otras cosas, el proceso de carga crea los componentes enumerados en el array de `bootstrap`
|
|
e inserta cada uno en el DOM del navegador.
|
|
|
|
Cada componente bootstrap es la base de su propio árbol de componentes.
|
|
La inserción de un componente bootstrapped generalmente desencadena una cascada de
|
|
creaciones de componentes que completan ese árbol.
|
|
|
|
Si bien puedes colocar más de un árbol de componentes en una página web de host,
|
|
la mayoría de las aplicaciones tienen solo un árbol de componentes y arrancan un solo componente raíz.
|
|
|
|
Este componente raíz se suele llamar `AppComponent` y se encuentra en el
|
|
array `bootstrap` del módulo raíz.
|
|
|
|
|
|
## Más sobre módulos Angular
|
|
|
|
Para obtener más información sobre NgModules que probablemente veas con frecuencia en las aplicaciones,
|
|
consulta [Módulos de uso frecuente](guide/frequent-ngmodules).
|