Template syntax	Sintaxis de plantilla
`<input [value]="firstName">`	Binds property `value` to the result of expression `firstName`. +	Vincula la propiedad `value` al resultado de la expresión `firstName`.
`<div [attr.role]="myAriaRole">`	Binds attribute `role` to the result of expression `myAriaRole`. +	Vincula el atributo `role` al resultado de la expresión `myAriaRole`.
`<div [class.extra-sparkle]="isDelightful">`	Binds the presence of the CSS class `extra-sparkle` on the element to the truthiness of the expression `isDelightful`. +	Vincula la presencia de la clase CSS `extra-sparkle` sobre el elemento a la veracidad de la expresión `isDelightful`.
`<div [style.width.px]="mySize">`	Binds style property `width` to the result of expression `mySize` in pixels. Units are optional. +	Vincula la propiedad de estilo `width` al resultado de la expresión `mySize` en píxeles. La unidad de medida es opcional.
`<button (click)="readRainbow($event)">`	Calls method `readRainbow` when a click event is triggered on this button element (or its children) and passes in the event object. +	Llama al método `readRainbow` cuando se lanza un evento clic en este elemento botón (o sus hijos) y pasa por argumento el objeto evento.
`<div title="Hello {{ponyName}}">`	`<div title="Hola {{ponyName}}">`	Vincula una propiedad a una cadena interpolada, por ejemplo, "Hola Seabiscuit". Equivalente a:	Binds a property to an interpolated string, for example, "Hello Seabiscuit". Equivalent to: -`<div [title]="'Hello ' + ponyName">` +`<div [title]="'Hola ' + ponyName">`
`<p>Hello {{ponyName}}</p>`	Binds text content to an interpolated string, for example, "Hello Seabiscuit". +	`<p>Hola {{ponyName}}</p>`	Vincula el contenido de texto a una cadena interpolada, por ejemplo, "Hola Seabiscuit".
`<my-cmp [(title)]="name">`	Sets up two-way data binding. Equivalent to: `<my-cmp [title]="name" (titleChange)="name=$event">` +	Establece el two-way data binding. Equivalente a: `<my-cmp [title]="name" (titleChange)="name=$event">`
`<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>`	Creates a local variable `movieplayer` that provides access to the `video` element instance in data-binding and event-binding expressions in the current template. +	Crea una variable local `movieplayer` que provee acceso a la instancia del elemento `video` en las expresiones de data-binding y event-binding de la actual plantilla.
`<p *myUnless="myExpression">...</p>`	The `*` symbol turns the current element into an embedded template. Equivalent to: +	El símbolo `*` convierte el elemento actual en una plantilla incrustada. Equivalente a: `<ng-template [myUnless]="myExpression"><p>...</p></ng-template>`
`<p>Card No.: {{cardNumber \| myCardNumberFormatter}}</p>`	Transforms the current value of expression `cardNumber` via the pipe called `myCardNumberFormatter`. +	Transforma el valor actual de la expresión `cardNumber` a través de la tubería `myCardNumberFormatter`.
`<p>Employer: {{employer?.companyName}}</p>`	The safe navigation operator (`?`) means that the `employer` field is optional and if `undefined`, the rest of the expression should be ignored. +	El operador de navegación seguro (`?`) significa que el campo `employer` es opcional y que si es `undefined`, el resto de la expresión debería ser ignorado.
`<svg:rect x="0" y="0" width="100" height="100"/>`	An SVG snippet template needs an `svg:` prefix on its root element to disambiguate the SVG element from an HTML component. +	Una plantilla de fragmento SVG necesita un prefijo `svg:` en su elemento raíz para distinguir el elemento SVG de un componente HTML.
`<svg> <rect x="0" y="0" width="100" height="100"/> </svg>`	An `<svg>` root element is detected as an SVG element automatically, without the prefix. +	Un elemento raíz `<svg>` es detectado como un elemento SVG automáticamente, sin el prefijo.

Built-in directives	Directivas incorporadas	`import { CommonModule } from '@angular/common';`
`<section *ngIf="showSection">`	Removes or recreates a portion of the DOM tree based on the `showSection` expression. +	Elimina o recrea una parte del árbol DOM basado en la expresión `showSection`.
`<li *ngFor="let item of list">`	Turns the li element and its contents into a template, and uses that to instantiate a view for each item in list. +	Convierte el elemento li y su contenido en una plantilla, y lo utiliza para crear una vista por cada elemento de la lista.
`<div [ngSwitch]="conditionExpression"> <ng-template [ngSwitchCase]="case1Exp">...</ng-template> <ng-template ngSwitchCase="case2LiteralString">...</ng-template> <ng-template ngSwitchDefault>...</ng-template> </div>`	Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of `conditionExpression`. +	Intercambia condicionalmente el contenido del div seleccionando una de las plantillas incrustadas en función del valor actual de `conditionExpression`.
`<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">`	Binds the presence of CSS classes on the element to the truthiness of the associated map values. The right-hand expression should return {class-name: true/false} map. +	Vincula la presencia de clases CSS en el elemento a la veracidad de los valores de mapa asociados. La expresión de la derecha debería devolver el mapa {class-name: true/false}.
`<div [ngStyle]="{'property': 'value'}">` `<div [ngStyle]="dynamicStyles()">`	Allows you to assign styles to an HTML element using CSS. You can use CSS directly, as in the first example, or you can call a method from the component. +	Le permite asignar estilos a un elemento HTML usando CSS. Puede usar CSS directamente, como en el primer ejemplo, o puede llamar a un método desde el componente.

Forms	Formularios	`import { FormsModule } from '@angular/forms';`
`<input [(ngModel)]="userName">`	Provides two-way data-binding, parsing, and validation for form controls. +	Provee two-way data-binding, conversión y validación para controles de formulario.

Class decorators	Decoradores de clases	`import { Directive, ... } from '@angular/core';`
`@Component({...}) class MyComponent() {}`	Declares that a class is a component and provides metadata about the component. +	Declara que una clase es un componente y proporciona metadatos sobre el componente.
`@Directive({...}) class MyDirective() {}`	Declares that a class is a directive and provides metadata about the directive. +	Declara que una clase es una directiva y proporciona metadatos sobre la directiva.
`@Pipe({...}) class MyPipe() {}`	Declares that a class is a pipe and provides metadata about the pipe. +	Declara que una clase es una tubería and y proporciona metadatos sobre la tubería.
`@Injectable() class MyService() {}`	Declares that a class can be provided and injected by other classes. Without this decorator, the compiler won't generate enough metadata to allow the class to be created properly when it's injected somewhere. +	Declara que una clase puede ser proporcionada e inyectada por otras clases. Sin este decorador, el compilador no generará suficientes metadatos para permitir que la clase se cree correctamente cuando se inyecta en alguna parte.

Directive configuration	Configuración de Directiva	`@Directive({ property1: value1, ... })`
`selector: '.cool-button:not(a)'`	Specifies a CSS selector that identifies this directive within a template. Supported selectors include `element`, +	Especifica un selector CSS que identifica esta directiva dentro de una plantilla. Los selectores compatibles incluyen `element`, `[attribute]`, `.class`, and `:not()`. - Does not support parent-child relationship selectors. + No soporta selectores de relación padre-hijo.
`providers: [MyService, { provide: ... }]`	List of dependency injection providers for this directive and its children. +	Lista de proveedores de inyección de dependencia para esta directiva y sus hijos.

Component configuration	Configuración de Componente	-`@Component` extends `@Directive`, -so the `@Directive` configuration applies to components as well +`@Component` extiende `@Directive`, +entonces la configuración de `@Directive` se aplica también a los componentes
`moduleId: module.id`	If set, the `templateUrl` and `styleUrl` are resolved relative to the component. +	Si está presente, el `templateUrl` y `styleUrl` se resuelven en relación con el componente.
`viewProviders: [MyService, { provide: ... }]`	List of dependency injection providers scoped to this component's view. +	Lista de proveedores de inyección de dependencias en la vista de este componente.
`template: 'Hello {{name}}' templateUrl: 'my-component.html'`	Inline template or external template URL of the component's view. +	`template: 'Hola {{name}}' templateUrl: 'my-component.html'`	Plantilla en línea o URL de plantilla externa de la vista del componente.
`styles: ['.primary {color: red}'] styleUrls: ['my-component.css']`	List of inline CSS styles or external stylesheet URLs for styling the component’s view. +	Lista de estilos CSS en línea o URL de hojas de estilo externas para estilar la vista del componente.

Class field decorators for directives and components	Decoradores para los campos de la clase para directivas y componentes.	`import { Input, ... } from '@angular/core';`
`@Input() myProperty;`	Declares an input property that you can update via property binding (example: +	Declara una propiedad de entrada (input) que puede actualizar mediante el enlace de propiedad (property binding) (ejemplo: `<my-cmp [myProperty]="someExpression">`).
`@Output() myEvent = new EventEmitter();`	Declares an output property that fires events that you can subscribe to with an event binding (example: `<my-cmp (myEvent)="doSomething()">`). +	Declara una propiedad de salida (output) que dispara eventos a los que puede suscribirse con un enlace de evento (event binding) (ejemplo: `<my-cmp (myEvent)="doSomething()">`).
`@HostBinding('class.valid') isValid;`	Binds a host element property (here, the CSS class `valid`) to a directive/component property (`isValid`). +	Vincula una propiedad del elemento anfitrión (aquí, la clase CSS `valid`) a una propiedad de directiva/componente (`isValid`).
`@HostListener('click', ['$event']) onClick(e) {...}`	Subscribes to a host element event (`click`) with a directive/component method (`onClick`), optionally passing an argument (`$event`). +	Se suscribe a un evento del elemento anfitrión (`click`) con un método de directiva/componente (`onClick`), opcionalmente, pasando un argumento (`$event`).
`@ContentChild(myPredicate) myChildComponent;`	Binds the first result of the component content query (`myPredicate`) to a property (`myChildComponent`) of the class. +	Vincula el primer resultado de la consulta de contenido del componente (`myPredicate`) a una propiedad (`myChildComponent`) de la clase.
`@ContentChildren(myPredicate) myChildComponents;`	Binds the results of the component content query (`myPredicate`) to a property (`myChildComponents`) of the class. +	Vincula los resultados de la consulta de contenido del componente (`myPredicate`) a una propiedad (`myChildComponents`) de la clase.
`@ViewChild(myPredicate) myChildComponent;`	Binds the first result of the component view query (`myPredicate`) to a property (`myChildComponent`) of the class. Not available for directives. +	Vincula el primer resultado de la consulta de vista del componente (`myPredicate`) a una propiedad (`myChildComponent`) de la clase. No disponible para directivas.
`@ViewChildren(myPredicate) myChildComponents;`	Binds the results of the component view query (`myPredicate`) to a property (`myChildComponents`) of the class. Not available for directives. +	Vincula los resultados de la consulta de vista del componente (`myPredicate`) a una propiedad (`myChildComponents`) de la clase. No disponible para directivas.

Directive and component change detection and lifecycle hooks	(implemented as class methods) + +	Detección de cambios (change detection) y ciclos de vida (lifecycle hooks) en directivas y componentes	(implementado como métodos de clase)
`constructor(myService: MyService, ...) { ... }`	Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here. +	Se llama antes que cualquier ciclo de vida. Úselo para inyectar dependencias, pero evite cualquier trabajo serio aquí.
`ngOnChanges(changeRecord) { ... }`	Called after every change to input properties and before processing content or child views. +	Se llama después de cada cambio en las propiedades de entrada (input) y antes de procesar contenido o vistas de hijos.
`ngOnInit() { ... }`	Called after the constructor, initializing input properties, and the first call to `ngOnChanges`. +	Se llama después del constructor, inicializando propiedades de entrada (input), y la primera llamada a `ngOnChanges`.
`ngDoCheck() { ... }`	Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check. +	Se llama cada vez que se verifican las propiedades de entrada (input) de un componente o una directiva. Úselo para extender la detección de cambios (change detection) realizando una verificación personalizada.
`ngAfterContentInit() { ... }`	Called after `ngOnInit` when the component's or directive's content has been initialized. +	Se llama después de `ngOnInit` cuando el contenido del componente o directiva ha sido inicializado.
`ngAfterContentChecked() { ... }`	Called after every check of the component's or directive's content. +	Se llama después de cada verificación del contenido del componente o directiva.
`ngAfterViewInit() { ... }`	Called after `ngAfterContentInit` when the component's views and child views / the view that a directive is in has been initialized. +	Se llama después de `ngAfterContentInit` cuando las vistas del componente y las vistas hijas / la vista en la que se encuentra una directiva ha sido inicializado.
`ngAfterViewChecked() { ... }`	Called after every check of the component's views and child views / the view that a directive is in. +	Se llama después de cada verificación de las vistas del componentes y las vistas hijas / la vista en la que se encuentra una directiva.
`ngOnDestroy() { ... }`	Called once, before the instance is destroyed. +	Se llama una vez, antes de que la instancia se destruya.

Dependency injection configuration	Configuración de inyección de dependencia
`{ provide: MyService, useClass: MyMockService }`	Sets or overrides the provider for `MyService` to the `MyMockService` class. +	Establece o sobre-escribe el proveedor para `MyService` en la clase `MyMockService`.
`{ provide: MyService, useFactory: myFactory }`	Sets or overrides the provider for `MyService` to the `myFactory` factory function. +	Establece o sobre-escribe el proveedor para `MyService` en la factoría de función `myFactory`.
`{ provide: MyValue, useValue: 41 }`	Sets or overrides the provider for `MyValue` to the value `41`. +	Establece o sobre-escribe el proveedor para `MyValue` al valor `41`.

Routing and navigation	Enrutamiento y navegación	`import { Routes, RouterModule, ... } from '@angular/router';`
`const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'path/:routeParam', component: MyComponent }, { path: 'staticPath', component: ... }, { path: '**', component: ... }, { path: 'oldPath', redirectTo: '/staticPath' }, { path: ..., component: ..., data: { message: 'Custom' } } ]); const routing = RouterModule.forRoot(routes);`	Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve. +	Configura rutas para la aplicación. Soporta rutas estáticas, parametrizadas, de redireccionamiento y comodines. También soporta datos de ruta personalizados y los resuelve.
`<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet>`	Marks the location to load the component of the active route. +	Marca la ubicación para cargar el componente de la ruta activa.
`<a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor">`	Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters, and a fragment. To navigate to a root route, use the `/` prefix; for a child route, use the `./`prefix; for a sibling or parent, use the `../` prefix. +	Crea un enlace a una vista diferente basada en una instrucción de ruta que consta de un camino de de ruta, parámetros obligatorios y opcionales, parámetros de consulta y un fragmento. Para navegar a un camino de ruta, usa el prefijo `/`; para una ruta hija, usa el prefijo `./`; para un padre o hermano, usa el prefijo `../`.
`<a [routerLink]="[ '/path' ]" routerLinkActive="active">`	The provided classes are added to the element when the `routerLink` becomes the current active route. +	Las clases proporcionadas se agregan al elemento cuando el `routerLink` se convierte en la ruta activa actual.
`class CanActivateGuard implements CanActivate { canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean\|UrlTree>\|Promise<boolean\|UrlTree>\|boolean\|UrlTree { ... } } { path: ..., canActivate: [CanActivateGuard] }`	An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean\|UrlTree or an Observable/Promise that resolves to a boolean\|UrlTree. +	Una interfaz para definir una clase que el enrutador debe llamar primero para determinar si debe activar este componente. Debe devolver un boolean\|UrlTree o un Observable/Promise que se resuelba en un boolean\|UrlTree.
`class CanDeactivateGuard implements CanDeactivate<T> { canDeactivate( component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean\|UrlTree>\|Promise<boolean\|UrlTree>\|boolean\|UrlTree { ... } } { path: ..., canDeactivate: [CanDeactivateGuard] }`	An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean\|UrlTree or an Observable/Promise that resolves to a boolean\|UrlTree. +	Una interfaz para definir una clase que el enrutador debería llamar primero para determinar si debería desactivar este componente después de una navegación. Debe devolver un boolean\|UrlTree o un Observable/Promise que se resuelva a boolean\|UrlTree.
`class CanActivateChildGuard implements CanActivateChild { canActivateChild( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean\|UrlTree>\|Promise<boolean\|UrlTree>\|boolean\|UrlTree { ... } } { path: ..., canActivateChild: [CanActivateGuard], children: ... }`	An interface for defining a class that the router should call first to determine if it should activate the child route. Should return a boolean\|UrlTree or an Observable/Promise that resolves to a boolean\|UrlTree. +	Una interfaz para definir una clase que el enrutador debe llamar primero para determinar si debe activar la ruta hija. Debe devolver un boolean\|UrlTree o un Observable/Promise que se resuelva en un boolean\|UrlTree.
`class ResolveGuard implements Resolve<T> { resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any>\|Promise<any>\|any { ... } } { path: ..., resolve: [ResolveGuard] }`	An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value. +	Una interfaz para definir una clase que el enrutador debe llamar primero para resolver los datos de la ruta antes de representar la ruta. Debe devolver un valor o un Observable/Promise que se resuelva en un valor.
`class CanLoadGuard implements CanLoad { canLoad( route: Route ): Observable<boolean\|UrlTree>\|Promise<boolean\|UrlTree>\|boolean\|UrlTree { ... } } { path: ..., canLoad: [CanLoadGuard], loadChildren: ... }`	An interface for defining a class that the router should call first to check if the lazy loaded module should be loaded. Should return a boolean\|UrlTree or an Observable/Promise that resolves to a boolean\|UrlTree. +	Una interfaz para definir una clase a la que el enrutador debe llamar primero para verificar si el módulo perezoso cargado (lazy loaded module) debe cargarse. Debe devolver un boolean\|UrlTree o un Observable/Promise que se resuelva en un boolean\|UrlTree.

No need to wait for content updates

From cb0aeaf70810f80e1f16c43983fd2ceb718a2f1e Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Thu, 23 Jul 2020 16:30:31 -0700 Subject: [PATCH 044/253] docs(core): Fix incorrectly rendered code example in structural directives guide (#38207) The code example was missing a close brace and also incorrectly rendered the template div as an actual div in the page DOM. PR Close #38207 --- aio/content/guide/structural-directives.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md index 8b2bd6bc2d4e..b49c5199d8c2 100644 --- a/aio/content/guide/structural-directives.md +++ b/aio/content/guide/structural-directives.md @@ -879,12 +879,14 @@ export type LoadingState = Loaded | Loading; export class IfLoadedDirective { @Input('ifLoaded') set state(state: LoadingState) {} static ngTemplateGuard_state(dir: IfLoadedDirective, expr: LoadingState): expr is Loaded { return true; }; +} + export interface Person { name: string; } @Component({ - template: `

`, + template: `<div *ifLoaded="state">{{ state.data }}</div>`, }) export class AppComponent { state: LoadingState; From 54679ea9ccabbdd10b06f82f1dc9535a1dc9ed84 Mon Sep 17 00:00:00 2001 From: Andrii Date: Fri, 24 Jul 2020 06:44:28 +0300 Subject: [PATCH 045/253] docs: Fix link by removing a space (#38214) PR Close #38214 --- aio/content/guide/interpolation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/interpolation.md b/aio/content/guide/interpolation.md index 411829328a35..524cc42f90de 100644 --- a/aio/content/guide/interpolation.md +++ b/aio/content/guide/interpolation.md @@ -170,6 +170,6 @@ If an idempotent expression returns a string or a number, it returns the same st

-There is one exception to this behavior that applies to `*ngFor`. `*ngFor` has `trackBy` functionality that can deal with referential inequality of objects when iterating over them. See [*ngFor with `trackBy`](guide/built-in-directives #ngfor-with-trackby) for details. +There is one exception to this behavior that applies to `*ngFor`. `*ngFor` has `trackBy` functionality that can deal with referential inequality of objects when iterating over them. See [*ngFor with `trackBy`](guide/built-in-directives#ngfor-with-trackby) for details.

From 788532dc991ca3057151c85618b9a4c0bda8d42d Mon Sep 17 00:00:00 2001 From: JiaLiPassion Date: Fri, 19 Jul 2019 23:14:28 +0900 Subject: [PATCH 046/253] feat(zone.js): move MutationObserver/FileReader to different module (#31657) Separate `EventTarget`, `FileReader`, `MutationObserver` and `IntersectionObserver` patches into different module. So the user can disable those modules separately. PR Close #31657 --- packages/zone.js/MODULE.md | 4 ++++ packages/zone.js/lib/browser/browser.ts | 11 ++++++++++- packages/zone.js/lib/zone.configurations.api.ts | 15 +++++++++++++++ 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/zone.js/MODULE.md b/packages/zone.js/MODULE.md index 4bd378307ea8..e58fab2b7ec8 100644 --- a/packages/zone.js/MODULE.md +++ b/packages/zone.js/MODULE.md @@ -36,6 +36,10 @@ Below is the full list of currently supported modules. |requestAnimationFrame|requestAnimationFrame will be patched as Zone MacroTask|__Zone_disable_requestAnimationFrame = true| |blocking|alert/prompt/confirm will be patched as Zone.run|__Zone_disable_blocking = true| |EventTarget|target.addEventListener will be patched as Zone aware EventTask|__Zone_disable_EventTarget = true| +|MutationObserver|MutationObserver will be patched as Zone aware operation|__Zone_disable_MutationObserver = true| +|IntersectionObserver|Intersection will be patched as Zone aware operation|__Zone_disable_Intersection = true| +|FileReader|FileReader will be patched as Zone aware operation|__Zone_disable_FileReader = true| +|canvas|HTMLCanvasElement.toBlob will be patched as Zone aware operation|__Zone_disable_canvas = true| |IE BrowserTools check|in IE, browser tool will not use zone patched eventListener|__Zone_disable_IE_check = true| |CrossContext check|in webdriver, enable check event listener is cross context|__Zone_enable_cross_context_check = true| |XHR|XMLHttpRequest will be patched as Zone aware MacroTask|__Zone_disable_XHR = true| diff --git a/packages/zone.js/lib/browser/browser.ts b/packages/zone.js/lib/browser/browser.ts index 0e56beaaec88..3023e1941d85 100644 --- a/packages/zone.js/lib/browser/browser.ts +++ b/packages/zone.js/lib/browser/browser.ts @@ -12,7 +12,7 @@ import {findEventTasks} from '../common/events'; import {patchTimer} from '../common/timers'; -import {patchClass, patchMethod, patchPrototype, scheduleMacroTaskWithCurrentZone, ZONE_SYMBOL_ADD_EVENT_LISTENER, ZONE_SYMBOL_REMOVE_EVENT_LISTENER, zoneSymbol} from '../common/utils'; +import {patchClass, patchMethod, patchPrototype, scheduleMacroTaskWithCurrentZone, ZONE_SYMBOL_ADD_EVENT_LISTENER, ZONE_SYMBOL_REMOVE_EVENT_LISTENER, zoneSymbol,} from '../common/utils'; import {patchCustomElements} from './custom-elements'; import {eventTargetPatch, patchEvent} from './event-target'; @@ -59,9 +59,18 @@ Zone.__load_patch('EventTarget', (global: any, Zone: ZoneType, api: _ZonePrivate if (XMLHttpRequestEventTarget && XMLHttpRequestEventTarget.prototype) { api.patchEventTarget(global, [XMLHttpRequestEventTarget.prototype]); } +}); + +Zone.__load_patch('MutationObserver', (global: any, Zone: ZoneType, api: _ZonePrivate) => { patchClass('MutationObserver'); patchClass('WebKitMutationObserver'); +}); + +Zone.__load_patch('IntersectionObserver', (global: any, Zone: ZoneType, api: _ZonePrivate) => { patchClass('IntersectionObserver'); +}); + +Zone.__load_patch('FileReader', (global: any, Zone: ZoneType, api: _ZonePrivate) => { patchClass('FileReader'); }); diff --git a/packages/zone.js/lib/zone.configurations.api.ts b/packages/zone.js/lib/zone.configurations.api.ts index 4c6cfe98c342..c53c81dd2b35 100644 --- a/packages/zone.js/lib/zone.configurations.api.ts +++ b/packages/zone.js/lib/zone.configurations.api.ts @@ -325,6 +325,21 @@ interface ZoneGlobalConfigurations { */ __Zone_disable_EventTarget?: boolean; + /** + * Disable the monkey patch of the browser `FileReader` APIs. + */ + __Zone_disable_FileReader?: boolean; + + /** + * Disable the monkey patch of the browser `MutationObserver` APIs. + */ + __Zone_disable_MutationObserver?: boolean; + + /** + * Disable the monkey patch of the browser `IntersectionObserver` APIs. + */ + __Zone_disable_IntersectionObserver?: boolean; + /** * Disable the monkey patch of the browser onProperty APIs(such as onclick). * From 9e7ce2c91692ef7fee44931c2a7fe58ca42f23d4 Mon Sep 17 00:00:00 2001 From: JiaLiPassion Date: Wed, 1 Jul 2020 06:11:14 +0900 Subject: [PATCH 047/253] fix(zone.js): clearTimeout/clearInterval should call on object global (#37858) Close #37333 `clearTimeout` is patched by `zone.js`, and it finally calls the native delegate of `clearTimeout`, the current implemention only call `clearNative(id)`, but it should call on object `global` like `clearNative.call(global, id)`. Otherwise in some env, it will throw error `clearTimeout called on an object that does not implement interface Window` PR Close #37858 --- packages/zone.js/lib/common/timers.ts | 2 +- .../zone.js/test/common/setTimeout.spec.ts | 21 +++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/zone.js/lib/common/timers.ts b/packages/zone.js/lib/common/timers.ts index 50889dbc0edf..e1d68b5a6d57 100644 --- a/packages/zone.js/lib/common/timers.ts +++ b/packages/zone.js/lib/common/timers.ts @@ -55,7 +55,7 @@ export function patchTimer(window: any, setName: string, cancelName: string, nam } function clearTask(task: Task) { - return clearNative!((task.data).handleId); + return clearNative!.call(window, (task.data).handleId); } setNative = diff --git a/packages/zone.js/test/common/setTimeout.spec.ts b/packages/zone.js/test/common/setTimeout.spec.ts index ed62e586ae8b..7d4f31eb6a91 100644 --- a/packages/zone.js/test/common/setTimeout.spec.ts +++ b/packages/zone.js/test/common/setTimeout.spec.ts @@ -6,7 +6,9 @@ * found in the LICENSE file at https://angular.io/license */ +import {patchTimer} from '../../lib/common/timers'; import {isNode, zoneSymbol} from '../../lib/common/utils'; + declare const global: any; const wtfMock = global.wtfMock; @@ -56,6 +58,25 @@ describe('setTimeout', function() { }); }); + it('should call native clearTimeout with the correct context', function() { + // since clearTimeout has been patched already, we can not test `clearTimeout` directly + // we will fake another API patch to test + let context: any = null; + const fakeGlobal = { + setTimeout: function() { + return 1; + }, + clearTimeout: function(id: number) { + context = this; + } + }; + patchTimer(fakeGlobal, 'set', 'clear', 'Timeout') + const cancelId = fakeGlobal.setTimeout(); + const m = fakeGlobal.clearTimeout; + m.call({}, cancelId); + expect(context).toBe(fakeGlobal); + }); + it('should allow cancelation of fns registered with setTimeout after invocation', function(done) { const testZone = Zone.current.fork((Zone as any)['wtfZoneSpec']).fork({name: 'TestZone'}); testZone.run(() => { From f1a92872a4e6ffaf53736bd6e3c7f8294165bf2a Mon Sep 17 00:00:00 2001 From: JiaLiPassion Date: Wed, 1 Jul 2020 07:15:22 +0900 Subject: [PATCH 048/253] fix(zone.js): patch nodejs EventEmtter.prototype.off (#37863) Close #35473 zone.js nodejs patch should also patch `EventEmitter.prototype.off` as `removeListener`. So `off` can correctly remove the listeners added by `EventEmitter.prototype.addListener` PR Close #37863 --- packages/zone.js/lib/node/events.ts | 2 ++ packages/zone.js/test/node/events.spec.ts | 12 ++++++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/zone.js/lib/node/events.ts b/packages/zone.js/lib/node/events.ts index 2366332c5cd5..f09f8a42167a 100644 --- a/packages/zone.js/lib/node/events.ts +++ b/packages/zone.js/lib/node/events.ts @@ -16,6 +16,7 @@ Zone.__load_patch('EventEmitter', (global: any) => { const EE_REMOVE_ALL_LISTENER = 'removeAllListeners'; const EE_LISTENERS = 'listeners'; const EE_ON = 'on'; + const EE_OFF = 'off'; const compareTaskCallbackVsDelegate = function(task: any, delegate: any) { // same callback, same capture, same event name, just return @@ -47,6 +48,7 @@ Zone.__load_patch('EventEmitter', (global: any) => { }); if (result && result[0]) { obj[EE_ON] = obj[EE_ADD_LISTENER]; + obj[EE_OFF] = obj[EE_REMOVE_LISTENER]; } } diff --git a/packages/zone.js/test/node/events.spec.ts b/packages/zone.js/test/node/events.spec.ts index f50b0eb02fb0..9cab424169c5 100644 --- a/packages/zone.js/test/node/events.spec.ts +++ b/packages/zone.js/test/node/events.spec.ts @@ -66,6 +66,18 @@ describe('nodejs EventEmitter', () => { emitter.emit('test2', 'test value'); }); }); + it('should remove listeners by calling off properly', () => { + zoneA.run(() => { + emitter.on('test', shouldNotRun); + emitter.on('test2', shouldNotRun); + emitter.off('test', shouldNotRun); + }); + zoneB.run(() => { + emitter.off('test2', shouldNotRun); + emitter.emit('test', 'test value'); + emitter.emit('test2', 'test value'); + }); + }); it('remove listener should return event emitter', () => { zoneA.run(() => { emitter.on('test', shouldNotRun); From f0209416296c981079d93a9102dd3eea52334bf9 Mon Sep 17 00:00:00 2001 From: JiaLiPassion Date: Sat, 4 Jul 2020 08:54:19 +0900 Subject: [PATCH 049/253] docs(zone.js): update zone.js bundle doc since the APF change (#37919) Since the PR #36540 change the zone.js bundles to Angular Package Format, the bundle name/location are changed, so this PR updated the `README.md` doc for the zone bundles. Also add the recent added new bundles `zone-patch-message-port` doc. PR Close #37919 --- packages/zone.js/README.md | 61 ++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/packages/zone.js/README.md b/packages/zone.js/README.md index 809435561110..d356f4eabc88 100644 --- a/packages/zone.js/README.md +++ b/packages/zone.js/README.md @@ -54,39 +54,50 @@ For more details, please see [MODULE.md](MODULE.md). ## Bundles -There are several bundles under `dist` folder. + +Starting with `v0.11.0`, `zone.js` uses `Angular Package Format` for bundle distribution. +(For backwards compatibility, all bundles can still be accessed from `dist` folder.) |Bundle|Summary| |---|---| -|zone.js|the default bundle, contains the most used APIs such as `setTimeout/Promise/EventTarget...`, also this bundle supports all evergreen and legacy (IE/Legacy Firefox/Legacy Safari) Browsers| -|zone-evergreen.js|the bundle for evergreen browsers, doesn't include the `patch` for `legacy` browsers such as `IE` or old versions of `Firefox/Safari`| -|zone-legacy.js|the patch bundle for legacy browsers, only includes the `patch` for `legacy` browsers such as `IE` or old versions of `Firefox/Safari`. This bundle must be loaded after `zone-evergreen.js`, **`zone.js`=`zone-evergreen.js` + `zone-legacy.js`**| -|zone-testing.js|the bundle for zone testing support, including `jasmine/mocha` support and `async/fakeAsync/sync` test utilities| -|zone-externs.js|the API definitions for `closure compiler`| - -And here are the additional optional patches not included in the main zone.js bundles +|`zone.js`| The default bundle. Contains the most used APIs such as `setTimeout/Promise/EventTarget...`, it also supports differential loading by importing this bundle using `import zone.js`. In legacy browsers it includes some additional patches such as `registerElement` and `EventTarget` like APIs.| +|`zone-testing.js`| The bundle for zone testing support of `jasmine` / `mocha` / `jest`. Also includes test utility functions `async` / `fakeAsync` / `sync`.| +|`zone-node.js`|The NodeJS support bundle.| +|`zone-mix.js`|A mixed bundle which supports both browser and NodeJS. Useful for mixed environment such as Electron.| +|`zone-externs.js`|the API definitions for `closure compiler`.| + +Additional optional patches not included in the `zone.js` bundles which extend functionality. +The additional bundles can be found under `zone.js/plugins` folder. +To use these bundles, add the following code after importing zone.js bundle. + +``` +import 'zone.js'; +// For example, import canvas patch +import 'zone.js/plugins/zone-patch-canvas'; +``` |Patch|Summary| |---|---| -|webapis-media-query.js|patch for `MediaQuery APIs`| -|webapis-notification.js|patch for `Notification APIs`| -|webapis-rtc-peer-connection.js|patch for `RTCPeerConnection APIs`| -|webapis-shadydom.js|patch for `Shady DOM APIs`| -|zone-bluebird.js|patch for `Bluebird APIs`| -|zone-error.js|patch for `Error Global Object`, supports remove `Zone StackTrace`| -|zone-patch-canvas.js|patch for `Canvas API`| -|zone-patch-cordova.js|patch for `Cordova API`| -|zone-patch-electron.js|patch for `Electron API`| -|zone-patch-fetch.js|patch for `Fetch API`| -|zone-patch-jsonp.js|utility for `jsonp API`| -|zone-patch-resize-observer.js|patch for `ResizeObserver API`| -|zone-patch-rxjs.js|patch for `rxjs API`| -|zone-patch-rxjs-fake-async.js|patch for `rxjs fakeasync test`| -|zone-patch-socket-io.js|patch for `socket-io`| -|zone-patch-user-media.js|patch for `UserMedia API`| +|`webapis-media-query.js`|patch for `MediaQuery APIs`| +|`webapis-notification.js`|patch for `Notification APIs`| +|`webapis-rtc-peer-connection.js`|patch for `RTCPeerConnection APIs`| +|`webapis-shadydom.js`|patch for `Shady DOM APIs`| +|`zone-bluebird.js`|patch for `Bluebird APIs`| +|`zone-error.js`|patch for `Error Global Object`, supports adding zone information to stack frame, and also removing unrelated stack frames from `zone.js` internally| +|`zone-patch-canvas.js`|patch for `Canvas API`| +|`zone-patch-cordova.js`|patch for `Cordova API`| +|`zone-patch-electron.js`|patch for `Electron API`| +|`zone-patch-fetch.js`|patch for `Fetch API`| +|`zone-patch-jsonp.js`|helper utility for `jsonp API`| +|`zone-patch-resize-observer.js`|patch for `ResizeObserver API`| +|`zone-patch-rxjs.js`|patch for `rxjs API`| +|`zone-patch-rxjs-fake-async.js`|patch for `rxjs fakeasync test`| +|`zone-patch-socket-io.js`|patch for `socket-io`| +|`zone-patch-user-media.js`|patch for `UserMedia API`| +|`zone-patch-message-port.js`|patch for `MessagePort API`| ## Promise A+ test passed [![Promises/A+ 1.1 compliant](https://promisesaplus.com/assets/logo-small.png)](https://promisesaplus.com/) ## License -MIT +MIT \ No newline at end of file From 5ec0ba72cd86aa776effe87df49c65fbd75d1ade Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Sat, 27 Jun 2020 12:47:54 -0700 Subject: [PATCH 050/253] refactor(dev-infra): create anchors/aliases for excluded always active groups (#37798) global-approvers, global-docs-approvers, and required-minimum-review groups are always active. It's useful to have aliases for getting groups that are active/pending/rejected while excluding these few. PR Close #37798 --- .pullapprove.yml | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/.pullapprove.yml b/.pullapprove.yml index 78a460640a1e..6eea6693f84b 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -67,6 +67,23 @@ version: 3 # Meta field that goes unused by PullApprove to allow for defining aliases to be # used throughout the config. meta: + # The following groups have no file based conditions and will be initially `active` on all PRs + # - `global-approvers` + # - `global-docs-approvers` + # - `required-minimum-review` + # + # By checking the number of active/pending/rejected groups when these are excluded, we can determine + # if any other groups are matched. + # + # Also note that the ordering of groups matters in this file. The only groups visible to the current + # one are those that appear above it. + no-groups-above-this-pending: &no-groups-above-this-pending + len(groups.pending.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0 + no-groups-above-this-rejected: &no-groups-above-this-rejected + len(groups.rejected.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0 + no-groups-above-this-active: &no-groups-above-this-active + len(groups.active.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0 + can-be-global-approved: &can-be-global-approved "\"global-approvers\" not in groups.approved" can-be-global-docs-approved: &can-be-global-docs-approved "\"global-docs-approvers\" not in groups.approved" defaults: &defaults @@ -1258,14 +1275,7 @@ groups: # `global-approvers` can still approve PRs that match this `fallback` rule, # but that should be an exception and not an expectation. conditions: - # The following groups have no file based conditions and will be initially `active` on all PRs - # - `global-approvers` - # - `global-docs-approvers` - # - `required-minimum-review` - # - # By checking the number of active groups when these are excluded, we can determine - # if any other groups are matched. - - len(groups.active.exclude("required-minimum-review").exclude("global-approvers").exclude("global-docs-approvers")) == 0 + - *no-groups-above-this-active # When any of the `global-*` groups is approved, they cause other groups to deactivate. # In those cases, the condition above would evaluate to `true` while in reality, only a global # approval has been provided. To ensure we don't activate the fallback group in such cases, From 2981656ebee3672a054f92781e740b58708610e6 Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Sat, 27 Jun 2020 12:53:43 -0700 Subject: [PATCH 051/253] feat(dev-infra): add phased review to groups requiring final sign-off after initial review (#37798) The size-tracking, public-api, and circular-dependencies groups can get a lot of PRs to review. In addition, the members of these groups do not always have the necessary context to fully review the PR in question. This change ensures that the owners in the groups where the changes are being made have approve the changes (ie, the aren't pending or rejected) before requesting final sign-off from these three critical groups. PR Close #37798 --- .pullapprove.yml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.pullapprove.yml b/.pullapprove.yml index 6eea6693f84b..7ecae6ed4cae 100644 --- a/.pullapprove.yml +++ b/.pullapprove.yml @@ -1160,6 +1160,8 @@ groups: public-api: <<: *defaults conditions: + - *no-groups-above-this-pending + - *no-groups-above-this-rejected - *can-be-global-approved - > contains_any_globs(files, [ @@ -1190,6 +1192,8 @@ groups: size-tracking: <<: *defaults conditions: + - *no-groups-above-this-pending + - *no-groups-above-this-rejected - *can-be-global-approved - > contains_any_globs(files, [ @@ -1214,6 +1218,8 @@ groups: circular-dependencies: <<: *defaults conditions: + - *no-groups-above-this-pending + - *no-groups-above-this-rejected - *can-be-global-approved - > contains_any_globs(files, [ From 6bf8d2b3560a43e606f8c98cc4cf426301f6ddff Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Thu, 23 Jul 2020 15:53:46 -0700 Subject: [PATCH 052/253] fix(dev-infra): Ensure conditions with groups do not fail verification (#37798) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit There are a few changes in this PR to ensure conditions that are based on groups (i.e. `- groups.pending.length == 0`) do not fail the verify task: * Remove the warning when a condition is encountered that depends on the `groups` state. The warning will otherwise be printed once for every file that triggers the execution of the condition (400,000+ times) * Add an `unverifiable` flag to `GroupCondition` interface and set it to true when an error is encountered due to attempting to get the state of `groups` in a condition * Ignore any unverifiable conditions when gathering unmatched conditions. These should not be considered `unmatched` for verification purposes. * Print the unverifiable conditions by group in the results Sample output: ``` ┌──────────────────────────────────────────────────────────────────────────────┐ │ PullApprove results by group │ └──────────────────────────────────────────────────────────────────────────────┘ Groups skipped (4 groups) Matched conditions by Group (37 groups) Unmatched conditions by Group (0 groups) Unverifiable conditions by Group (3 groups) [public-api] len(groups.pending.exclude("required-minimum-review")... len(groups.rejected.exclude("required-minimum-review")... [size-tracking] len(groups.pending.exclude("required-minimum-review")... len(groups.rejected.exclude("required-minimum-review")... [circular-dependencies] len(groups.pending.exclude("required-minimum-review")... len(groups.rejected.exclude("required-minimum-review")... ``` PR Close #37798 --- dev-infra/pullapprove/group.ts | 27 ++++++++++++++++----------- dev-infra/pullapprove/logging.ts | 19 ++++++++++++++----- dev-infra/pullapprove/verify.ts | 9 +++++++-- 3 files changed, 37 insertions(+), 18 deletions(-) diff --git a/dev-infra/pullapprove/group.ts b/dev-infra/pullapprove/group.ts index 45de9eac236c..3aaeaf1cf60f 100644 --- a/dev-infra/pullapprove/group.ts +++ b/dev-infra/pullapprove/group.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {error, warn} from '../utils/console'; +import {error} from '../utils/console'; import {convertConditionToFunction} from './condition_evaluator'; import {PullApproveGroupConfig} from './parse-yaml'; import {PullApproveGroupStateDependencyError} from './pullapprove_arrays'; @@ -16,6 +16,7 @@ interface GroupCondition { expression: string; checkFn: (files: string[], groups: PullApproveGroup[]) => boolean; matchedFiles: Set; + unverifiable: boolean; } /** Result of testing files against the group. */ @@ -25,6 +26,7 @@ export interface PullApproveGroupResult { matchedCount: number; unmatchedConditions: GroupCondition[]; unmatchedCount: number; + unverifiableConditions: GroupCondition[]; } // Regular expression that matches conditions for the global approval. @@ -61,6 +63,7 @@ export class PullApproveGroup { expression, checkFn: convertConditionToFunction(expression), matchedFiles: new Set(), + unverifiable: false, }); } catch (e) { error(`Could not parse condition in group: ${this.groupName}`); @@ -79,7 +82,8 @@ export class PullApproveGroup { * the pull approve group's conditions. */ testFile(filePath: string): boolean { - return this.conditions.every(({matchedFiles, checkFn, expression}) => { + return this.conditions.every((condition) => { + const {matchedFiles, checkFn, expression} = condition; try { const matchesFile = checkFn([filePath], this.precedingGroups); if (matchesFile) { @@ -87,16 +91,14 @@ export class PullApproveGroup { } return matchesFile; } catch (e) { - // In the case of a condition that depends on the state of groups we want to just - // warn that the verification can't accurately evaluate the condition and then + // In the case of a condition that depends on the state of groups we want to + // ignore that the verification can't accurately evaluate the condition and then // continue processing. Other types of errors fail the verification, as conditions // should otherwise be able to execute without throwing. if (e instanceof PullApproveGroupStateDependencyError) { - const errMessage = `Condition could not be evaluated: \n` + - `${e.message}\n` + - `From the [${this.groupName}] group:\n` + - ` - ${expression}`; - warn(errMessage); + condition.unverifiable = true; + // Return true so that `this.conditions.every` can continue evaluating. + return true; } else { const errMessage = `Condition could not be evaluated: \n\n` + `From the [${this.groupName}] group:\n` + @@ -111,13 +113,16 @@ export class PullApproveGroup { /** Retrieve the results for the Group, all matched and unmatched conditions. */ getResults(): PullApproveGroupResult { - const matchedConditions = this.conditions.filter(c => !!c.matchedFiles.size); - const unmatchedConditions = this.conditions.filter(c => !c.matchedFiles.size); + const matchedConditions = this.conditions.filter(c => c.matchedFiles.size > 0); + const unmatchedConditions = + this.conditions.filter(c => c.matchedFiles.size === 0 && !c.unverifiable); + const unverifiableConditions = this.conditions.filter(c => c.unverifiable); return { matchedConditions, matchedCount: matchedConditions.length, unmatchedConditions, unmatchedCount: unmatchedConditions.length, + unverifiableConditions, groupName: this.groupName, }; } diff --git a/dev-infra/pullapprove/logging.ts b/dev-infra/pullapprove/logging.ts index ea289b7739be..573516e23e73 100644 --- a/dev-infra/pullapprove/logging.ts +++ b/dev-infra/pullapprove/logging.ts @@ -9,14 +9,23 @@ import {info} from '../utils/console'; import {PullApproveGroupResult} from './group'; +type ConditionGrouping = keyof Pick< + PullApproveGroupResult, 'matchedConditions'|'unmatchedConditions'|'unverifiableConditions'>; + /** Create logs for each pullapprove group result. */ -export function logGroup(group: PullApproveGroupResult, matched = true, printMessageFn = info) { - const conditions = matched ? group.matchedConditions : group.unmatchedConditions; +export function logGroup( + group: PullApproveGroupResult, conditionsToPrint: ConditionGrouping, printMessageFn = info) { + const conditions = group[conditionsToPrint]; printMessageFn.group(`[${group.groupName}]`); if (conditions.length) { - conditions.forEach(matcher => { - const count = matcher.matchedFiles.size; - printMessageFn(`${count} ${count === 1 ? 'match' : 'matches'} - ${matcher.expression}`); + conditions.forEach(groupCondition => { + const count = groupCondition.matchedFiles.size; + if (conditionsToPrint === 'unverifiableConditions') { + printMessageFn(`${groupCondition.expression}`); + } else { + printMessageFn( + `${count} ${count === 1 ? 'match' : 'matches'} - ${groupCondition.expression}`); + } }); printMessageFn.groupEnd(); } diff --git a/dev-infra/pullapprove/verify.ts b/dev-infra/pullapprove/verify.ts index d8302c2caa00..167408338328 100644 --- a/dev-infra/pullapprove/verify.ts +++ b/dev-infra/pullapprove/verify.ts @@ -84,11 +84,16 @@ export function verify() { info.groupEnd(); const matchedGroups = resultsByGroup.filter(group => !group.unmatchedCount); info.group(`Matched conditions by Group (${matchedGroups.length} groups)`); - matchedGroups.forEach(group => logGroup(group, true, debug)); + matchedGroups.forEach(group => logGroup(group, 'matchedConditions', debug)); info.groupEnd(); const unmatchedGroups = resultsByGroup.filter(group => group.unmatchedCount); info.group(`Unmatched conditions by Group (${unmatchedGroups.length} groups)`); - unmatchedGroups.forEach(group => logGroup(group, false)); + unmatchedGroups.forEach(group => logGroup(group, 'unmatchedConditions')); + info.groupEnd(); + const unverifiableConditionsInGroups = + resultsByGroup.filter(group => group.unverifiableConditions.length > 0); + info.group(`Unverifiable conditions by Group (${unverifiableConditionsInGroups.length} groups)`); + unverifiableConditionsInGroups.forEach(group => logGroup(group, 'unverifiableConditions')); info.groupEnd(); // Provide correct exit code based on verification success. From e565d97bc8027ff058d61b0bef38db6dd18c21f3 Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Fri, 24 Jul 2020 15:41:44 -0700 Subject: [PATCH 053/253] refactor(router): extract Router config utils to a separate file (#38229) This commit refactors Router package to move config utils to a separate file for better organization and to resolve the problem with circular dependency issue. Resolves #38212. PR Close #38229 --- packages/router/src/config.ts | 106 ------------------ packages/router/src/router.ts | 3 +- packages/router/src/router_config_loader.ts | 3 +- packages/router/src/utils/config.ts | 115 ++++++++++++++++++++ packages/router/test/config.spec.ts | 2 +- 5 files changed, 120 insertions(+), 109 deletions(-) create mode 100644 packages/router/src/utils/config.ts diff --git a/packages/router/src/config.ts b/packages/router/src/config.ts index 8b6f2ab078d7..044cdcd7965e 100644 --- a/packages/router/src/config.ts +++ b/packages/router/src/config.ts @@ -9,9 +9,7 @@ import {NgModuleFactory, NgModuleRef, Type} from '@angular/core'; import {Observable} from 'rxjs'; -import {EmptyOutletComponent} from './components/empty_outlet'; import {ActivatedRouteSnapshot} from './router_state'; -import {PRIMARY_OUTLET} from './shared'; import {UrlSegment, UrlSegmentGroup} from './url_tree'; @@ -490,107 +488,3 @@ export interface Route { export class LoadedRouterConfig { constructor(public routes: Route[], public module: NgModuleRef) {} } - -export function validateConfig(config: Routes, parentPath: string = ''): void { - // forEach doesn't iterate undefined values - for (let i = 0; i < config.length; i++) { - const route: Route = config[i]; - const fullPath: string = getFullPath(parentPath, route); - validateNode(route, fullPath); - } -} - -function validateNode(route: Route, fullPath: string): void { - if (!route) { - throw new Error(` - Invalid configuration of route '${fullPath}': Encountered undefined route. - The reason might be an extra comma. - - Example: - const routes: Routes = [ - { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, - { path: 'dashboard', component: DashboardComponent },, << two commas - { path: 'detail/:id', component: HeroDetailComponent } - ]; - `); - } - if (Array.isArray(route)) { - throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`); - } - if (!route.component && !route.children && !route.loadChildren && - (route.outlet && route.outlet !== PRIMARY_OUTLET)) { - throw new Error(`Invalid configuration of route '${ - fullPath}': a componentless route without children or loadChildren cannot have a named outlet set`); - } - if (route.redirectTo && route.children) { - throw new Error(`Invalid configuration of route '${ - fullPath}': redirectTo and children cannot be used together`); - } - if (route.redirectTo && route.loadChildren) { - throw new Error(`Invalid configuration of route '${ - fullPath}': redirectTo and loadChildren cannot be used together`); - } - if (route.children && route.loadChildren) { - throw new Error(`Invalid configuration of route '${ - fullPath}': children and loadChildren cannot be used together`); - } - if (route.redirectTo && route.component) { - throw new Error(`Invalid configuration of route '${ - fullPath}': redirectTo and component cannot be used together`); - } - if (route.path && route.matcher) { - throw new Error( - `Invalid configuration of route '${fullPath}': path and matcher cannot be used together`); - } - if (route.redirectTo === void 0 && !route.component && !route.children && !route.loadChildren) { - throw new Error(`Invalid configuration of route '${ - fullPath}'. One of the following must be provided: component, redirectTo, children or loadChildren`); - } - if (route.path === void 0 && route.matcher === void 0) { - throw new Error(`Invalid configuration of route '${ - fullPath}': routes must have either a path or a matcher specified`); - } - if (typeof route.path === 'string' && route.path.charAt(0) === '/') { - throw new Error(`Invalid configuration of route '${fullPath}': path cannot start with a slash`); - } - if (route.path === '' && route.redirectTo !== void 0 && route.pathMatch === void 0) { - const exp = - `The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.`; - throw new Error(`Invalid configuration of route '{path: "${fullPath}", redirectTo: "${ - route.redirectTo}"}': please provide 'pathMatch'. ${exp}`); - } - if (route.pathMatch !== void 0 && route.pathMatch !== 'full' && route.pathMatch !== 'prefix') { - throw new Error(`Invalid configuration of route '${ - fullPath}': pathMatch can only be set to 'prefix' or 'full'`); - } - if (route.children) { - validateConfig(route.children, fullPath); - } -} - -function getFullPath(parentPath: string, currentRoute: Route): string { - if (!currentRoute) { - return parentPath; - } - if (!parentPath && !currentRoute.path) { - return ''; - } else if (parentPath && !currentRoute.path) { - return `${parentPath}/`; - } else if (!parentPath && currentRoute.path) { - return currentRoute.path; - } else { - return `${parentPath}/${currentRoute.path}`; - } -} - -/** - * Makes a copy of the config and adds any default required properties. - */ -export function standardizeConfig(r: Route): Route { - const children = r.children && r.children.map(standardizeConfig); - const c = children ? {...r, children} : {...r}; - if (!c.component && (children || c.loadChildren) && (c.outlet && c.outlet !== PRIMARY_OUTLET)) { - c.component = EmptyOutletComponent; - } - return c; -} diff --git a/packages/router/src/router.ts b/packages/router/src/router.ts index 7809e17892d5..83b915fa3c89 100644 --- a/packages/router/src/router.ts +++ b/packages/router/src/router.ts @@ -11,7 +11,7 @@ import {Compiler, Injectable, Injector, isDevMode, NgModuleFactoryLoader, NgModu import {BehaviorSubject, EMPTY, Observable, of, Subject, SubscriptionLike} from 'rxjs'; import {catchError, filter, finalize, map, switchMap, tap} from 'rxjs/operators'; -import {QueryParamsHandling, Route, Routes, standardizeConfig, validateConfig} from './config'; +import {QueryParamsHandling, Route, Routes} from './config'; import {createRouterState} from './create_router_state'; import {createUrlTree} from './create_url_tree'; import {Event, GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, NavigationTrigger, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, RoutesRecognized} from './events'; @@ -28,6 +28,7 @@ import {ActivatedRoute, createEmptyState, RouterState, RouterStateSnapshot} from import {isNavigationCancelingError, navigationCancelingError, Params} from './shared'; import {DefaultUrlHandlingStrategy, UrlHandlingStrategy} from './url_handling_strategy'; import {containsTree, createEmptyUrlTree, UrlSerializer, UrlTree} from './url_tree'; +import {standardizeConfig, validateConfig} from './utils/config'; import {Checks, getAllRouteGuards} from './utils/preactivation'; import {isUrlTree} from './utils/type_guards'; diff --git a/packages/router/src/router_config_loader.ts b/packages/router/src/router_config_loader.ts index d9c014f3459e..4f2bda69759c 100644 --- a/packages/router/src/router_config_loader.ts +++ b/packages/router/src/router_config_loader.ts @@ -10,8 +10,9 @@ import {Compiler, InjectionToken, Injector, NgModuleFactory, NgModuleFactoryLoad import {from, Observable, of} from 'rxjs'; import {map, mergeMap} from 'rxjs/operators'; -import {LoadChildren, LoadedRouterConfig, Route, standardizeConfig} from './config'; +import {LoadChildren, LoadedRouterConfig, Route} from './config'; import {flatten, wrapIntoObservable} from './utils/collection'; +import {standardizeConfig} from './utils/config'; /** * The [DI token](guide/glossary/#di-token) for a router configuration. diff --git a/packages/router/src/utils/config.ts b/packages/router/src/utils/config.ts new file mode 100644 index 000000000000..961ee3c54fe2 --- /dev/null +++ b/packages/router/src/utils/config.ts @@ -0,0 +1,115 @@ +/** + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.io/license + */ + +import {EmptyOutletComponent} from '../components/empty_outlet'; +import {Route, Routes} from '../config'; +import {PRIMARY_OUTLET} from '../shared'; + +export function validateConfig(config: Routes, parentPath: string = ''): void { + // forEach doesn't iterate undefined values + for (let i = 0; i < config.length; i++) { + const route: Route = config[i]; + const fullPath: string = getFullPath(parentPath, route); + validateNode(route, fullPath); + } +} + +function validateNode(route: Route, fullPath: string): void { + if (!route) { + throw new Error(` + Invalid configuration of route '${fullPath}': Encountered undefined route. + The reason might be an extra comma. + + Example: + const routes: Routes = [ + { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, + { path: 'dashboard', component: DashboardComponent },, << two commas + { path: 'detail/:id', component: HeroDetailComponent } + ]; + `); + } + if (Array.isArray(route)) { + throw new Error(`Invalid configuration of route '${fullPath}': Array cannot be specified`); + } + if (!route.component && !route.children && !route.loadChildren && + (route.outlet && route.outlet !== PRIMARY_OUTLET)) { + throw new Error(`Invalid configuration of route '${ + fullPath}': a componentless route without children or loadChildren cannot have a named outlet set`); + } + if (route.redirectTo && route.children) { + throw new Error(`Invalid configuration of route '${ + fullPath}': redirectTo and children cannot be used together`); + } + if (route.redirectTo && route.loadChildren) { + throw new Error(`Invalid configuration of route '${ + fullPath}': redirectTo and loadChildren cannot be used together`); + } + if (route.children && route.loadChildren) { + throw new Error(`Invalid configuration of route '${ + fullPath}': children and loadChildren cannot be used together`); + } + if (route.redirectTo && route.component) { + throw new Error(`Invalid configuration of route '${ + fullPath}': redirectTo and component cannot be used together`); + } + if (route.path && route.matcher) { + throw new Error( + `Invalid configuration of route '${fullPath}': path and matcher cannot be used together`); + } + if (route.redirectTo === void 0 && !route.component && !route.children && !route.loadChildren) { + throw new Error(`Invalid configuration of route '${ + fullPath}'. One of the following must be provided: component, redirectTo, children or loadChildren`); + } + if (route.path === void 0 && route.matcher === void 0) { + throw new Error(`Invalid configuration of route '${ + fullPath}': routes must have either a path or a matcher specified`); + } + if (typeof route.path === 'string' && route.path.charAt(0) === '/') { + throw new Error(`Invalid configuration of route '${fullPath}': path cannot start with a slash`); + } + if (route.path === '' && route.redirectTo !== void 0 && route.pathMatch === void 0) { + const exp = + `The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.`; + throw new Error(`Invalid configuration of route '{path: "${fullPath}", redirectTo: "${ + route.redirectTo}"}': please provide 'pathMatch'. ${exp}`); + } + if (route.pathMatch !== void 0 && route.pathMatch !== 'full' && route.pathMatch !== 'prefix') { + throw new Error(`Invalid configuration of route '${ + fullPath}': pathMatch can only be set to 'prefix' or 'full'`); + } + if (route.children) { + validateConfig(route.children, fullPath); + } +} + +function getFullPath(parentPath: string, currentRoute: Route): string { + if (!currentRoute) { + return parentPath; + } + if (!parentPath && !currentRoute.path) { + return ''; + } else if (parentPath && !currentRoute.path) { + return `${parentPath}/`; + } else if (!parentPath && currentRoute.path) { + return currentRoute.path; + } else { + return `${parentPath}/${currentRoute.path}`; + } +} + +/** + * Makes a copy of the config and adds any default required properties. + */ +export function standardizeConfig(r: Route): Route { + const children = r.children && r.children.map(standardizeConfig); + const c = children ? {...r, children} : {...r}; + if (!c.component && (children || c.loadChildren) && (c.outlet && c.outlet !== PRIMARY_OUTLET)) { + c.component = EmptyOutletComponent; + } + return c; +} diff --git a/packages/router/test/config.spec.ts b/packages/router/test/config.spec.ts index fb4bb03d1ec9..76d32f3f5a19 100644 --- a/packages/router/test/config.spec.ts +++ b/packages/router/test/config.spec.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {validateConfig} from '../src/config'; import {PRIMARY_OUTLET} from '../src/shared'; +import {validateConfig} from '../src/utils/config'; describe('config', () => { describe('validateConfig', () => { From 03e02185d9c733205fd821de567b1474ddc99fb1 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Thu, 23 Jul 2020 15:53:53 +0200 Subject: [PATCH 054/253] docs: add ng-add save option (#38198) PR Close #38198 --- .../projects/my-lib/package.json | 11 +++++++++-- aio/content/guide/schematics-for-libraries.md | 14 ++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/aio/content/examples/schematics-for-libraries/projects/my-lib/package.json b/aio/content/examples/schematics-for-libraries/projects/my-lib/package.json index 3607e2c0cef9..a53579e4ddd0 100644 --- a/aio/content/examples/schematics-for-libraries/projects/my-lib/package.json +++ b/aio/content/examples/schematics-for-libraries/projects/my-lib/package.json @@ -16,5 +16,12 @@ "@angular/core": "^7.2.0" }, // #docregion collection - "schematics": "./schematics/collection.json" -} \ No newline at end of file + "schematics": "./schematics/collection.json", +// #enddocregion collection +// #docregion ng-add + "ng-add": { + "save": "devDependencies" + } +// #enddocregion ng-add +// #docregion collection +} diff --git a/aio/content/guide/schematics-for-libraries.md b/aio/content/guide/schematics-for-libraries.md index 1590c4ea871a..e2520c5520b8 100644 --- a/aio/content/guide/schematics-for-libraries.md +++ b/aio/content/guide/schematics-for-libraries.md @@ -57,6 +57,20 @@ The task uses the user's preferred package manager to add the library to the pro In this example, the function receives the current `Tree` and returns it without any modifications. If you need to, you can do additional setup when your package is installed, such as generating files, updating configuration, or any other initial setup your library requires. +### Define dependency type + +Use the `save` option of `ng-add` to configure if the library should be added to the `dependencies`, the `devDepedencies`, or not saved at all in the project's `package.json` configuration file. + + + + +Possible values are: + + * `false` - Don't add the package to package.json + * `true` - Add the package to the dependencies + * `"dependencies"` - Add the package to the dependencies + * `"devDependencies"` - Add the package to the devDependencies + ## Building your schematics To bundle your schematics together with your library, you must configure the library to build the schematics separately, then add them to the bundle. From 47873a339aa54c9abf00cc5385fbc5c1e95c036f Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Thu, 23 Jul 2020 18:43:04 -0700 Subject: [PATCH 055/253] refactor(compiler): separate compilation and transform phases (#38213) This commit splits the transformation into 2 separate steps: Ivy compilation and actual transformation of corresponding TS nodes. This is needed to have all `o.Expression`s generated before any TS transforms happen. This allows `ConstantPool` to properly identify expressions that can be shared across multiple components declared in the same file. Resolves #38203. PR Close #38213 --- .../src/ngtsc/transform/src/transform.ts | 157 +++++++++++------- 1 file changed, 99 insertions(+), 58 deletions(-) diff --git a/packages/compiler-cli/src/ngtsc/transform/src/transform.ts b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts index 53ad1e037816..c587ebcc1525 100644 --- a/packages/compiler-cli/src/ngtsc/transform/src/transform.ts +++ b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts @@ -14,6 +14,7 @@ import {Decorator, ReflectionHost} from '../../reflection'; import {ImportManager, translateExpression, translateStatement} from '../../translator'; import {visit, VisitListEntryResult, Visitor} from '../../util/src/visitor'; +import {CompileResult} from './api'; import {TraitCompiler} from './compilation'; import {addImports} from './utils'; @@ -43,12 +44,15 @@ export function ivyTransformFactory( }; } -class IvyVisitor extends Visitor { - constructor( - private compilation: TraitCompiler, private reflector: ReflectionHost, - private importManager: ImportManager, private defaultImportRecorder: DefaultImportRecorder, - private isClosureCompilerEnabled: boolean, private isCore: boolean, - private constantPool: ConstantPool) { +/** + * Visits all classes, performs Ivy compilation where Angular decorators are present and collects + * result in a Map that associates a ts.ClassDeclaration with Ivy compilation results. This visitor + * does NOT perform any TS transformations. + */ +class IvyCompilationVisitor extends Visitor { + public classCompilationMap = new Map(); + + constructor(private compilation: TraitCompiler, private constantPool: ConstantPool) { super(); } @@ -56,56 +60,78 @@ class IvyVisitor extends Visitor { VisitListEntryResult { // Determine if this class has an Ivy field that needs to be added, and compile the field // to an expression if so. - const res = this.compilation.compile(node, this.constantPool); - - if (res !== null) { - // There is at least one field to add. - const statements: ts.Statement[] = []; - const members = [...node.members]; - - res.forEach(field => { - // Translate the initializer for the field into TS nodes. - const exprNode = translateExpression( - field.initializer, this.importManager, this.defaultImportRecorder, - ts.ScriptTarget.ES2015); - - // Create a static property declaration for the new field. - const property = ts.createProperty( - undefined, [ts.createToken(ts.SyntaxKind.StaticKeyword)], field.name, undefined, - undefined, exprNode); - - if (this.isClosureCompilerEnabled) { - // Closure compiler transforms the form `Service.ɵprov = X` into `Service$ɵprov = X`. To - // prevent this transformation, such assignments need to be annotated with @nocollapse. - // Note that tsickle is typically responsible for adding such annotations, however it - // doesn't yet handle synthetic fields added during other transformations. - ts.addSyntheticLeadingComment( - property, ts.SyntaxKind.MultiLineCommentTrivia, '* @nocollapse ', - /* hasTrailingNewLine */ false); - } - - field.statements - .map( - stmt => translateStatement( - stmt, this.importManager, this.defaultImportRecorder, ts.ScriptTarget.ES2015)) - .forEach(stmt => statements.push(stmt)); - - members.push(property); - }); - - // Replace the class declaration with an updated version. - node = ts.updateClassDeclaration( - node, - // Remove the decorator which triggered this compilation, leaving the others alone. - maybeFilterDecorator(node.decorators, this.compilation.decoratorsFor(node)), - node.modifiers, node.name, node.typeParameters, node.heritageClauses || [], - // Map over the class members and remove any Angular decorators from them. - members.map(member => this._stripAngularDecorators(member))); - return {node, after: statements}; + const result = this.compilation.compile(node, this.constantPool); + if (result !== null) { + this.classCompilationMap.set(node, result); } - return {node}; } +} + +/** + * Visits all classes and performs transformation of corresponding TS nodes based on the Ivy + * compilation results (provided as an argument). + */ +class IvyTransformationVisitor extends Visitor { + constructor( + private compilation: TraitCompiler, + private classCompilationMap: Map, + private reflector: ReflectionHost, private importManager: ImportManager, + private defaultImportRecorder: DefaultImportRecorder, + private isClosureCompilerEnabled: boolean, private isCore: boolean) { + super(); + } + + visitClassDeclaration(node: ts.ClassDeclaration): + VisitListEntryResult { + // If this class is not registered in the map, it means that it doesn't have Angular decorators, + // thus no further processing is required. + if (!this.classCompilationMap.has(node)) return {node}; + + // There is at least one field to add. + const statements: ts.Statement[] = []; + const members = [...node.members]; + + this.classCompilationMap.get(node)!.forEach(field => { + // Translate the initializer for the field into TS nodes. + const exprNode = translateExpression( + field.initializer, this.importManager, this.defaultImportRecorder, + ts.ScriptTarget.ES2015); + + // Create a static property declaration for the new field. + const property = ts.createProperty( + undefined, [ts.createToken(ts.SyntaxKind.StaticKeyword)], field.name, undefined, + undefined, exprNode); + + if (this.isClosureCompilerEnabled) { + // Closure compiler transforms the form `Service.ɵprov = X` into `Service$ɵprov = X`. To + // prevent this transformation, such assignments need to be annotated with @nocollapse. + // Note that tsickle is typically responsible for adding such annotations, however it + // doesn't yet handle synthetic fields added during other transformations. + ts.addSyntheticLeadingComment( + property, ts.SyntaxKind.MultiLineCommentTrivia, '* @nocollapse ', + /* hasTrailingNewLine */ false); + } + + field.statements + .map( + stmt => translateStatement( + stmt, this.importManager, this.defaultImportRecorder, ts.ScriptTarget.ES2015)) + .forEach(stmt => statements.push(stmt)); + + members.push(property); + }); + + // Replace the class declaration with an updated version. + node = ts.updateClassDeclaration( + node, + // Remove the decorator which triggered this compilation, leaving the others alone. + maybeFilterDecorator(node.decorators, this.compilation.decoratorsFor(node)), node.modifiers, + node.name, node.typeParameters, node.heritageClauses || [], + // Map over the class members and remove any Angular decorators from them. + members.map(member => this._stripAngularDecorators(member))); + return {node, after: statements}; + } /** * Return all decorators on a `Declaration` which are from @angular/core, or an empty set if none @@ -224,11 +250,26 @@ function transformIvySourceFile( const constantPool = new ConstantPool(); const importManager = new ImportManager(importRewriter); - // Recursively scan through the AST and perform any updates requested by the IvyCompilation. - const visitor = new IvyVisitor( - compilation, reflector, importManager, defaultImportRecorder, isClosureCompilerEnabled, - isCore, constantPool); - let sf = visit(file, visitor, context); + // The transformation process consists of 2 steps: + // + // 1. Visit all classes, perform compilation and collect the results. + // 2. Perform actual transformation of required TS nodes using compilation results from the first + // step. + // + // This is needed to have all `o.Expression`s generated before any TS transforms happen. This + // allows `ConstantPool` to properly identify expressions that can be shared across multiple + // components declared in the same file. + + // Step 1. Go though all classes in AST, perform compilation and collect the results. + const compilationVisitor = new IvyCompilationVisitor(compilation, constantPool); + visit(file, compilationVisitor, context); + + // Step 2. Scan through the AST again and perform transformations based on Ivy compilation + // results obtained at Step 1. + const transformationVisitor = new IvyTransformationVisitor( + compilation, compilationVisitor.classCompilationMap, reflector, importManager, + defaultImportRecorder, isClosureCompilerEnabled, isCore); + let sf = visit(file, transformationVisitor, context); // Generate the constant statements first, as they may involve adding additional imports // to the ImportManager. From 4f842e23df1e426c2aeb3562c712ac8e503ef14a Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Thu, 23 Jul 2020 18:47:33 -0700 Subject: [PATCH 056/253] refactor(compiler): allow strings with certain length to be included into `ConstantPool` (#38213) Prior to this commit, the `ConstantPool` ignored all primitive values. It turned out that it's beneficial to include strings above certain length to the pool as well. This commit updates the `ConstantPool` logic to allow such strings to be shared across multiple instances if needed. For instance, this is helpful for component styles that might be reused across multiple components in the same file. PR Close #38213 --- packages/compiler/src/constant_pool.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/compiler/src/constant_pool.ts b/packages/compiler/src/constant_pool.ts index 5ab77da0ade6..24e800c95d15 100644 --- a/packages/compiler/src/constant_pool.ts +++ b/packages/compiler/src/constant_pool.ts @@ -36,6 +36,13 @@ export const enum DefinitionKind { */ const KEY_CONTEXT = {}; +/** + * Generally all primitive values are excluded from the `ConstantPool`, but there is an exclusion + * for strings that reach a certain length threshold. This constant defines the length threshold for + * strings. + */ +const POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS = 50; + /** * A node that is a place-holder that allows the node to be replaced when the actual * node is known. @@ -96,7 +103,8 @@ export class ConstantPool { private nextNameIndex = 0; getConstLiteral(literal: o.Expression, forceShared?: boolean): o.Expression { - if (literal instanceof o.LiteralExpr || literal instanceof FixupExpression) { + if ((literal instanceof o.LiteralExpr && !isLongStringExpr(literal)) || + literal instanceof FixupExpression) { // Do no put simple literals into the constant pool or try to produce a constant for a // reference to a constant. return literal; @@ -305,3 +313,8 @@ function invalid(this: o.ExpressionVisitor, arg: o.Expression|o.Statement): n function isVariable(e: o.Expression): e is o.ReadVarExpr { return e instanceof o.ReadVarExpr; } + +function isLongStringExpr(expr: o.LiteralExpr): boolean { + return typeof expr.value === 'string' && + expr.value.length > POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS; +} \ No newline at end of file From 6881149540dcc1dec2a3e2b47c1618f8e768b145 Mon Sep 17 00:00:00 2001 From: Andrew Kushnir Date: Thu, 23 Jul 2020 18:51:55 -0700 Subject: [PATCH 057/253] fix(compiler): share identical stylesheets between components in the same file (#38213) Prior to this commit, duplicated styles defined in multiple components in the same file were not shared between components, thus causing extra payload size. This commit updates compiler logic to use `ConstantPool` for the styles (while generating the `styles` array on component def), which enables styles sharing when needed (when duplicates styles are present). Resolves #38204. PR Close #38213 --- goldens/size-tracking/aio-payloads.json | 2 +- .../src/ngtsc/transform/src/transform.ts | 8 ++- .../compiler-cli/test/ngtsc/ngtsc_spec.ts | 62 +++++++++++++++++++ packages/compiler/src/constant_pool.ts | 2 +- .../compiler/src/render3/view/compiler.ts | 2 +- 5 files changed, 70 insertions(+), 6 deletions(-) diff --git a/goldens/size-tracking/aio-payloads.json b/goldens/size-tracking/aio-payloads.json index 9d240aea2fcb..b91c2891d62d 100755 --- a/goldens/size-tracking/aio-payloads.json +++ b/goldens/size-tracking/aio-payloads.json @@ -12,7 +12,7 @@ "master": { "uncompressed": { "runtime-es2015": 2987, - "main-es2015": 450596, + "main-es2015": 448419, "polyfills-es2015": 52630 } } diff --git a/packages/compiler-cli/src/ngtsc/transform/src/transform.ts b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts index c587ebcc1525..99933680d06b 100644 --- a/packages/compiler-cli/src/ngtsc/transform/src/transform.ts +++ b/packages/compiler-cli/src/ngtsc/transform/src/transform.ts @@ -86,13 +86,15 @@ class IvyTransformationVisitor extends Visitor { VisitListEntryResult { // If this class is not registered in the map, it means that it doesn't have Angular decorators, // thus no further processing is required. - if (!this.classCompilationMap.has(node)) return {node}; + if (!this.classCompilationMap.has(node)) { + return {node}; + } // There is at least one field to add. const statements: ts.Statement[] = []; const members = [...node.members]; - this.classCompilationMap.get(node)!.forEach(field => { + for (const field of this.classCompilationMap.get(node)!) { // Translate the initializer for the field into TS nodes. const exprNode = translateExpression( field.initializer, this.importManager, this.defaultImportRecorder, @@ -120,7 +122,7 @@ class IvyTransformationVisitor extends Visitor { .forEach(stmt => statements.push(stmt)); members.push(property); - }); + } // Replace the class declaration with an updated version. node = ts.updateClassDeclaration( diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts index 9ad1a3a6786c..e5fac6559cb5 100644 --- a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts +++ b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts @@ -6623,6 +6623,68 @@ export const Foo = Foo__PRE_R3__; const jsContents = env.getContents('test.js'); expect(jsContents).toContain('styles: ["h1[_ngcontent-%COMP%] {font-size: larger}"]'); }); + + it('should share same styles declared in different components in the same file', () => { + env.write('test.ts', ` + import {Component} from '@angular/core'; + + @Component({ + selector: 'comp-a', + template: 'Comp A', + styles: [ + 'span { font-size: larger; }', + 'div { background: url(/some-very-very-long-path.png); }', + 'img { background: url(/a/some-very-very-long-path.png); }' + ] + }) + export class CompA {} + + @Component({ + selector: 'comp-b', + template: 'Comp B', + styles: [ + 'span { font-size: larger; }', + 'div { background: url(/some-very-very-long-path.png); }', + 'img { background: url(/b/some-very-very-long-path.png); }' + ] + }) + export class CompB {} + `); + + env.driveMain(); + const jsContents = env.getContents('test.js'); + + // Verify that long styles present in both components are extracted to a separate var. + expect(jsContents) + .toContain( + '_c0 = "div[_ngcontent-%COMP%] { background: url(/some-very-very-long-path.png); }";'); + + expect(jsContents) + .toContain( + 'styles: [' + + // This style is present in both components, but was not extracted into a separate + // var since it doesn't reach length threshold (50 chars) in `ConstantPool`. + '"span[_ngcontent-%COMP%] { font-size: larger; }", ' + + // Style that is present in both components, but reaches length threshold - + // extracted to a separate var. + '_c0, ' + + // Style that is unique to this component, but that reaches length threshold - + // remains a string in the `styles` array. + '"img[_ngcontent-%COMP%] { background: url(/a/some-very-very-long-path.png); }"]'); + + expect(jsContents) + .toContain( + 'styles: [' + + // This style is present in both components, but was not extracted into a separate + // var since it doesn't reach length threshold (50 chars) in `ConstantPool`. + '"span[_ngcontent-%COMP%] { font-size: larger; }", ' + + // Style that is present in both components, but reaches length threshold - + // extracted to a separate var. + '_c0, ' + + // Style that is unique to this component, but that reaches length threshold - + // remains a string in the `styles` array. + '"img[_ngcontent-%COMP%] { background: url(/b/some-very-very-long-path.png); }"]'); + }); }); describe('non-exported classes', () => { diff --git a/packages/compiler/src/constant_pool.ts b/packages/compiler/src/constant_pool.ts index 24e800c95d15..b083a2c1edea 100644 --- a/packages/compiler/src/constant_pool.ts +++ b/packages/compiler/src/constant_pool.ts @@ -316,5 +316,5 @@ function isVariable(e: o.Expression): e is o.ReadVarExpr { function isLongStringExpr(expr: o.LiteralExpr): boolean { return typeof expr.value === 'string' && - expr.value.length > POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS; + expr.value.length >= POOL_INCLUSION_LENGTH_THRESHOLD_FOR_STRINGS; } \ No newline at end of file diff --git a/packages/compiler/src/render3/view/compiler.ts b/packages/compiler/src/render3/view/compiler.ts index f0c305fe1903..7adf55fb4389 100644 --- a/packages/compiler/src/render3/view/compiler.ts +++ b/packages/compiler/src/render3/view/compiler.ts @@ -231,7 +231,7 @@ export function compileComponentFromMetadata( const styleValues = meta.encapsulation == core.ViewEncapsulation.Emulated ? compileStyles(meta.styles, CONTENT_ATTR, HOST_ATTR) : meta.styles; - const strings = styleValues.map(str => o.literal(str)); + const strings = styleValues.map(str => constantPool.getConstLiteral(o.literal(str))); definitionMap.set('styles', o.literalArr(strings)); } else if (meta.encapsulation === core.ViewEncapsulation.Emulated) { // If there is no style, don't generate css selectors on elements From a57119761bee503d440bb57efc8557b2bc194f14 Mon Sep 17 00:00:00 2001 From: Changyu Geng Date: Tue, 7 Jul 2020 09:15:44 +0800 Subject: [PATCH 058/253] docs: clarify the description of pipes (#37950) This commit clarifies some of the language regarding pipes in the pipes guide. This commit also specifies the term transforming rather than formatting. PR Close #37950 --- aio/content/guide/pipes.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index a28f0dd6468f..0d28ab4aa462 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -1,7 +1,7 @@ # Transforming Data Using Pipes -Use [pipes](guide/glossary#pipe "Definition of a pipe") to transform and format strings, currency amounts, dates, and other display data. -Pipes are simple functions you can use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. +Use [pipes](guide/glossary#pipe "Definition of a pipe") to transform strings, currency amounts, dates, and other data for display. +Pipes are simple functions you can use in [template expressions](/guide/glossary#template-expression "Definition of template expression") to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once. For example, you would use a pipe to show a date as **April 15, 1988** rather than the raw string format.

@@ -63,7 +63,7 @@ function. {@a parameterizing-a-pipe} -## Formatting data with parameters and chained pipes +## Transforming data with parameters and chained pipes Use optional parameters to fine-tune a pipe's output. For example, you can use the [`CurrencyPipe`](api/common/CurrencyPipe "API reference") with a country code such as EUR as a parameter. From 686f9ae4b2dde82601c677c49a56ef62258a7368 Mon Sep 17 00:00:00 2001 From: Omar Hasan Date: Sun, 26 Jul 2020 17:12:36 +0200 Subject: [PATCH 059/253] docs: fix breaking URL for RxJS marble testing (#38209) When checking this URL for the `RxJS marble testing` Ive found it pointing to `Page not found` PR Close #38209 --- aio/content/guide/testing-components-scenarios.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/testing-components-scenarios.md b/aio/content/guide/testing-components-scenarios.md index cdd66ad27e6d..7ddb1af0979f 100644 --- a/aio/content/guide/testing-components-scenarios.md +++ b/aio/content/guide/testing-components-scenarios.md @@ -779,7 +779,7 @@ which reports router activity, is a _hot_ observable. RxJS marble testing is a rich subject, beyond the scope of this guide. Learn about it on the web, starting with the -[official documentation](https://github.com/ReactiveX/rxjs/blob/master/doc/writing-marble-tests.md). +[official documentation](https://rxjs.dev/guide/testing/marble-testing).

From 28ef4bc44194808bf0799837258c844f09f93187 Mon Sep 17 00:00:00 2001 From: Kapunahele Wong Date: Tue, 9 Jun 2020 14:33:02 -0400 Subject: [PATCH 060/253] docs: add template ref var to glossary (#36743) There is not an entry in the glossary for template reference variable. To clarify for site visitors, we are adding one here. PR Close #36743 --- aio/content/guide/glossary.md | 13 +++++++++++++ aio/content/guide/template-reference-variables.md | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 38b9a732073c..e2ad149975b2 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -939,6 +939,19 @@ A TypeScript-like syntax that Angular evaluates within a [data binding](#data-bi Read about how to write template expressions in the [template expressions](guide/interpolation#template-expressions) section of the [Interpolation](guide/interpolation) guide. +{@a template-reference-variable} + +## template reference variable + +A variable defined in a template that references an instance associated with an element, such as a directive instance, component instance, template as in `TemplateRef`, or DOM element. +After declaring a template reference variable on an element in a template, +you can access values from that variable elsewhere within the same template. +The following example defines a template reference variable named `#phone`. + + + +For more information, see the [Template reference variable](guide/template-reference-variables) guide. + {@a token} ## token diff --git a/aio/content/guide/template-reference-variables.md b/aio/content/guide/template-reference-variables.md index 144bbfcf1e40..1f3fd5db2844 100644 --- a/aio/content/guide/template-reference-variables.md +++ b/aio/content/guide/template-reference-variables.md @@ -19,6 +19,13 @@ Here, a ` `, - host: { - '[@state]': 'state', - }, animations: [ trigger('state', [ state('opened', style({transform: 'translateY(0%)'})), @@ -41,6 +38,7 @@ import { animate, state, style, transition, trigger } from '@angular/animations' `] }) export class PopupComponent { + @HostBinding('@state') state: 'opened' | 'closed' = 'closed'; @Input() diff --git a/aio/content/examples/event-binding/src/app/click.directive.ts b/aio/content/examples/event-binding/src/app/click.directive.ts index 4e9e9085b17e..a04863fac81e 100644 --- a/aio/content/examples/event-binding/src/app/click.directive.ts +++ b/aio/content/examples/event-binding/src/app/click.directive.ts @@ -1,4 +1,4 @@ -/* tslint:disable use-output-property-decorator directive-class-suffix */ +// tslint:disable: directive-selector import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; @Directive({selector: '[myClick]'}) diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts index cbca85946a45..9ee6325b2eab 100644 --- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts +++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: no-output-native // #docregion import { Component, EventEmitter, Input, Output } from '@angular/core'; import { HeroTaxReturn } from './hero'; diff --git a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts index 8eed8bddbd7b..c150bcc21444 100644 --- a/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts +++ b/aio/content/examples/inputs-outputs/src/app/aliasing/aliasing.component.ts @@ -1,9 +1,4 @@ -/* tslint:disable:use-input-property-decorator */ -/* tslint:disable:use-output-property-decorator */ - -/* tslint:disable:no-input-rename */ - - +// tslint:disable: no-input-rename no-output-rename use-input-property-decorator use-output-property-decorator import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ diff --git a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts index 8aa8ee9f290e..6ec9eb2e63d9 100644 --- a/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/lifecycle-hooks/e2e/src/app.e2e-spec.ts @@ -135,7 +135,7 @@ describe('Lifecycle hooks', () => { const inputEle = element(by.css('spy-parent input')); const addHeroButtonEle = element(by.cssContainingText('spy-parent button', 'Add Hero')); const resetHeroesButtonEle = element(by.cssContainingText('spy-parent button', 'Reset Heroes')); - const heroEles = element.all(by.css('spy-parent div[mySpy')); + const heroEles = element.all(by.css('spy-parent div[appSpy')); const logEles = element.all(by.css('spy-parent h4 ~ div')); expect(heroEles.count()).toBe(2, 'should have two heroes displayed'); diff --git a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts index cddc8471360c..a2d7b5fd9b21 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/counter.component.ts @@ -13,7 +13,7 @@ import { LoggerService } from './logger.service'; Counter = {{counter}}

-- Counter Change Log --

`, styles: ['.counter {background: LightYellow; padding: 8px; margin-top: 8px}'] diff --git a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts index a597a5ca73bb..c66e41a6c93e 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/peek-a-boo.component.ts @@ -1,3 +1,5 @@ +// tslint:disable: no-conflicting-lifecycle +// #docregion import { AfterContentChecked, AfterContentInit, diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.component.html b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html index f7deae9448e8..96ca78194a0f 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/spy.component.html +++ b/aio/content/examples/lifecycle-hooks/src/app/spy.component.html @@ -7,7 +7,7 @@

Spy Directive

diff --git a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts index 01f3f9588061..c14f4e645507 100644 --- a/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts +++ b/aio/content/examples/lifecycle-hooks/src/app/spy.directive.ts @@ -7,8 +7,8 @@ let nextId = 1; // #docregion spy-directive // Spy on any element to which it is applied. -// Usage:

...

-@Directive({selector: '[mySpy]'}) +// Usage:

...

+@Directive({selector: '[appSpy]'}) export class SpyDirective implements OnInit, OnDestroy { constructor(private logger: LoggerService) { } diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts index 0ba6e38f5476..0eaca6bc625e 100644 --- a/aio/content/examples/observables-in-angular/src/main.ts +++ b/aio/content/examples/observables-in-angular/src/main.ts @@ -1,11 +1,12 @@ - +// tslint:disable: no-output-native +// #docregion import { Component, Output, OnInit, EventEmitter, NgModule } from '@angular/core'; import { Observable } from 'rxjs'; // #docregion eventemitter @Component({ - selector: 'zippy', + selector: 'app-zippy', template: `

Toggle

diff --git a/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts index fd747719812b..13f8bc1e9857 100644 --- a/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts +++ b/aio/content/examples/styleguide/src/02-08/app/shared/input-highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef } from '@angular/core'; diff --git a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts index 737af31f4fe5..3af48d241e44 100644 --- a/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts +++ b/aio/content/examples/styleguide/src/05-13/app/heroes/shared/hero-highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; diff --git a/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts index 05a0f9f07ffd..dc61f4e50484 100644 --- a/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts +++ b/aio/content/examples/styleguide/src/06-03/app/shared/validator2.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: no-host-metadata-property // #docregion import { Directive } from '@angular/core'; diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts index e97ccb387c87..5c02167ea361 100644 --- a/aio/content/examples/testing/src/app/demo/demo.ts +++ b/aio/content/examples/testing/src/app/demo/demo.ts @@ -1,4 +1,4 @@ -/* tslint:disable:forin */ +// tslint:disable: directive-selector forin no-input-rename import { Component, ContentChildren, Directive, EventEmitter, Injectable, Input, Output, Optional, HostBinding, HostListener, diff --git a/aio/content/examples/testing/src/app/shared/highlight.directive.ts b/aio/content/examples/testing/src/app/shared/highlight.directive.ts index ce851d70d02e..465c39cd09eb 100644 --- a/aio/content/examples/testing/src/app/shared/highlight.directive.ts +++ b/aio/content/examples/testing/src/app/shared/highlight.directive.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion import { Directive, ElementRef, Input, OnChanges } from '@angular/core'; diff --git a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts index 4da6f8fd04df..ea89f67ab957 100644 --- a/aio/content/examples/testing/src/testing/router-link-directive-stub.ts +++ b/aio/content/examples/testing/src/testing/router-link-directive-stub.ts @@ -3,7 +3,7 @@ import { Directive, Input, HostListener } from '@angular/core'; // export for convenience. export { RouterLink} from '@angular/router'; -/* tslint:disable:directive-class-suffix */ +// tslint:disable: directive-class-suffix directive-selector // #docregion router-link @Directive({ selector: '[routerLink]' diff --git a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts index 9d467a5411fd..f8292434f290 100644 --- a/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/a-to-ajs-transclusion/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion export const heroDetail = { bindings: { diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts index 4d74a1bea147..451507dda816 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-io/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion // #docregion hero-detail-io export const heroDetail = { diff --git a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts index 959ff16b0137..3b81dc6be277 100644 --- a/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts +++ b/aio/content/examples/upgrade-module/src/app/upgrade-static/hero-detail.component.ts @@ -1,3 +1,4 @@ +// tslint:disable: directive-selector // #docregion // #docregion hero-detail export const heroDetail = { diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md index 37a693f43cf1..94ec37fbc47b 100644 --- a/aio/content/guide/dynamic-component-loader.md +++ b/aio/content/guide/dynamic-component-loader.md @@ -42,7 +42,7 @@ mark valid insertion points in the template. `AdDirective` injects `ViewContainerRef` to gain access to the view container of the element that will host the dynamically added component. -In the `@Directive` decorator, notice the selector name, `ad-host`; +In the `@Directive` decorator, notice the selector name, `adHost`; that's what you use to apply the directive to the element. The next section shows you how. @@ -56,7 +56,7 @@ decorator's `template` property as a template string. The `` element is where you apply the directive you just made. To apply the `AdDirective`, recall the selector from `ad.directive.ts`, -`ad-host`. Apply that to `` without the square brackets. Now Angular knows +`[adHost]`. Apply that to `` without the square brackets. Now Angular knows where to dynamically load components. diff --git a/aio/content/guide/observables-in-angular.md b/aio/content/guide/observables-in-angular.md index d4f31ab32d5b..a12030410ef0 100644 --- a/aio/content/guide/observables-in-angular.md +++ b/aio/content/guide/observables-in-angular.md @@ -14,7 +14,7 @@ When you call `emit()`, it passes the emitted value to the `next()` method of an A good example of usage can be found in the [EventEmitter](api/core/EventEmitter) documentation. Here is the example component that listens for open and close events: -`` +`` Here is the component definition: From 5d32a199a96dda102333c0d006d5497be9a3d7d0 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Thu, 30 Jul 2020 13:03:23 +0300 Subject: [PATCH 120/253] refactor(docs-infra): update docs examples `tslint.json` to match CLI and fix failures (#38143) This commit updates the `tslint.json` configuration file, that is used to lint the docs examples, to match the one generated for new Angular CLI apps. There are some minimal differences (marked with `TODO` comments) for things, such as component selector prefix, that would require extensive and/or difficult to validate changes in guides. This commit also includes the final adjustments to make the docs examples code compatible with the new tslint rules. (The bulk of the work has been done in previous commits.) PR Close #38143 --- .../e2e/src/app.e2e-spec.ts | 3 +- .../src/app/app.component.ts | 6 +- .../src/app/parent-finder.component.ts | 2 +- .../src/app/car/car.component.ts | 4 +- .../app/dashboard/dashboard.component.spec.ts | 2 +- .../testing/src/app/demo/async-helper.spec.ts | 2 +- .../testing/src/testing/jasmine-matchers.d.ts | 1 + .../testing/src/testing/jasmine-matchers.ts | 1 + aio/content/examples/tslint.json | 180 ++++++++++++------ .../examples/universal/src/app/app.module.ts | 2 +- .../shared/boilerplate/cli/tslint.json | 86 +++++++-- .../shared/boilerplate/systemjs/tslint.json | 177 +++++++++++------ 12 files changed, 317 insertions(+), 149 deletions(-) diff --git a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts index ae38d15d8f6f..cc4c47c127b1 100644 --- a/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts +++ b/aio/content/examples/ajs-quick-reference/e2e/src/app.e2e-spec.ts @@ -24,8 +24,7 @@ describe('AngularJS to Angular Quick Reference Tests', () => { // Go through the samples const movieRows = getMovieRows(); - for (let i = 0; i < expectedSamples.length; i++) { - const sample = expectedSamples[i]; + for (const sample of expectedSamples) { const tableCell = movieRows.get(sample.row) .all(by.tagName('td')).get(sample.column); // Check the cell or its nested element diff --git a/aio/content/examples/built-in-directives/src/app/app.component.ts b/aio/content/examples/built-in-directives/src/app/app.component.ts index 10a37ee371c4..a2035effa567 100644 --- a/aio/content/examples/built-in-directives/src/app/app.component.ts +++ b/aio/content/examples/built-in-directives/src/app/app.component.ts @@ -76,11 +76,7 @@ export class AppComponent implements OnInit { } giveNullCustomerValue() { - !(this.nullCustomer = null) ? (this.nullCustomer = 'Kelly') : (this.nullCustomer = null); - } - - resetNullItem() { - this.nullCustomer = null; + this.nullCustomer = 'Kelly'; } resetItems() { diff --git a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts index 18df7ddae098..cf25406ed582 100644 --- a/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts +++ b/aio/content/examples/dependency-injection-in-action/src/app/parent-finder.component.ts @@ -1,4 +1,4 @@ -/* tslint:disable: no-unused-variable component-selector one-line space-before-function-paren */ +// tslint:disable: component-selector space-before-function-paren // #docplaster // #docregion import { Component, forwardRef, Optional, SkipSelf } from '@angular/core'; diff --git a/aio/content/examples/dependency-injection/src/app/car/car.component.ts b/aio/content/examples/dependency-injection/src/app/car/car.component.ts index d4f418e058f7..3463c5225005 100644 --- a/aio/content/examples/dependency-injection/src/app/car/car.component.ts +++ b/aio/content/examples/dependency-injection/src/app/car/car.component.ts @@ -27,9 +27,9 @@ import { useInjector } from './car-injector'; providers: [Car, Engine, Tires] }) export class CarComponent { - factoryCar = (new CarFactory).createCar(); + factoryCar = (new CarFactory()).createCar(); injectorCar = useInjector(); - noDiCar = new CarNoDi; + noDiCar = new CarNoDi(); simpleCar = simpleCar(); superCar = superCar(); testCar = testCar(); diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts index 1a9a695cc486..e60e4cc313fb 100644 --- a/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts +++ b/aio/content/examples/testing/src/app/dashboard/dashboard.component.spec.ts @@ -90,7 +90,7 @@ function compileAndCreate() { * The (almost) same tests for both. * Only change: the way that the first hero is clicked */ -function tests(heroClick: Function) { +function tests(heroClick: () => void) { it('should NOT have heroes before ngOnInit', () => { expect(comp.heroes.length).toBe(0, diff --git a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts index 8f6d340ffb9c..c96954d04299 100644 --- a/aio/content/examples/testing/src/app/demo/async-helper.spec.ts +++ b/aio/content/examples/testing/src/app/demo/async-helper.spec.ts @@ -147,7 +147,7 @@ describe('Angular async helper', () => { // #docregion async-test-promise-then describe('test jsonp', () => { - function jsonp(url: string, callback: Function) { + function jsonp(url: string, callback: () => void) { // do a jsonp call which is not zone aware } // need to config __zone_symbol__supportWaitUnResolvedChainedPromise flag diff --git a/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts index cafce642f9ae..62063b8dfa39 100644 --- a/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts +++ b/aio/content/examples/testing/src/testing/jasmine-matchers.d.ts @@ -1,3 +1,4 @@ +// tslint:disable-next-line: no-namespace declare namespace jasmine { interface Matchers { toHaveText(actual: any, expectationFailOutput?: any): jasmine.CustomMatcher; diff --git a/aio/content/examples/testing/src/testing/jasmine-matchers.ts b/aio/content/examples/testing/src/testing/jasmine-matchers.ts index 0c127e0977ce..6f2ff3c250f2 100644 --- a/aio/content/examples/testing/src/testing/jasmine-matchers.ts +++ b/aio/content/examples/testing/src/testing/jasmine-matchers.ts @@ -1,3 +1,4 @@ +// tslint:disable-next-line: no-reference /// //// Jasmine Custom Matchers //// diff --git a/aio/content/examples/tslint.json b/aio/content/examples/tslint.json index 45be76dec48d..bf1abc0372d7 100644 --- a/aio/content/examples/tslint.json +++ b/aio/content/examples/tslint.json @@ -1,28 +1,61 @@ { - "rulesDirectory": [ - "../../node_modules/codelyzer" - ], + "extends": "tslint:recommended", "rules": { - "class-name": true, - "comment-format": [ + "align": { + "options": [ + "parameters", + "statements" + ] + }, + "array-type": false, + "arrow-return-shorthand": true, + "curly": true, + "deprecation": { + "severity": "warning" + }, + "component-class-suffix": true, + "component-selector": [ true, - "check-space" + "element", + // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense). + "", + "kebab-case" + ], + "contextual-lifecycle": true, + "directive-class-suffix": true, + "directive-selector": [ + true, + "attribute", + ["app", "toh"], + "camelCase" ], - "curly": true, "eofline": true, - "forin": true, - "indent": [ + "import-blacklist": [ true, - "spaces" + "rxjs/Rx" ], - "label-position": true, + "import-spacing": true, + "indent": { + "options": [ + "spaces" + ] + }, + "max-classes-per-file": false, "max-line-length": [ true, 140 ], - "member-access": false, - "no-arg": true, - "no-bitwise": true, + "member-ordering": [ + true, + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } + ], "no-console": [ true, "debug", @@ -31,63 +64,86 @@ "timeEnd", "trace" ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-variable": true, "no-empty": false, - "no-eval": true, - "no-inferrable-types": true, - "no-string-literal": false, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-non-null-assertion": true, + "no-redundant-jsdoc": true, "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unused-expression": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ + "no-var-requires": false, + "object-literal-key-quotes": [ true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" + "as-needed" ], "quotemark": [ true, "single" ], - "radix": true, - "semicolon": [ - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" + "semicolon": { + "options": [ + "always" + ] + }, + "space-before-function-paren": { + "options": { + "anonymous": "never", + "asyncArrow": "always", + "constructor": "never", + "method": "never", + "named": "never" } - ], - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ], - + }, + "typedef-whitespace": { + "options": [ + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ] + }, + "variable-name": { + "options": [ + "ban-keywords", + "check-format", + "allow-pascal-case" + ] + }, + "whitespace": { + "options": [ + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + }, + "no-conflicting-lifecycle": true, + "no-host-metadata-property": true, + "no-input-rename": true, "no-inputs-metadata-property": true, + "no-output-native": true, + "no-output-on-prefix": true, + "no-output-rename": true, "no-outputs-metadata-property": true, - "use-life-cycle-interface": true, - "use-pipe-transform-interface": true, - "component-class-suffix": true, - "directive-class-suffix": true, - "import-destructuring-spacing": true - } + "template-banana-in-box": true, + "template-no-negated-async": true, + "use-lifecycle-interface": true, + "use-pipe-transform-interface": true + }, + "rulesDirectory": [ + "codelyzer" + ] } diff --git a/aio/content/examples/universal/src/app/app.module.ts b/aio/content/examples/universal/src/app/app.module.ts index a843e4d77418..b27d8223563c 100644 --- a/aio/content/examples/universal/src/app/app.module.ts +++ b/aio/content/examples/universal/src/app/app.module.ts @@ -51,7 +51,7 @@ import { isPlatformBrowser } from '@angular/common'; export class AppModule { // #docregion platform-detection constructor( - @Inject(PLATFORM_ID) private platformId: Object, + @Inject(PLATFORM_ID) private platformId: object, @Inject(APP_ID) private appId: string) { const platform = isPlatformBrowser(platformId) ? 'in the browser' : 'on the server'; diff --git a/aio/tools/examples/shared/boilerplate/cli/tslint.json b/aio/tools/examples/shared/boilerplate/cli/tslint.json index f85fc68d9e65..bf1abc0372d7 100644 --- a/aio/tools/examples/shared/boilerplate/cli/tslint.json +++ b/aio/tools/examples/shared/boilerplate/cli/tslint.json @@ -1,37 +1,50 @@ { "extends": "tslint:recommended", "rules": { + "align": { + "options": [ + "parameters", + "statements" + ] + }, "array-type": false, - "arrow-parens": false, + "arrow-return-shorthand": true, + "curly": true, "deprecation": { "severity": "warning" }, "component-class-suffix": true, + "component-selector": [ + true, + "element", + // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense). + "", + "kebab-case" + ], "contextual-lifecycle": true, "directive-class-suffix": true, "directive-selector": [ true, "attribute", - "app", + ["app", "toh"], "camelCase" ], - "component-selector": [ - true, - "element", - "app", - "kebab-case" - ], + "eofline": true, "import-blacklist": [ true, "rxjs/Rx" ], - "interface-name": false, + "import-spacing": true, + "indent": { + "options": [ + "spaces" + ] + }, "max-classes-per-file": false, "max-line-length": [ true, 140 ], - "member-access": false, "member-ordering": [ true, { @@ -43,7 +56,6 @@ ] } ], - "no-consecutive-blank-lines": false, "no-console": [ true, "debug", @@ -65,13 +77,59 @@ true, "as-needed" ], - "object-literal-sort-keys": false, - "ordered-imports": false, "quotemark": [ true, "single" ], - "trailing-comma": false, + "semicolon": { + "options": [ + "always" + ] + }, + "space-before-function-paren": { + "options": { + "anonymous": "never", + "asyncArrow": "always", + "constructor": "never", + "method": "never", + "named": "never" + } + }, + "typedef-whitespace": { + "options": [ + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ] + }, + "variable-name": { + "options": [ + "ban-keywords", + "check-format", + "allow-pascal-case" + ] + }, + "whitespace": { + "options": [ + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + }, "no-conflicting-lifecycle": true, "no-host-metadata-property": true, "no-input-rename": true, diff --git a/aio/tools/examples/shared/boilerplate/systemjs/tslint.json b/aio/tools/examples/shared/boilerplate/systemjs/tslint.json index a766b0154e88..bf1abc0372d7 100644 --- a/aio/tools/examples/shared/boilerplate/systemjs/tslint.json +++ b/aio/tools/examples/shared/boilerplate/systemjs/tslint.json @@ -1,31 +1,61 @@ { + "extends": "tslint:recommended", "rules": { - "class-name": true, - "comment-format": [ + "align": { + "options": [ + "parameters", + "statements" + ] + }, + "array-type": false, + "arrow-return-shorthand": true, + "curly": true, + "deprecation": { + "severity": "warning" + }, + "component-class-suffix": true, + "component-selector": [ true, - "check-space" + "element", + // TODO: Fix the code and change the prefix to `"app"` (or whatever makes sense). + "", + "kebab-case" + ], + "contextual-lifecycle": true, + "directive-class-suffix": true, + "directive-selector": [ + true, + "attribute", + ["app", "toh"], + "camelCase" ], - "curly": true, "eofline": true, - "forin": true, - "indent": [ + "import-blacklist": [ true, - "spaces" + "rxjs/Rx" ], - "label-position": true, - "label-undefined": true, + "import-spacing": true, + "indent": { + "options": [ + "spaces" + ] + }, + "max-classes-per-file": false, "max-line-length": [ true, 140 ], - "member-access": false, "member-ordering": [ true, - "static-before-instance", - "variables-before-functions" + { + "order": [ + "static-field", + "instance-field", + "static-method", + "instance-method" + ] + } ], - "no-arg": true, - "no-bitwise": true, "no-console": [ true, "debug", @@ -34,59 +64,86 @@ "timeEnd", "trace" ], - "no-construct": true, - "no-debugger": true, - "no-duplicate-key": true, - "no-duplicate-variable": true, "no-empty": false, - "no-eval": true, - "no-inferrable-types": true, - "no-shadowed-variable": true, - "no-string-literal": false, + "no-inferrable-types": [ + true, + "ignore-params" + ], + "no-non-null-assertion": true, + "no-redundant-jsdoc": true, "no-switch-case-fall-through": true, - "no-trailing-whitespace": true, - "no-unused-expression": true, - "no-unused-variable": true, - "no-unreachable": true, - "no-var-keyword": true, - "object-literal-sort-keys": false, - "one-line": [ + "no-var-requires": false, + "object-literal-key-quotes": [ true, - "check-open-brace", - "check-catch", - "check-else", - "check-whitespace" + "as-needed" ], "quotemark": [ true, "single" ], - "radix": true, - "semicolon": [ - "always" - ], - "triple-equals": [ - true, - "allow-null-check" - ], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" + "semicolon": { + "options": [ + "always" + ] + }, + "space-before-function-paren": { + "options": { + "anonymous": "never", + "asyncArrow": "always", + "constructor": "never", + "method": "never", + "named": "never" } - ], - "variable-name": false, - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-operator", - "check-separator", - "check-type" - ] - } + }, + "typedef-whitespace": { + "options": [ + { + "call-signature": "nospace", + "index-signature": "nospace", + "parameter": "nospace", + "property-declaration": "nospace", + "variable-declaration": "nospace" + }, + { + "call-signature": "onespace", + "index-signature": "onespace", + "parameter": "onespace", + "property-declaration": "onespace", + "variable-declaration": "onespace" + } + ] + }, + "variable-name": { + "options": [ + "ban-keywords", + "check-format", + "allow-pascal-case" + ] + }, + "whitespace": { + "options": [ + "check-branch", + "check-decl", + "check-operator", + "check-separator", + "check-type", + "check-typecast" + ] + }, + "no-conflicting-lifecycle": true, + "no-host-metadata-property": true, + "no-input-rename": true, + "no-inputs-metadata-property": true, + "no-output-native": true, + "no-output-on-prefix": true, + "no-output-rename": true, + "no-outputs-metadata-property": true, + "template-banana-in-box": true, + "template-no-negated-async": true, + "use-lifecycle-interface": true, + "use-pipe-transform-interface": true + }, + "rulesDirectory": [ + "codelyzer" + ] } From 0b2f134680139ad8824c6339d3e968c67cfce611 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Fri, 31 Jul 2020 12:26:39 -0700 Subject: [PATCH 121/253] fix(compiler): update unparsable character reference entity error messages (#38319) Within an angular template, when a character entity is unable to be parsed, previously a generic unexpected character error was thrown. This does not properly express the issue that was discovered as the issue is actually caused by the discovered character making the whole of the entity unparsable. The compiler will now instead inform via the error message what string was attempted to be parsed and what it was attempted to be parsed as. Example, for this template: ```

ģp

``` Before this change: `Unexpected character "p"` After this change: `Unable to parse entity "ģp" - hexadecimal character reference entities must end with ";"` Fixes #26067 PR Close #38319 --- packages/compiler/src/ml_parser/lexer.ts | 17 ++++++++++++++++- packages/compiler/test/ml_parser/lexer_spec.ts | 16 ++++++++++------ 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/compiler/src/ml_parser/lexer.ts b/packages/compiler/src/ml_parser/lexer.ts index ffe386537e18..38a82a7d23f6 100644 --- a/packages/compiler/src/ml_parser/lexer.ts +++ b/packages/compiler/src/ml_parser/lexer.ts @@ -138,6 +138,16 @@ function _unknownEntityErrorMsg(entitySrc: string): string { return `Unknown entity "${entitySrc}" - use the "&#;" or "&#x;" syntax`; } +function _unparsableEntityErrorMsg(type: CharacterReferenceType, entityStr: string): string { + return `Unable to parse entity "${entityStr}" - ${ + type} character reference entities must end with ";"`; +} + +enum CharacterReferenceType { + HEX = 'hexadecimal', + DEC = 'decimal', +} + class _ControlFlowError { constructor(public error: TokenError) {} } @@ -400,8 +410,13 @@ class _Tokenizer { const codeStart = this._cursor.clone(); this._attemptCharCodeUntilFn(isDigitEntityEnd); if (this._cursor.peek() != chars.$SEMICOLON) { + // Advance cursor to include the peeked character in the string provided to the error + // message. + this._cursor.advance(); + const entityType = isHex ? CharacterReferenceType.HEX : CharacterReferenceType.DEC; throw this._createError( - _unexpectedCharacterErrorMsg(this._cursor.peek()), this._cursor.getSpan()); + _unparsableEntityErrorMsg(entityType, this._cursor.getChars(start)), + this._cursor.getSpan()); } const strNum = this._cursor.getChars(codeStart); this._cursor.advance(); diff --git a/packages/compiler/test/ml_parser/lexer_spec.ts b/packages/compiler/test/ml_parser/lexer_spec.ts index 79b387e86fda..32895b12eabd 100644 --- a/packages/compiler/test/ml_parser/lexer_spec.ts +++ b/packages/compiler/test/ml_parser/lexer_spec.ts @@ -477,12 +477,16 @@ import {ParseLocation, ParseSourceFile, ParseSourceSpan} from '../../src/parse_u lex.TokenType.TEXT, 'Unknown entity "tbo" - use the "&#;" or "&#x;" syntax', '0:0' ]]); - expect(tokenizeAndHumanizeErrors('sdf;')).toEqual([ - [lex.TokenType.TEXT, 'Unexpected character "s"', '0:3'] - ]); - expect(tokenizeAndHumanizeErrors(' sdf;')).toEqual([ - [lex.TokenType.TEXT, 'Unexpected character "s"', '0:4'] - ]); + expect(tokenizeAndHumanizeErrors('sdf;')).toEqual([[ + lex.TokenType.TEXT, + 'Unable to parse entity "s" - decimal character reference entities must end with ";"', + '0:4' + ]]); + expect(tokenizeAndHumanizeErrors(' sdf;')).toEqual([[ + lex.TokenType.TEXT, + 'Unable to parse entity " s" - hexadecimal character reference entities must end with ";"', + '0:5' + ]]); expect(tokenizeAndHumanizeErrors('઼')).toEqual([ [lex.TokenType.TEXT, 'Unexpected character "EOF"', '0:6'] From 2da56a70a2d7d895b23aeabdb0d6c54ceea3c9ff Mon Sep 17 00:00:00 2001 From: Christian Morante Date: Sat, 15 Aug 2020 18:31:09 -0500 Subject: [PATCH 122/253] docs: traducida la guia Intro (#60) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: traducida la guia Intro Se traduce la guia de Introduccion a la documentacion de Angular * docs: Correecciones de la 1era revisión --- aio/content/marketing/docs.en.md | 58 ++++++++++++++++++++++++++++++ aio/content/marketing/docs.md | 61 ++++++++++++++++---------------- 2 files changed, 88 insertions(+), 31 deletions(-) create mode 100644 aio/content/marketing/docs.en.md diff --git a/aio/content/marketing/docs.en.md b/aio/content/marketing/docs.en.md new file mode 100644 index 000000000000..f2d4a44c60e5 --- /dev/null +++ b/aio/content/marketing/docs.en.md @@ -0,0 +1,58 @@ +

Introduction to the Angular Docs

+ +Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. + +These Angular docs help you learn and use the Angular framework and development platform, from your first application to optimizing complex single-page apps for enterprises. +Tutorials and guides include downloadable examples to accelerate your projects. + + +

+ +

Get Started

Set up your local environment for development with the Angular CLI.

Local setup

+ + +

Learn and Explore

Learn about the fundamental design concepts and architecture of Angular apps.

Introduction to Angular concepts

+ + +

Take a Look

Examine and work with a small ready-made Angular app, without any setup.

Try it now

+ + +

Hello World

Work through a full tutorial to create your first app.

Tour of Heroes tutorial

+ + + +

+ + +## Assumptions + + +These docs assume that you are already familiar with [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Learn HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Learn CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), +and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). +The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). +Most Angular code can be written with just the latest JavaScript, using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata. + + +## Feedback + +

You can sit with us!

+ +We want to hear from you. [Report problems or submit suggestions for future docs.](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form") + +Contribute to Angular docs by creating +[pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests") +on the Angular Github repository. +See [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide") +for information about submission guidelines. + +Our community values respectful, supportive communication. +Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct"). diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index f2d4a44c60e5..0d9248498d4d 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -1,58 +1,57 @@ -

Introduction to the Angular Docs

Introducción a la Documentación de Angular

-Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps. +Angular es un framework de diseño de aplicaciones y plataforma de desarrollo para crear aplicaciones de una sola página eficientes y sofisticadas -These Angular docs help you learn and use the Angular framework and development platform, from your first application to optimizing complex single-page apps for enterprises. -Tutorials and guides include downloadable examples to accelerate your projects. +Esta documentación de Angular te ayuda a aprender y usar el framework y la plataforma de desarrollo, desde su primera aplicación hasta la optimización de aplicaciones complejas de una sola página, para empresas. +Los tutoriales y guías incluyen ejemplos descargables para acelerar tus proyectos.

Get Started

Set up your local environment for development with the Angular CLI.

Local setup

Comienza

Configura tu entorno local para el desarrollo, con Angular CLI.

Configuración local

Learn and Explore

Learn about the fundamental design concepts and architecture of Angular apps.

Introduction to Angular concepts

Aprende y Explora

Aprende sobre arquitectura y conceptos de diseño fundamentales de aplicaciones Angular.

Introducción a conceptos de Angular

Take a Look

Examine and work with a small ready-made Angular app, without any setup.

Try it now

Echa un vistazo

Examina y trabaja con una pequeña aplicación Angular lista para usar, sin configuraciónes.

Pruébalo ahora

Hello World

Work through a full tutorial to create your first app.

Tour of Heroes tutorial

Hola Mundo

Trabaja mediante un tutorial completo para crear tu primera aplicación.

Tutorial Tour de Héroes

-## Assumptions +## Supuestos -These docs assume that you are already familiar with [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Learn HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Learn CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Learn JavaScript"), -and some of the tools from the [latest standards](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Latest JavaScript standards"), such as [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "ES2015 Classes") and [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "ES2015 Modules"). -The code samples are written using [TypeScript](https://www.typescriptlang.org/ "TypeScript"). -Most Angular code can be written with just the latest JavaScript, using [types](https://www.typescriptlang.org/docs/handbook/classes.html "TypeScript Types") for dependency injection, and using [decorators](https://www.typescriptlang.org/docs/handbook/decorators.html "Decorators") for metadata. +Esta documentación asume que estas familiarizado con [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Aprende HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Aprende CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Aprende JavaScript"), +y algunas herramientas de los [últimos estándares javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Últimos estándares JavaScript"), como son las [clases](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "Clases ES2015") y [modulos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "Modulos ES2015"). +Los ejemplos de código son escritos usando [TypeScript](https://www.typescriptlang.org/ "TypeScript"). +La mayor parte del código Angular se puede escribir tan solo con la versión más reciente de JavaScript, usando [tipos](https://www.typescriptlang.org/docs/handbook/classes.html "Tipos TypeScript") para inyección de dependencia, y usando [decoradores](https://www.typescriptlang.org/docs/handbook/decorators.html "Decoradores") para metadatos. -## Feedback +## Retrolimentación -

You can sit with us!

Puedes sentarte con nosotros!

-We want to hear from you. [Report problems or submit suggestions for future docs.](https://github.com/angular/angular/issues/new/choose "Angular GitHub repository new issue form") +Queremos saber de ti. [Informa problemas o envía sugerencias para nueva documentación.](https://github.com/angular-hispano/angular/issues/new/choose "Repositorio GitHub de Angular, form para nuevo issue") -Contribute to Angular docs by creating -[pull requests](https://github.com/angular/angular/pulls "Angular Github pull requests") -on the Angular Github repository. -See [Contributing to Angular](https://github.com/angular/angular/blob/master/CONTRIBUTING.md "Contributing guide") -for information about submission guidelines. +Colabora con la documentación de Angular creando [pull requests](https://github.com/angular-hispano/angular/pulls "Angular Github pull requests") +en el repositorio Github de Angular en español. +Mira [Colaborando a Angular](https://github.com/angular-hispano/angular/blob/master/CONTRIBUTING.md "Guía de Colaboración") +para obtener información sobre las pautas de envío de nuevas colaboraciones. -Our community values respectful, supportive communication. -Please consult and adhere to the [Code of Conduct](https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Contributor code of conduct"). +Nuestra comunidad valora la comunicación respetuosa y solidaria. +Consulta y adhierete al [Código de Conducta](https://github.com/angular-hispano/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Código de Conducta del Colaborador"). From d870e5c30959ed159b01e61bdd8bae8d31de1eae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Sat, 15 Aug 2020 18:27:22 -0600 Subject: [PATCH 123/253] docs: translate CONTRIBUTING.md to spanish (#58) * docs: translate CONTRIBUTING.md to spanish Translate CONTRIBUTING.md to spanish Fix #48 * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md * Update CONTRIBUTING.md Co-authored-by: Pato <11162114+devpato@users.noreply.github.com> --- CONTRIBUTING.en.md | 359 +++++++++++++++++++++++++++++++++++++++++++++ CONTRIBUTING.md | 305 +++++++++++++++++++------------------- 2 files changed, 511 insertions(+), 153 deletions(-) create mode 100644 CONTRIBUTING.en.md diff --git a/CONTRIBUTING.en.md b/CONTRIBUTING.en.md new file mode 100644 index 000000000000..3ec3a41f0af1 --- /dev/null +++ b/CONTRIBUTING.en.md @@ -0,0 +1,359 @@ +# Contributing to Angular + +We would love for you to contribute to Angular and help make it even better than it is today! +As a contributor, here are the guidelines we would like you to follow: + + - [Code of Conduct](#coc) + - [Question or Problem?](#question) + - [Issues and Bugs](#issue) + - [Feature Requests](#feature) + - [Submission Guidelines](#submit) + - [Coding Rules](#rules) + - [Commit Message Guidelines](#commit) + - [Signing the CLA](#cla) + + +## Code of Conduct + +Help us keep Angular open and inclusive. +Please read and follow our [Code of Conduct][coc]. + + +## Got a Question or Problem? + +Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. +Instead, we recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) to ask support-related questions. When creating a new question on Stack Overflow, make sure to add the `angular` tag. + +Stack Overflow is a much better place to ask questions since: + +- there are thousands of people willing to help on Stack Overflow +- questions and answers stay available for public viewing so your question/answer might help someone else +- Stack Overflow's voting system assures that the best answers are prominently visible. + +To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow. + +If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter]. + + +## Found a Bug? + +If you find a bug in the source code, you can help us by [submitting an issue](#submit-issue) to our [GitHub Repository][github]. +Even better, you can [submit a Pull Request](#submit-pr) with a fix. + + +## Missing a Feature? +You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub Repository. +If you would like to *implement* a new feature, please consider the size of the change in order to determine the right steps to proceed: + +* For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed. + This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project. + + **Note**: Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature. + +* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr). + + +## Submission Guidelines + + +### Submitting an Issue + +Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available. + +We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. +In order to reproduce bugs, we require that you provide a minimal reproduction. +Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions. + +A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem. + +We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs. +Often, developers find coding problems themselves while preparing a minimal reproduction. +We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it. + +Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced. + +You can file new issues by selecting from our [new issue templates](https://github.com/angular/angular/issues/new/choose) and filling out the issue template. + + +### Submitting a Pull Request (PR) + +Before you submit your Pull Request (PR) consider the following guidelines: + +1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR that relates to your submission. + You don't want to duplicate existing efforts. + +2. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add. + Discussing the design upfront helps to ensure that we're ready to accept your work. + +3. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs. + We cannot accept code without a signed CLA. + Make sure you author all contributed Git commits with email address associated with your CLA signature. + +4. Fork the angular/angular repo. + +5. Make your changes in a new git branch: + + ```shell + git checkout -b my-fix-branch master + ``` + +6. Create your patch, **including appropriate test cases**. + +7. Follow our [Coding Rules](#rules). + +8. Run the full Angular test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass. + +9. Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit). + Adherence to these conventions is necessary because release notes are automatically generated from these messages. + + ```shell + git commit -a + ``` + Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files. + +10. Push your branch to GitHub: + + ```shell + git push origin my-fix-branch + ``` + +11. In GitHub, send a pull request to `angular:master`. + + If we ask for changes via code reviews then: + + * Make the required updates. + * Re-run the Angular test suites to ensure tests are still passing. + * Rebase your branch and force push to your GitHub repository (this will update your Pull Request): + + ```shell + git rebase master -i + git push -f + ``` + +That's it! Thank you for your contribution! + + +#### After your pull request is merged + +After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository: + +* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows: + + ```shell + git push origin --delete my-fix-branch + ``` + +* Check out the master branch: + + ```shell + git checkout master -f + ``` + +* Delete the local branch: + + ```shell + git branch -D my-fix-branch + ``` + +* Update your master with the latest upstream version: + + ```shell + git pull --ff upstream master + ``` + + +## Coding Rules +To ensure consistency throughout the source code, keep these rules in mind as you are working: + +* All features or bug fixes **must be tested** by one or more specs (unit-tests). +* All public API methods **must be documented**. +* We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at **100 characters**. + + An automated formatter is available, see [DEVELOPER.md](docs/DEVELOPER.md#clang-format). + + +## Commit Message Format + +*This specification is inspired and supersedes the [AngularJS commit message format][commit-message-format].* + +We have very precise rules over how our Git commit messages must be formatted. +This format leads to **easier to read commit history**. + +Each commit message consists of a **header**, a **body**, and a **footer**. + + +``` +

+ + + +

` fields are mandatory, the `()` field is optional. + + +##### Type + +Must be one of the following: + +* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) +* **ci**: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs) +* **docs**: Documentation only changes +* **feat**: A new feature +* **fix**: A bug fix +* **perf**: A code change that improves performance +* **refactor**: A code change that neither fixes a bug nor adds a feature +* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) +* **test**: Adding missing tests or correcting existing tests + + +##### Scope +The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages). + +The following is the list of supported scopes: + +* `animations` +* `bazel` +* `benchpress` +* `common` +* `compiler` +* `compiler-cli` +* `core` +* `elements` +* `forms` +* `http` +* `language-service` +* `localize` +* `platform-browser` +* `platform-browser-dynamic` +* `platform-server` +* `platform-webworker` +* `platform-webworker-dynamic` +* `router` +* `service-worker` +* `upgrade` +* `zone.js` + +There are currently a few exceptions to the "use package name" rule: + +* `packaging`: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc. + +* `changelog`: used for updating the release notes in CHANGELOG.md + +* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra + +* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo + +* `migrations`: used for changes to the `ng update` migrations. + +* `ngcc`: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md) + +* `ve`: used for changes specific to ViewEngine (legacy compiler/renderer). + +* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`). + + +##### Summary + +Use the summary field to provide a succinct description of the change: + +* use the imperative, present tense: "change" not "changed" nor "changes" +* don't capitalize the first letter +* no dot (.) at the end + + +#### Commit Message Body + +Just as in the summary, use the imperative, present tense: "fix" not "fixed" nor "fixes". + +Explain the motivation for the change in the commit message body. This commit message should explain _why_ you are making the change. +You can include a comparison of the previous behavior with the new behavior in order to illustrate the impact of the change. + + +#### Commit Message Footer + +The footer can contain information about breaking changes and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to. + +``` +BREAKING CHANGE: + + + + +Fixes # +``` + +Breaking Change section should start with the phrase "BREAKING CHANGE: " followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions. + + +### Revert commits + +If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. + +The content of the commit message body should contain: + +- information about the SHA of the commit being reverted in the following format: `This reverts commit `, +- a clear description of the reason for reverting the commit message. + + +## Signing the CLA + +Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code +changes to be accepted, the CLA must be signed. It's a quick process, we promise! + +* For individuals, we have a [simple click-through form][individual-cla]. +* For corporations, we'll need you to + [print, sign and one of scan+email, fax or mail the form][corporate-cla]. + +If you have more than one GitHub accounts, or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests. + +The following documents can help you sort out issues with GitHub accounts and multiple email addresses: + + * https://help.github.com/articles/setting-your-commit-email-address-in-git/ + * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean + * https://help.github.com/articles/about-commit-email-addresses/ + * https://help.github.com/articles/blocking-command-line-pushes-that-expose-your-personal-email-address/ + + + + +[angular-group]: https://groups.google.com/forum/#!forum/angular +[coc]: https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md +[commit-message-format]: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit# +[corporate-cla]: http://code.google.com/legal/corporate-cla-v1.0.html +[dev-doc]: https://github.com/angular/angular/blob/master/docs/DEVELOPER.md +[github]: https://github.com/angular/angular +[gitter]: https://gitter.im/angular/angular +[individual-cla]: http://code.google.com/legal/individual-cla-v1.0.html +[js-style-guide]: https://google.github.io/styleguide/jsguide.html +[jsfiddle]: http://jsfiddle.net +[plunker]: http://plnkr.co/edit +[runnable]: http://runnable.com +[stackoverflow]: http://stackoverflow.com/questions/tagged/angular diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3ec3a41f0af1..9206c0fb6405 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,243 +1,243 @@ -# Contributing to Angular +# Contribuye a Angular -We would love for you to contribute to Angular and help make it even better than it is today! -As a contributor, here are the guidelines we would like you to follow: +¡Nos encantaría que contribuyeras a Angular y que ayudaras a hacerlo aún mejor de lo que es hoy! +Como colaborador, estos son los lineamientos que nos gustaría que siguieras: - - [Code of Conduct](#coc) - - [Question or Problem?](#question) - - [Issues and Bugs](#issue) - - [Feature Requests](#feature) - - [Submission Guidelines](#submit) - - [Coding Rules](#rules) - - [Commit Message Guidelines](#commit) - - [Signing the CLA](#cla) + - [Código de conducta](#coc) + - [¿Preguntas o problemas?](#question) + - [_Issues_ y _bugs_](#issue) + - [Solicitud de funcionalidades](#feature) + - [Lineamientos para la creación de _issues_ y _PR_](#submit) + - [Reglas del código](#rules) + - [Convención para el mensaje de los _commits_](#commit) + - [Firma del Acuerdo de Licencia de Colaborador (CLA)](#cla) -## Code of Conduct +## Código de conducta -Help us keep Angular open and inclusive. -Please read and follow our [Code of Conduct][coc]. +Ayúdanos a mantener Angular abierto e inclusivo. +Por favor lee y sigue nuestro [Código de conducta][coc]. -## Got a Question or Problem? +## ¿Tienes alguna pregunta o problema? -Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests. -Instead, we recommend using [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) to ask support-related questions. When creating a new question on Stack Overflow, make sure to add the `angular` tag. +No abras *issues* para preguntas de soporte general ya que queremos mantener los *issues* de GitHub para reporte de *bugs* y solicitud de funcionalidades. +En su lugar, recomendamos utilizar [Stack Overflow](https://stackoverflow.com/questions/tagged/angular) para hacer preguntas relacionadas con soporte. Al crear una nueva pregunta en Stack Overflow, asegúrate de agregar el etiqueta (tag) de `angular`. -Stack Overflow is a much better place to ask questions since: +Stack Overflow es mucho mejor para hacer preguntas ya que: -- there are thousands of people willing to help on Stack Overflow -- questions and answers stay available for public viewing so your question/answer might help someone else -- Stack Overflow's voting system assures that the best answers are prominently visible. +- Hay miles de personas dispuestas a ayudar en preguntas y respuestas de Stack Overflow +que permanecen disponibles para el público, por lo que tu pregunta o respuesta podría ayudar a otra persona. +- El sistema de votación de Stack Overflow asegura que las mejores respuestas sobresalgan y sean visibles. -To save your and our time, we will systematically close all issues that are requests for general support and redirect people to Stack Overflow. +Para ahorrar tu tiempo y el nuestro, cerraremos sistemáticamente todos los *issues* que sean solicitudes de soporte general y redirigiremos a las personas a Stack Overflow. -If you would like to chat about the question in real-time, you can reach out via [our gitter channel][gitter]. +Si deseas chatear sobre alguna pregunta en tiempo real, puedes hacerlo a través de nuestro [canal de Gitter][gitter]. -## Found a Bug? +## ¿Encontraste un Bug? -If you find a bug in the source code, you can help us by [submitting an issue](#submit-issue) to our [GitHub Repository][github]. -Even better, you can [submit a Pull Request](#submit-pr) with a fix. +Si encontraste un error en el código fuente, puedes ayudarnos [creando un *issue*](#submit-issue) en nuestro [repositorio de GitHub][github]. +O incluso mejor, puedes [crear un *Pull Request*](#submit-pr) con la solución. -## Missing a Feature? -You can *request* a new feature by [submitting an issue](#submit-issue) to our GitHub Repository. -If you would like to *implement* a new feature, please consider the size of the change in order to determine the right steps to proceed: +## ¿Falta alguna funcionalidad? +Puedes solicitar una nueva funcionalidad [creando un *issue*](#submit-issue) en nuestro repositorio de GitHub. +Si deseas implementar una nueva funcionalidad, por favor considera el tamaño del cambio para determinar los pasos correctos para continuar: -* For a **Major Feature**, first open an issue and outline your proposal so that it can be discussed. - This process allows us to better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project. +* Para un **cambio significativo**, primero abre un *issue* y describe tu propuesta para que pueda ser discutida. + Este proceso nos permite coordinar mejor nuestros esfuerzos, evitar trabajo duplicado y ayudarte a diseñar el cambio para que sea aceptado con éxito en el proyecto. - **Note**: Adding a new topic to the documentation, or significantly re-writing a topic, counts as a major feature. + **Nota**: Agregar un nuevo tema a la documentación o reescribir significativamente un tema, también cuenta como *cambio significativo*. -* **Small Features** can be crafted and directly [submitted as a Pull Request](#submit-pr). +* **Cambios pequeños** pueden ser elaborados y directamente [creados como un _pull request_](#submit-pr). -## Submission Guidelines +## Lineamientos para la creación de _issues_ y _pull requests_ -### Submitting an Issue +### Creación de _issues_ -Before you submit an issue, please search the issue tracker, maybe an issue for your problem already exists and the discussion might inform you of workarounds readily available. +Antes de crear un *issue*, por favor busca en el el *issue tracker*, quizá un *issue* para tu problema ya existe y la discusión puede informarte sobre soluciones alternativas disponibles. -We want to fix all the issues as soon as possible, but before fixing a bug we need to reproduce and confirm it. -In order to reproduce bugs, we require that you provide a minimal reproduction. -Having a minimal reproducible scenario gives us a wealth of important information without going back and forth to you with additional questions. +Queremos solucionar todos los problemas lo antes posible, pero antes de corregir un bug necesitamos reproducirlo y confirmarlo. +Para reproducir errores, requerimos que proporciones una reproducción mínima. +Tener un escenario reproducible mínimo nos brinda una gran cantidad de información importante sin tener que ir y venir con preguntas adicionales. -A minimal reproduction allows us to quickly confirm a bug (or point out a coding problem) as well as confirm that we are fixing the right problem. +Una reproducción mínima nos permite confirmar rápidamente un bug (o señalar un problema de código), así también confirmar que estamos solucionando el problema correcto. -We require a minimal reproduction to save maintainers' time and ultimately be able to fix more bugs. -Often, developers find coding problems themselves while preparing a minimal reproduction. -We understand that sometimes it might be hard to extract essential bits of code from a larger codebase but we really need to isolate the problem before we can fix it. +Requerimos una reproducción mínima para ahorrar tiempo a los encargados del mantenimiento y en última instancia, poder corregir más bugs. +A menudo los desarrolladores encuentran problemas de código mientras preparan una reproducción mínima. +Entendemos que a veces puede ser difícil extraer porciones esenciales de código de un código más grande, pero realmente necesitamos aislar el problema antes de poder solucionarlo. -Unfortunately, we are not able to investigate / fix bugs without a minimal reproduction, so if we don't hear back from you, we are going to close an issue that doesn't have enough info to be reproduced. +Desafortunadamente no podemos investigar/corregir errores sin una reproducción mínima, por lo que si no tenemos tu retroalimentación del bug, vamos a cerrar el *issue* ya que no tiene suficiente información para reproducirse. -You can file new issues by selecting from our [new issue templates](https://github.com/angular/angular/issues/new/choose) and filling out the issue template. +Puedes presentar nuevos *issues* seleccionando nuestra [plantilla de _issues_](https://github.com/angular/angular/issues/new/choose) y complentando la plantilla. -### Submitting a Pull Request (PR) +### Creación de un Pull Requests (PR) -Before you submit your Pull Request (PR) consider the following guidelines: +Antes de crear tu Pull Request (PR) considera los siguientes lineamientos: -1. Search [GitHub](https://github.com/angular/angular/pulls) for an open or closed PR that relates to your submission. - You don't want to duplicate existing efforts. +1. Busca en [GitHub](https://github.com/angular/angular/pulls) PRs que estén abiertos o cerrados y que estén relacionados con el que vas a crear. + No deseas duplicar los esfuerzos existentes. -2. Be sure that an issue describes the problem you're fixing, or documents the design for the feature you'd like to add. - Discussing the design upfront helps to ensure that we're ready to accept your work. +2. Asegúrate de que el PR describa el problema que estás solucionando o que documente el diseño de la funcionalidad que deseas agregar. + Discutir el diseño por adelantado ayuda a garantizar que estemos listos para aceptar tu trabajo. -3. Please sign our [Contributor License Agreement (CLA)](#cla) before sending PRs. - We cannot accept code without a signed CLA. - Make sure you author all contributed Git commits with email address associated with your CLA signature. +3. Por favor firma nuestro [Acuerdo de Licencia de Colaborador (CLA)](#cla) antes de crear PRs. + No podemos aceptar el código sin el Acuerdo de Licencia de Colaborador (CLA) firmado. + Asegúrate de crear todas las contribuciones de Git con la dirección de correo electrónico asociada con tu firma del Acuerdo de Licencia de Colaborador (CLA). -4. Fork the angular/angular repo. +4. Haz *fork* del repositorio angular/angular. -5. Make your changes in a new git branch: +5. Haz tus cambios en una nueva rama de Git: ```shell git checkout -b my-fix-branch master ``` -6. Create your patch, **including appropriate test cases**. +6. Crea tu correción, **incluyendo casos de prueba apropiados**. -7. Follow our [Coding Rules](#rules). +7. Sigue nuestras [Reglas de código](#rules). -8. Run the full Angular test suite, as described in the [developer documentation][dev-doc], and ensure that all tests pass. +8. Ejecuta todo el conjunto de pruebas de Angular, tal como está descrito en la [documentación del desarrollador][dev-doc], y asegúrate de que todas las pruebas pasen. -9. Commit your changes using a descriptive commit message that follows our [commit message conventions](#commit). - Adherence to these conventions is necessary because release notes are automatically generated from these messages. +9. Crea un commit de tus cambios utilizando un mensaje de commit descriptivo que siga nuestra [convención para el mensaje de los commits](#commit). + Es necesario cumplir con estas convenciones porque las notas de las versiones se generan automáticamente a partir de estos mensajes. ```shell git commit -a ``` - Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files. + Nota: la opción de la línea de comandos de Git `-a` automaticamente hará "add" y "rm" a los archivos editados. -10. Push your branch to GitHub: +10. Haz push de tu rama a GitHub: ```shell git push origin my-fix-branch ``` -11. In GitHub, send a pull request to `angular:master`. +11. En GitHub, crea un pull request a `angular:master`. - If we ask for changes via code reviews then: + Si solicitamos cambios a través de revisiones de código, sigue las siguientes indicaciones: - * Make the required updates. - * Re-run the Angular test suites to ensure tests are still passing. - * Rebase your branch and force push to your GitHub repository (this will update your Pull Request): + * Haz los cambios requeridos. + * Ejecuta nuevamente el conjunto de pruebas de Angular para asegurar que todas las pruebas aún están pasando. + * Haz rebase de tu rama a la rama master y haz push con la opción `-f` a tu repositorio de Github (esto actualizará tu Pull Request): ```shell git rebase master -i git push -f ``` -That's it! Thank you for your contribution! +¡Es todo! ¡Muchas gracias por tu contribución! -#### After your pull request is merged +#### Después del merge de tu pull request -After your pull request is merged, you can safely delete your branch and pull the changes from the main (upstream) repository: +Después de que se hizo merge de tu pull request, puedes eliminar de forma segura tu rama y hacer pull de los cambios del repositorio principal (upstream): -* Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows: +* Elimina la rama remota en GitHub a través de la interfaz de usuario web de GitHub o en tu línea de comandos de la siguiente manera: ```shell git push origin --delete my-fix-branch ``` -* Check out the master branch: +* Muévete a la rama master: ```shell git checkout master -f ``` -* Delete the local branch: +* Elimina tu rama local: ```shell git branch -D my-fix-branch ``` -* Update your master with the latest upstream version: +* Actualiza tu rama master con la última versión del fork (upstream): ```shell git pull --ff upstream master ``` -## Coding Rules -To ensure consistency throughout the source code, keep these rules in mind as you are working: +## Reglas del código +Para garantizar la coherencia en todo el código fuente, ten en cuenta estas reglas mientras trabajas: -* All features or bug fixes **must be tested** by one or more specs (unit-tests). -* All public API methods **must be documented**. -* We follow [Google's JavaScript Style Guide][js-style-guide], but wrap all code at **100 characters**. +* Todas las funcionalidades o solución de bugs **deben ser probadas** por una o más pruebas (pruebas unitarias). +* Todos los métodos públicos del API **deben ser documentados**. +* Seguimos la [guía de estilo JavaScript de Google][js-style-guide], pero cada línea no debe exceder **100 caracteres**. - An automated formatter is available, see [DEVELOPER.md](docs/DEVELOPER.md#clang-format). + Un formateador automatizado está disponible, revisar [DEVELOPER.md](docs/DEVELOPER.md#clang-format). -## Commit Message Format +## Formato para el mensaje de los commits -*This specification is inspired and supersedes the [AngularJS commit message format][commit-message-format].* +*Esta especificación está inspirada y reemplaza el [Formato de mensaje de commits de AngularJS][commit-message-format].* -We have very precise rules over how our Git commit messages must be formatted. -This format leads to **easier to read commit history**. +Tenemos reglas muy precisas sobre cómo deben formatearse nuestros mensajes de los commits de Git. +Este formato permite tener **un historial de commits más facil de leer**. -Each commit message consists of a **header**, a **body**, and a **footer**. +Cada mensaje de un commit consta del **header**, el **body**, y el **footer**. ```

- + - +

` fields are mandatory, the `()` field is optional. +El `` y `` son obligatorios, el `()` es opcional. -##### Type +##### Tipo -Must be one of the following: +El tipo debe ser uno de los siguientes: -* **build**: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm) -* **ci**: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs) -* **docs**: Documentation only changes -* **feat**: A new feature -* **fix**: A bug fix -* **perf**: A code change that improves performance -* **refactor**: A code change that neither fixes a bug nor adds a feature -* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) -* **test**: Adding missing tests or correcting existing tests +* **build**: cambios que afectan el sistema de compilación o dependencias externas (ejemplos de scopes: gulp, broccoli, npm) +* **ci**: cambios en nuestros archivos y scripts de configuración de CI (ejemplos de scopes: Circle, BrowserStack, SauceLabs) +* **docs**: cambios en la documentación +* **feat**: una nueva funcionalidad +* **fix**: una solución de un bug +* **perf**: un cambio de código que mejora el rendimiento. +* **refactor**: un cambio de código que no corrige ningún error ni agrega ninguna funcionalidad +* **style**: cambios que no afectan el significado del código (espacios en blanco, formato, falta de punto y coma, etc.) +* **test**: se agregan pruebas faltantes o se corrigen pruebas existentes -##### Scope -The scope should be the name of the npm package affected (as perceived by the person reading the changelog generated from commit messages). +##### Alcance +El alcance debe ser el nombre del paquete npm afectado (tal como lo percibe la persona que lee el registro de cambios generado a partir de los mensajes de commit). -The following is the list of supported scopes: +La siguiente es la lista de alcances permitidos: * `animations` * `bazel` @@ -261,80 +261,79 @@ The following is the list of supported scopes: * `upgrade` * `zone.js` -There are currently a few exceptions to the "use package name" rule: +Actualmente hay algunas excepciones a la regla "usar el nombre de paquete": -* `packaging`: used for changes that change the npm package layout in all of our packages, e.g. public path changes, package.json changes done to all packages, d.ts file/format changes, changes to bundles, etc. +* `packaging`: usado para cambios que cambian el diseño de los paquetes de npm en todos nuestros paquetes. Ejemplos: cambios de la ruta públic, package.json cambios hechos a todos los paquetes, cambios a archivos o formatos d.ts, cambios a bundles, etc. -* `changelog`: used for updating the release notes in CHANGELOG.md +* `changelog`: utilizado para actualizar las notas de la versión en CHANGELOG.md -* `dev-infra`: used for dev-infra related changes within the directories /scripts, /tools and /dev-infra +* `dev-infra`: utilizado para cambios relacionados con dev-infra dentro de los directorios /scripts, /tools y /dev-infra -* `docs-infra`: used for docs-app (angular.io) related changes within the /aio directory of the repo +* `docs-infra`: utilizado para cambios relacionados con la documentación (angular.io) dentro del directorio /aio del repositorio -* `migrations`: used for changes to the `ng update` migrations. +* `migrations`: utilizado para los cambios en las migraciones `ng update`. -* `ngcc`: used for changes to the [Angular Compatibility Compiler](./packages/compiler-cli/ngcc/README.md) +* `ngcc`: usado para los cambios del [Compilador de compatibilidad de Angular](./packages/compiler-cli/ngcc/README.md) -* `ve`: used for changes specific to ViewEngine (legacy compiler/renderer). +* `ve`: utilizado para cambios específicos de ViewEngine (legacy compiler/renderer). -* none/empty string: useful for `style`, `test` and `refactor` changes that are done across all packages (e.g. `style: add missing semicolons`) and for docs changes that are not related to a specific package (e.g. `docs: fix typo in tutorial`). +* alcance vacío: útil para cambios de `style`, `test` y `refactor` que se realizan en todos los paquetes (ejemplo: `style: add missing semicolons`) y para cambios de la documentación que no están relacionados a un paquete en específico(ejemplo: `docs: corrige error gramatical en el tutorial`). -##### Summary +##### Resumen -Use the summary field to provide a succinct description of the change: +Usa el campo resumen para proporcionar una descripción breve del cambio: -* use the imperative, present tense: "change" not "changed" nor "changes" -* don't capitalize the first letter -* no dot (.) at the end +* usa el modo imperativo, tiempo presente: "cambia" no "cambió" o "cambios" +* no debe de contener ninguna letra mayúscula +* no debe de conter punto (.) al final -#### Commit Message Body +#### Mensaje del cuerpo del commit -Just as in the summary, use the imperative, present tense: "fix" not "fixed" nor "fixes". +Tal como en el resumen, usa el modo imperativo, tiempo presente: "cambia" no "cambió" o "cambios". -Explain the motivation for the change in the commit message body. This commit message should explain _why_ you are making the change. -You can include a comparison of the previous behavior with the new behavior in order to illustrate the impact of the change. +Explica la razón del cambio en el el mensaje del cuerpo del commit. Este mensaje de confirmación debe explicar _por qué_ está realizando el cambio. +Puedes incluir una comparación del comportamiento anterior con el nuevo comportamiento para ilustrar el impacto del cambio. -#### Commit Message Footer +#### Mensaje del footer del commit -The footer can contain information about breaking changes and is also the place to reference GitHub issues, Jira tickets, and other PRs that this commit closes or is related to. +El footer puede contener información sobre cambios significativos y también es el lugar para hacer referencia a issues de GitHub, tickets de Jira y otros PRs que están relacionados con el commit. ``` -BREAKING CHANGE: - - - - -Fixes # +CAMBIO SIGNIFICATIVO: + + + + +Soluciona # ``` -Breaking Change section should start with the phrase "BREAKING CHANGE: " followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions. +La sección de cambios significativos debería comenzar con la frase "CAMBIO SIGNIFICATIVO: " seguido de un resumen del cambio significativo, una línea en blanco y una descripción detallada del cambio significativo que también incluya instrucciones de migración. -### Revert commits +### Revirtiendo commits -If the commit reverts a previous commit, it should begin with `revert: `, followed by the header of the reverted commit. +Si el commit revierte un commit previo, el commit debería comenzar con `revert: `, seguido por el header del commit revertido. -The content of the commit message body should contain: +El contenido del mensaje del commit debería contener: -- information about the SHA of the commit being reverted in the following format: `This reverts commit `, -- a clear description of the reason for reverting the commit message. +- Información sobre el SHA del commit que se revierte en el siguiente formato: `Esto revierte el commit `, +- Una descripción clara de la razón para revertir el mensaje del _commit_. -## Signing the CLA +## Firma del Acuerdo de Licencia de Colaborador (CLA) -Please sign our Contributor License Agreement (CLA) before sending pull requests. For any code -changes to be accepted, the CLA must be signed. It's a quick process, we promise! +Por favor firma nuestro Acuerdo de Licencia de Colaborador (CLA) antes de crear _pull requests_. Para que cualquier cambio de código sea aceptado, el Acuerdo de Licencia de Colaborador (CLA) debe ser firmado. ¡Es un proceso rápido, lo prometemos! -* For individuals, we have a [simple click-through form][individual-cla]. -* For corporations, we'll need you to - [print, sign and one of scan+email, fax or mail the form][corporate-cla]. +* Para las personas, tenemos un [formulario simple][individual-cla]. +* Para corporaciones, necesitaremos que + [impriman, firmen, escaneen y envíen por email, fax o correo el formulario][corporate-cla]. -If you have more than one GitHub accounts, or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests. +Si tiene más de una cuenta de GitHub o varias direcciones de correo electrónico asociadas con una sola cuenta de GitHub, debes firmar el CLA utilizando la dirección de correo electrónico principal de la cuenta de GitHub utilizada para crear los commits de Git y la creación de PRs. -The following documents can help you sort out issues with GitHub accounts and multiple email addresses: +Los siguientes documentos pueden ayudarte a resolver problemas con cuentas de GitHub y múltiples direcciones de correo electrónico: * https://help.github.com/articles/setting-your-commit-email-address-in-git/ * https://stackoverflow.com/questions/37245303/what-does-usera-committed-with-userb-13-days-ago-on-github-mean From 8b97de61f53526c02caedbf521ab05e82a5c42a8 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Sat, 15 Aug 2020 20:46:39 -0400 Subject: [PATCH 124/253] fix(dev-infra): add an upstream commit message type - don't require a commit body for it --- .ng-dev/commit-message.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.ng-dev/commit-message.ts b/.ng-dev/commit-message.ts index 5e2215509149..25033dd70403 100644 --- a/.ng-dev/commit-message.ts +++ b/.ng-dev/commit-message.ts @@ -6,7 +6,7 @@ import {CommitMessageConfig} from '../dev-infra/commit-message/config'; export const commitMessage: CommitMessageConfig = { maxLineLength: 120, minBodyLength: 20, - minBodyLengthTypeExcludes: ['docs'], + minBodyLengthTypeExcludes: ['docs', 'upstream'], types: [ 'build', 'ci', @@ -18,6 +18,7 @@ export const commitMessage: CommitMessageConfig = { 'release', 'style', 'test', + 'upstream', ], scopes: [ 'animations', From a198e2984ce336d09457de5848d6894d7053aa18 Mon Sep 17 00:00:00 2001 From: Alejandro Lora Date: Sun, 16 Aug 2020 03:58:19 +0200 Subject: [PATCH 125/253] docs: translate comparing-observables.md (#57) * docs: keep the english version of comparing-observables.md file as *.en.md file --- aio/content/guide/comparing-observables.en.md | 318 ++++++++++++++++++ aio/content/guide/comparing-observables.md | 59 ++-- 2 files changed, 347 insertions(+), 30 deletions(-) create mode 100644 aio/content/guide/comparing-observables.en.md diff --git a/aio/content/guide/comparing-observables.en.md b/aio/content/guide/comparing-observables.en.md new file mode 100644 index 000000000000..c3402b1644bb --- /dev/null +++ b/aio/content/guide/comparing-observables.en.md @@ -0,0 +1,318 @@ +# Observables compared to other techniques + +You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays. + +Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences. + +## Observables compared to promises + +Observables are often compared to promises. Here are some key differences: + +* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result. + +* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time. + +* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed. + +* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling. + + +### Creation and subscription + +* Observables are not executed until a consumer subscribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values. + + + + +* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation. + + + + +### Chaining + +* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values. + + + + +* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map). + + + + +### Cancellation + +* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work. + + + + +* Promises are not cancellable. + +### Error handling + +* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable. + + + + +* Promises push errors to the child promises. + + + + +### Cheat sheet + +The following code snippets illustrate how the same kind of operation is defined using observables and promises. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Operation	Observable	Promise
Creation	+ +new Observable((observer) => { + observer.next(123); +}); +	+ +new Promise((resolve, reject) => { + resolve(123); +}); +
Transform	obs.pipe(map((value) => value * 2));	promise.then((value) => value * 2);
Subscribe	+ +sub = obs.subscribe((value) => { + console.log(value) +}); +	+ +promise.then((value) => { + console.log(value); +}); +
Unsubscribe	sub.unsubscribe();	Implied by promise resolution.

+ +## Observables compared to events API + +Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler. + +Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests. + +Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API. + + + + + + + + + + + + + + + + + + + + + + +

	Observable	Events API
Creation & cancellation	+ // Setup +let clicks$ = fromEvent(buttonEl, ‘click’); +// Begin listening +let subscription = clicks$ + .subscribe(e => console.log(‘Clicked’, e)) +// Stop listening +subscription.unsubscribe(); +	+ function handler(e) { + console.log(‘Clicked’, e); +} +// Setup & begin listening +button.addEventListener(‘click’, handler); +// Stop listening +button.removeEventListener(‘click’, handler); + +
Subscription	+ observable.subscribe(() => { + // notification handlers here +}); +	+ element.addEventListener(eventName, (event) => { + // notification handler here +}); +
Configuration	Listen for keystrokes, but provide a stream representing the value in the input. + fromEvent(inputEl, 'keydown').pipe( + map(e => e.target.value) +); +	Does not support configuration. + element.addEventListener(eventName, (event) => { + // Cannot change the passed Event into another + // value before it gets to the handler +}); +

Observable

Events API

Creation & cancellation

// Setup
+let clicks$ = fromEvent(buttonEl, ‘click’);
+// Begin listening
+let subscription = clicks$
+  .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();

function handler(e) {
+  console.log(‘Clicked’, e);
+}
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);
+

Subscription

observable.subscribe(() => {
+  // notification handlers here
+});

element.addEventListener(eventName, (event) => {
+  // notification handler here
+});

Configuration

Listen for keystrokes, but provide a stream representing the value in the input. +

fromEvent(inputEl, 'keydown').pipe(
+  map(e => e.target.value)
+);

Does not support configuration. +

element.addEventListener(eventName, (event) => {
+  // Cannot change the passed Event into another
+  // value before it gets to the handler
+});

+ + +## Observables compared to arrays + +An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

	Observable	Array
Given	+ obs: ➞1➞2➞3➞5➞7 + obsB: ➞'a'➞'b'➞'c' +	+ arr: [1, 2, 3, 5, 7] + arrB: ['a', 'b', 'c'] +
concat()	+ concat(obs, obsB) + ➞1➞2➞3➞5➞7➞'a'➞'b'➞'c' +	+ arr.concat(arrB) + [1,2,3,5,7,'a','b','c'] +
filter()	+ obs.pipe(filter((v) => v>3)) + ➞5➞7 +	+ arr.filter((v) => v>3) + [5, 7] +
find()	+ obs.pipe(find((v) => v>3)) + ➞5 +	+ arr.find((v) => v>3) + 5 +
findIndex()	+ obs.pipe(findIndex((v) => v>3)) + ➞3 +	+ arr.findIndex((v) => v>3) + 3 +
forEach()	+ obs.pipe(tap((v) => { + console.log(v); +})) +1 +2 +3 +5 +7 +	+ arr.forEach((v) => { + console.log(v); +}) +1 +2 +3 +5 +7 +
map()	+ obs.pipe(map((v) => -v)) + ➞-1➞-2➞-3➞-5➞-7 +	+ arr.map((v) => -v) + [-1, -2, -3, -5, -7] +
reduce()	+ obs.pipe(reduce((s,v)=> s+v, 0)) + ➞18 +	+ arr.reduce((s,v) => s+v, 0) + 18 +

Observable

Array

Given

obs: ➞1➞2➞3➞5➞7

obsB: ➞'a'➞'b'➞'c'

arr: [1, 2, 3, 5, 7]

arrB: ['a', 'b', 'c']

concat()

concat(obs, obsB)

➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'

arr.concat(arrB)

[1,2,3,5,7,'a','b','c']

filter()

obs.pipe(filter((v) => v>3))

➞5➞7

arr.filter((v) => v>3)

[5, 7]

find()

obs.pipe(find((v) => v>3))

➞5

arr.find((v) => v>3)

findIndex()

obs.pipe(findIndex((v) => v>3))

➞3

arr.findIndex((v) => v>3)

forEach()

obs.pipe(tap((v) => {
+  console.log(v);
+}))
+1
+2
+3
+5
+7

arr.forEach((v) => {
+  console.log(v);
+})
+1
+2
+3
+5
+7

map()

obs.pipe(map((v) => -v))

➞-1➞-2➞-3➞-5➞-7

arr.map((v) => -v)

[-1, -2, -3, -5, -7]

reduce()

obs.pipe(reduce((s,v)=> s+v, 0))

➞18

arr.reduce((s,v) => s+v, 0)

diff --git a/aio/content/guide/comparing-observables.md b/aio/content/guide/comparing-observables.md index 7dd191ba955c..1a748de76747 100644 --- a/aio/content/guide/comparing-observables.md +++ b/aio/content/guide/comparing-observables.md @@ -1,25 +1,24 @@ -# Observables compared to other techniques +# Observables en comparación con otras técnicas -You can often use observables instead of promises to deliver values asynchronously. Similarly, observables can take the place of event handlers. Finally, because observables deliver multiple values, you can use them where you might otherwise build and operate on arrays. +A menudo puedes usar observables en lugar de promesas para entregar valores de forma asíncrona. Del mismo modo, los observables pueden reemplazar a los controladores de eventos. Finalmente, porque los observables entregan múltiples valores, puedes usarlos donde de otro modo podrías construir y operar con arrays. -Observables behave somewhat differently from the alternative techniques in each of these situations, but offer some significant advantages. Here are detailed comparisons of the differences. +Los observables se comportan de manera algo diferente a las técnicas alternativas en cada una de estas situaciones, pero ofrecen algunas ventajas significativas. Aquí hay comparaciones detalladas de las diferencias. -## Observables compared to promises +## Observables en comparación con promesas -Observables are often compared to promises. Here are some key differences: +Los observables a menudo se comparan con las promesas. Aquí hay algunas diferencias clave: -* Observables are declarative; computation does not start until subscription. Promises execute immediately on creation. This makes observables useful for defining recipes that can be run whenever you need the result. +* Los observables son declarativos; La ejecución no comienza hasta la suscripción. Las promesas se ejecutan inmediatamente después de la creación. Esto hace que los observables sean útiles para definir recetas que se pueden ejecutar cuando necesites el resultado. -* Observables provide many values. Promises provide one. This makes observables useful for getting multiple values over time. +* Los observables proporcionan muchos valores. Las promesas proporcionan un valor. Esto hace que los observables sean útiles para obtener múltiples valores a lo largo del tiempo. -* Observables differentiate between chaining and subscription. Promises only have `.then()` clauses. This makes observables useful for creating complex transformation recipes to be used by other part of the system, without causing the work to be executed. +* Los observables diferencian entre encadenamiento y suscripción. Las promesas solo tienen cláusulas `.then ()`. Esto hace que los observables sean útiles para crear recetas de transformación complejas para ser utilizadas por otra parte del sistema, sin que el trabajo se ejecute. -* Observables `subscribe()` is responsible for handling errors. Promises push errors to the child promises. This makes observables useful for centralized and predictable error handling. +* Observables `subscribe()` es responsable de manejar los errores. Las promesas empujan los errores a promesas hijas. Esto hace que los observables sean útiles para el manejo centralizado y predecible de errores. +### Creación y suscripción -### Creation and subscription - -* Observables are not executed until a consumer subscribes. The `subscribe()` executes the defined behavior once, and it can be called again. Each subscription has its own computation. Resubscription causes recomputation of values. +* Los observables no se ejecutan hasta que un consumidor se suscribe. El `subscribe()` ejecuta el comportamiento definido una vez, y se puede volver a llamar. Cada suscripción tiene su propia computación. La resuscripción provoca la recomputación de los valores. -* Promises execute immediately, and just once. The computation of the result is initiated when the promise is created. There is no way to restart work. All `then` clauses (subscriptions) share the same computation. +* Las promesas se ejecutan de inmediato, y solo una vez. La computación del resultado se inicia cuando se crea la promesa. No hay forma de reiniciar el trabajo. Todas las cláusulas `then` (suscripciones) comparten la misma computación. -### Chaining +### Encadenamiento -* Observables differentiate between transformation function such as a map and subscription. Only subscription activates the subscriber function to start computing the values. +* Los observables diferencian entre la función de transformación, como `map` y `subscription`. Solo la suscripción activa la función de suscriptor para comenzar a calcular los valores. -* Promises do not differentiate between the last `.then` clauses (equivalent to subscription) and intermediate `.then` clauses (equivalent to map). +* Las promesas no diferencian entre las últimas cláusulas `.then` (equivalentes al subscription) y las cláusulas intermedias `.then` (equivalentes al map). -### Cancellation +### Cancelación -* Observable subscriptions are cancellable. Unsubscribing removes the listener from receiving further values, and notifies the subscriber function to cancel work. +* Las suscripciones de los observables son cancelables. La cancelación de la suscripción evita que el oyente reciba más valores y notifica a la función del suscriptor que cancele el trabajo. -* Promises are not cancellable. +* Las promesas no son cancelables. -### Error handling +### Manejo de errores -* Observable execution errors are delivered to the subscriber's error handler, and the subscriber automatically unsubscribes from the observable. +* Los errores de ejecución en observables se entregan al controlador de errores del suscriptor, y el suscriptor cancela automáticamente la suscripción del observable. -* Promises push errors to the child promises. +* Las promesas empujan los errores a las promesas hijas. -### Cheat sheet +### Hoja de trucos -The following code snippets illustrate how the same kind of operation is defined using observables and promises. +Los siguientes fragmentos de código ilustran cómo se define el mismo tipo de operación utilizando observables y promesas. @@ -139,13 +138,13 @@ promise.then((value) => {

-## Observables compared to events API +## Observables en comparación con eventos API -Observables are very similar to event handlers that use the events API. Both techniques define notification handlers, and use them to process multiple values delivered over time. Subscribing to an observable is equivalent to adding an event listener. One significant difference is that you can configure an observable to transform an event before passing the event to the handler. +Los observables son muy similares a los controladores de eventos que usan la API de eventos. Ambas técnicas definen manejadores de notificaciones y las utilizan para procesar múltiples valores entregados a lo largo del tiempo. Suscribirse a un observable es equivalente a agregar un detector de eventos. Una diferencia significativa es que puedes configurar un observable para transformar un evento antes de pasar el evento al controlador. -Using observables to handle events and asynchronous operations can have the advantage of greater consistency in contexts such as HTTP requests. +El uso de observables para manejar eventos y operaciones asíncronas puede tener la ventaja de una mayor coherencia en contextos como las solicitudes HTTP. -Here are some code samples that illustrate how the same kind of operation is defined using observables and the events API. +Aquí hay algunos ejemplos de código que ilustran cómo se define el mismo tipo de operación usando observables y la API de eventos. @@ -205,9 +204,9 @@ button.removeEventListener(‘click’, handler);

-## Observables compared to arrays +## Observables en comparación con arrays -An observable produces values over time. An array is created as a static set of values. In a sense, observables are asynchronous where arrays are synchronous. In the following examples, ➞ implies asynchronous value delivery. +Un observable produce valores a lo largo del tiempo. Se crea un array como un conjunto estático de valores. En cierto sentido, los observables son asíncronos mientras que los arrays son síncronos. En los siguientes ejemplos, ➞ implica entrega de valor asíncrono. From 71b1f1ad88b3b52324c0fd3135315bbef1511661 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustavo=20Rodr=C3=ADguez?= <47954465+gustavguez@users.noreply.github.com> Date: Sat, 15 Aug 2020 23:53:03 -0300 Subject: [PATCH 126/253] docs: translate guide/glossary.md file to Spanish (#49) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: change angular to Angular * docs: change Consultá to consulta * docs: change CLI Angular to Angular CLI * docs: fix typo * docs: change puede to puedes * docs: add glossary.en.md file Co-authored-by: Michael Prentice --- .../guide/dependency-injection-navtree.md | 2 +- aio/content/guide/file-structure.md | 2 +- aio/content/guide/glossary.en.md | 1090 +++++++++++++++ aio/content/guide/glossary.md | 1169 ++++++++--------- aio/content/guide/i18n.md | 8 +- aio/content/guide/lifecycle-hooks.md | 2 +- aio/content/guide/pipes.md | 2 +- aio/content/start/start-data.md | 2 +- 8 files changed, 1659 insertions(+), 618 deletions(-) create mode 100644 aio/content/guide/glossary.en.md diff --git a/aio/content/guide/dependency-injection-navtree.md b/aio/content/guide/dependency-injection-navtree.md index 076c1e9d728e..36201ebdc814 100644 --- a/aio/content/guide/dependency-injection-navtree.md +++ b/aio/content/guide/dependency-injection-navtree.md @@ -14,7 +14,7 @@ established through the components' [view objects](guide/glossary#view). Each component has a *host view*, and can have additional *embedded views*. An embedded view in component A is the host view of component B, which can in turn have embedded view. -This means that there is a [view hierarchy](guide/glossary#view-hierarchy) for each component, +This means that there is a [view hierarchy](guide/glossary#view-tree) for each component, of which that component's host view is the root. There is an API for navigating *down* the view hierarchy. diff --git a/aio/content/guide/file-structure.md b/aio/content/guide/file-structure.md index 5b63edcb8ee0..e6ebea01673a 100644 --- a/aio/content/guide/file-structure.md +++ b/aio/content/guide/file-structure.md @@ -91,7 +91,7 @@ Angular components, templates, and styles go here. | `src/app/` FILES | PURPOSE | | :-------------------------- | :------------------------------------------| -| `app/app.component.ts` | Defines the logic for the app's root component, named `AppComponent`. The view associated with this root component becomes the root of the [view hierarchy](guide/glossary#view-hierarchy) as you add components and services to your application. | +| `app/app.component.ts` | Defines the logic for the app's root component, named `AppComponent`. The view associated with this root component becomes the root of the [view hierarchy](guide/glossary#view-tree) as you add components and services to your application. | | `app/app.component.html` | Defines the HTML template associated with the root `AppComponent`. | | `app/app.component.css` | Defines the base CSS stylesheet for the root `AppComponent`. | | `app/app.component.spec.ts` | Defines a unit test for the root `AppComponent`. | diff --git a/aio/content/guide/glossary.en.md b/aio/content/guide/glossary.en.md new file mode 100644 index 000000000000..0e52b01c98bd --- /dev/null +++ b/aio/content/guide/glossary.en.md @@ -0,0 +1,1090 @@ +# Glossary + +Angular has its own vocabulary. +Most Angular terms are common English words or computing terms +that have a specific meaning within the Angular system. + +This glossary lists the most prominent terms +and a few less familiar ones with unusual or +unexpected definitions. + +[A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I) +[J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R) +[S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z) + + +{@a A} +{@a aot} + + +## ahead-of-time (AOT) compilation + +The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code +into efficient JavaScript code during the build phase, before the browser downloads +and runs that code. +This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](#jit). + +By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle. + +{@a angular-element} + +## Angular element + +An Angular [component](#component) packaged as a [custom element](#custom-element). + +Learn more in [Angular Elements Overview](guide/elements). + +{@a annotation} + +## annotation + +A structure that provides metadata for a class. See [decorator](#decorator). + +{@a app-shell} + +## app-shell + +App shell is a way to render a portion of your application via a route at build time. +This gives users a meaningful first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. + +Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell). + +You can use the Angular CLI to [generate](cli/generate#appshell) an app shell. +This can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads. + +See also [Service Worker and PWA](guide/service-worker-intro). +{@a architect} + +## Architect + +The tool that the CLI uses to perform complex tasks such as compilation and test running, according to a provided configuration. +Architect is a shell that runs a [builder](#builder) (defined in an [npm package](#npm-package)) with a given [target configuration](#target). + +In the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), an "architect" section provides configuration options for Architect builders. + +For example, a built-in builder for linting is defined in the package `@angular-devkit/build_angular:tslint`, which uses the [TSLint](https://palantir.github.io/tslint/) tool to perform linting, with a configuration specified in a `tslint.json` file. + +Use the [CLI command `ng run`](cli/run) to invoke a builder by specifying a [target configuration](#target) associated with that builder. +Integrators can add builders to enable tools and workflows to run through the Angular CLI. For example, a custom builder can replace the third-party tools used by the built-in implementations for CLI commands such as `ng build` or `ng test`. + +{@a attribute-directive} + + +{@a attribute-directives} + + +## attribute directives + +A category of [directive](#directive) that can listen to and modify the behavior of +other HTML elements, attributes, properties, and components. They are usually represented +as HTML attributes, hence the name. + +Learn more in [Attribute Directives](guide/attribute-directives). + + +{@a B} + +{@a binding} + +## binding + +Generally, the practice of setting a variable or property to a data value. +Within Angular, typically refers to [data binding](#data-binding), +which coordinates DOM object properties with data object properties. + +Sometimes refers to a [dependency-injection](#dependency-injection) binding +between a [token](#token) and a dependency [provider](#provider). + +{@a bootstrap} + +## bootstrap + +A way to initialize and launch an app or system. + +In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](#component). +During the bootstrap process, Angular creates and inserts these components into the `index.html` host web page. +You can bootstrap multiple apps in the same `index.html`. Each app contains its own components. + +Learn more in [Bootstrapping](guide/bootstrapping). + +{@a builder} + +## builder + +A function that uses the [Architect](#architect) API to perform a complex process such as "build" or "test". +The builder code is defined in an [npm package](#npm-package). + +For example, [BrowserBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/browser) runs a [webpack](https://webpack.js.org/) build for a browser target and [KarmaBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/karma) starts the Karma server and runs a webpack build for unit tests. + +The [CLI command `ng run`](cli/run) invokes a builder with a specific [target configuration](#target). +The [workspace configuration](guide/workspace-config) file, `angular.json`, contains default configurations for built-in builders. + +{@a C} + +{@a case-conventions} +{@a dash-case} +{@a camelcase} +{@a kebab-case} + +## case types + +Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: + +* camelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants. +Standard or lower camel case uses lowercase on the first letter of the item. For example, "selectedHero". + +* UpperCamelCase (or PascalCase): Class names, including classes that define components, interfaces, NgModules, directives, and pipes, +Upper camel case uses uppercase on the first letter of the item. For example, "HeroListComponent". + +* dash-case (or "kebab-case"): Descriptive part of file names, component selectors. For example, "app-hero-list". + +* underscore_case (or "snake_case"): Not typically used in Angular. Snake case uses words connected with underscores. +For example, "convert_link_mode". + +* UPPER_UNDERSCORE_CASE (or UPPER_SNAKE_CASE, or SCREAMING_SNAKE_CASE): Traditional for constants (acceptable, but prefer camelCase). +Upper snake case uses words in all capital letters connected with underscores. For example, "FIX_ME". + +{@a change-detection} + +## change detection + +The mechanism by which the Angular framework synchronizes the state of an application's UI with the state of the data. +The change detector checks the current state of the data model whenever it runs, and maintains it as the previous state to compare on the next iteration. + +As the application logic updates component data, values that are bound to DOM properties in the view can change. +The change detector is responsible for updating the view to reflect the current data model. +Similarly, the user can interact with the UI, causing events that change the state of the data model. +These events can trigger change detection. + +Using the default ("CheckAlways") change-detection strategy, the change detector goes through the [view hierarchy](#view-tree) on each VM turn to check every [data-bound property](#data-binding) in the template. In the first phase, it compares the current state of the dependent data with the previous state, and collects changes. +In the second phase, it updates the page DOM to reflect any new data values. + +If you set the `OnPush` ("CheckOnce") change-detection strategy, the change detector runs only when [explicitly invoked] (api/core/ChangeDetectorRef), or when it is triggered by an `Input` reference change or event handler. This typically improves performance. For more information, see [Optimize Angular's change detection](https://web.dev/faster-angular-change-detection/). + +{@a class-decorator} + +## class decorator + +A [decorator](#decorator) that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type. + +The following decorators can declare Angular class types: +* `@Component()` +* `@Directive()` +* `@Pipe()` +* `@Injectable()` +* `@NgModule()` + + +{@a class-field-decorator} + +## class field decorator + +A [decorator](#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. + +{@a collection} + +## collection + +In Angular, a set of related [schematics](#schematic) collected in an [npm package](#npm-package). + +{@a cli} + +## command-line interface (CLI) + +The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](#workspace) or [project](#project), and to run [schematics](#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment. + +* To begin using the CLI for a new project, see [Local Environment Setup](guide/setup-local "Setting up for Local Development"). +* To learn more about the full capabilities of the CLI, see the [CLI command reference](cli). + +See also [Schematics CLI](#schematics-cli). + +{@a component} + +## component + +A class with the `@Component()` [decorator](#decorator) that associates it with a companion [template](#template). Together, the component class and template define a [view](#view). +A component is a special type of [directive](#directive). +The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features. + +An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](#data-binding). + +Read more about component classes, templates, and views in [Introduction to Angular concepts](guide/architecture). + + +## configuration + +See [workspace configuration](#cli-config) + +{@a content-projection} + +## content projection + +A way to insert DOM content from outside a component into the component's view in a designated spot. + +For more information, see [Responding to changes in content](guide/lifecycle-hooks#content-projection). + +{@a custom-element} + +## custom element + +A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)). + +The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a *web component*) is recognized by a browser when it's added to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). + +You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing. + +See [Angular element](#angular-element). + +See also [dynamic component loading](#dynamic-components). + + +{@a D} + +{@a data-binding} + +## data binding + +A process that allows apps to display data values to a user and respond to user +actions (such as clicks, touches, and keystrokes). + +In data binding, you declare the relationship between an HTML widget and a data source +and let the framework handle the details. +Data binding is an alternative to manually pushing application data values into HTML, attaching +event listeners, pulling changed values from the screen, and +updating application data values. + +Read about the following forms of binding in Angular's [Template Syntax](guide/template-syntax): + + * [Interpolation](guide/interpolation) + * [Property binding](guide/property-binding) + * [Event binding](guide/event-binding) + * [Attribute binding](guide/attribute-binding) + * [Class binding](guide/attribute-binding#class-binding) + * [Style binding](guide/attribute-binding#style-binding) + * [Two-way data binding with ngModel](guide/built-in-directives#ngModel) + +{@a declarable} + +## declarable + +A class type that you can add to the `declarations` list of an [NgModule](#ngmodule). +You can declare [components](#component), [directives](#directive), and [pipes](#pipe). + +Don't declare the following: +* A class that's already declared in another NgModule +* An array of directives imported from another package. For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` +* NgModule classes +* Service classes +* Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes + + +{@a decorator} + +{@a decoration} + +## decorator | decoration + +A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators). +TypeScript adds support for decorators. + +Angular defines decorators that attach metadata to classes or properties +so that it knows what those classes or properties mean and how they should work. + +See [class decorator](#class-decorator), [class field decorator](#class-field-decorator). + +{@a di} + +{@a dependency-injection} + +## dependency injection (DI) + +A design pattern and mechanism for creating and delivering some parts of an application (dependencies) to other parts of an application that require them. + +In Angular, dependencies are typically services, but they also can be values, such as strings or functions. +An [injector](#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](#provider) of the service or value. + +Learn more in [Dependency Injection in Angular](guide/dependency-injection). + +{@a di-token} + +## DI token + +A lookup token associated with a dependency [provider](#provider), for use with the [dependency injection](#di) system. + +{@a differential-loading} + +## differential loading + +A build technique that creates two bundles for an application. One smaller bundle is for modern browsers. A second, larger bundle allows the application to run correctly in older browsers (such as IE11) that do not support all modern browser APIs. + +For more information, see the [Deployment](guide/deployment#differential-loading) guide. + + +{@a directive} +{@a directives} + +## directive + +A class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a `@Directive()` [decorator](#decorator) that supplies metadata. + +A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML [template](#template), it creates the matching directive class instance and gives the instance control over that portion of the browser DOM. + +There are three categories of directive: +* [Components](#component) use `@Component()` (an extension of `@Directive()`) to associate a template with a class. + +* [Attribute directives](#attribute-directive) modify behavior and appearance of page elements. + +* [Structural directives](#structural-directive) modify the structure of the DOM. + +Angular supplies a number of built-in directives that begin with the `ng` prefix. +You can also create new directives to implement your own functionality. +You associate a *selector* (an HTML tag such as ``) with a custom directive, thereby extending the [template syntax](guide/template-syntax) that you can use in your apps. + +{@a dom} + +## domain-specific language (DSL) + +A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language). +Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router). + +{@a dynamic-components} + +## dynamic component loading + +A technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM. + +See also [custom element](#custom-element), which provides an easier path with the same result. + + +{@a E} + +{@a eager-loading} + +## eager loading + +NgModules or components that are loaded on launch are called eager-loaded, to distinguish them from those +that are loaded at run time (lazy-loaded). +See [lazy loading](#lazy-load). + + +{@a ecma} + +## ECMAScript + +The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript). + +Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](#transpile) (like [TypeScript](#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers. + +To learn more, see [Browser Support](guide/browser-support). + + +{@a element} + +## element + +Angular defines an `ElementRef` class to wrap render-specific native UI elements. +In most cases, this allows you to use Angular templates and data binding to access DOM elements +without reference to the native element. + +The documentation generally refers to *elements* (`ElementRef` instances), as distinct from *DOM elements* +(which can be accessed directly if necessary). + +Compare to [custom element](#custom-element). + +{@a entry-point} + +## entry point + +A [JavaScript module](#module) that is intended to be imported by a user of [an +npm package](guide/npm-packages). An entry-point module typically re-exports +symbols from other internal modules. A package can contain multiple +entry points. For example, the `@angular/core` package has two entry-point +modules, which can be imported using the module names `@angular/core` and +`@angular/core/testing`. + +{@a F} + +{@a form-control} + +## form control + +A instance of `FormControl`, which is a fundamental building block for Angular forms. Together with `FormGroup` and `FormArray`, tracks the value, validation, and status of a form input element. + +Read more forms in the [Introduction to forms in Angular](guide/forms-overview). + +{@a form-model} + +## form model + +The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](#template-driven-forms), the form model is implicitly created by directives. + +Learn more about reactive and template-driven forms in the [Introduction to forms in Angular](guide/forms-overview). + +{@a form-validation} + +## form validation + +A check that runs when form values change and reports whether the given values are correct and complete, according to the defined constraints. Reactive forms apply [validator functions](guide/form-validation#adding-to-reactive-forms). Template-driven forms use [validator directives](guide/form-validation#adding-to-template-driven-forms). + + +To learn more, see [Form Validation](guide/form-validation). + +{@a G} + + +{@a H} + +{@a I} + + +{@a immutability} + +## immutability + +The ability to alter the state of a value after its creation. [Reactive forms](#reactive-forms) perform immutable changes in that +each change to the data model produces a new data model rather than modifying the existing one. [Template-driven forms](#template-driven-forms) perform mutable changes with `NgModel` and [two-way data binding](#data-binding) to modify the existing data model in place. + +{@a injectable} + +## injectable + +An Angular class or other definition that provides a dependency using the [dependency injection](#di) mechanism. An injectable [service](#service) class must be marked by the `@Injectable()` [decorator](#decorator). Other items, such as constant values, can also be injectable. + +{@a injector} + +## injector + +An object in the Angular [dependency-injection](#dependency-injection) system +that can find a named dependency in its cache or create a dependency +using a configured [provider](#provider). +Injectors are created for NgModules automatically as part of the bootstrap process +and are inherited through the component hierarchy. + +* An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components. + +* A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components. + +* You can configure injectors with different providers that can provide different implementations of the same dependency. + +Learn more about the injector hierarchy in [Hierarchical Dependency Injectors](guide/hierarchical-dependency-injection). + +{@a input} + +## input + +When defining a [directive](#directive), the `@Input()` decorator on a directive property +makes that property available as a *target* of a [property binding](guide/property-binding). +Data values flow into an input property from the data source identified +in the [template expression](#template-expression) to the right of the equal sign. + +To learn more, see [input and output properties](guide/inputs-outputs). + +{@a interpolation} + +## interpolation + +A form of property [data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text. +That text can be concatenated with neighboring text before it is assigned to an element property +or displayed between element tags, as in this example. + +```html +My current hero is {{hero.name}} +``` + + +Read more in the [Interpolation](guide/interpolation) guide. + +{@a ivy} + +## Ivy + +Ivy is the code name for Angular's [next-generation compilation and rendering pipeline](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7). +With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as [View Engine](#ve). + +See [Angular Ivy](guide/ivy). + + +{@a J} + +{@a javascript} + +## JavaScript + +See [ECMAScript](#ecma), [TypeScript](#typescript). + + +{@a jit} + + +## just-in-time (JIT) compilation + +The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into +efficient JavaScript code at run time, as part of bootstrapping. + +JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. +JIT mode is strongly discouraged for production use +because it results in large application payloads that hinder the bootstrap performance. + +Compare to [ahead-of-time (AOT) compilation](#aot). + + +{@a K} + + +{@a L} + +{@a lazy-load} + +## lazy loading + +A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand. +For example, dependencies can be lazy loaded as needed—as opposed to [eager-loaded](#eager-loading) modules that are required by the root module and are thus loaded on launch. + +The [router](#router) makes use of lazy loading to load child views only when the parent view is activated. +Similarly, you can build custom elements that can be loaded into an Angular app when needed. + +{@a library} + +## library + +In Angular, a [project](#project) that provides functionality that can be included in other Angular apps. +A library isn't a complete Angular app and can't run independently. +(To add re-usable Angular functionality to non-Angular web apps, you can use Angular [custom elements](#angular-element).) + +* Library developers can use the [Angular CLI](#cli) to `generate` scaffolding for a new library in an existing [workspace](#workspace), and can publish a library as an `npm` package. + +* Application developers can use the [Angular CLI](#cli) to `add` a published library for use with an application in the same [workspace](#workspace). + +See also [schematic](#schematic). + +{@a lifecycle-hook} + +## lifecycle hook + +An interface that allows you to tap into the lifecycle of [directives](#directive) and [components](#component) as they are created, updated, and destroyed. + +Each interface has a single hook method whose name is the interface name prefixed with `ng`. +For example, the `OnInit` interface has a hook method named `ngOnInit`. + +Angular calls these hook methods in the following order: + +* `ngOnChanges`: When an [input](#input)/[output](#output) binding value changes. +* `ngOnInit`: After the first `ngOnChanges`. +* `ngDoCheck`: Developer's custom change detection. +* `ngAfterContentInit`: After component content initialized. +* `ngAfterContentChecked`: After every check of component content. +* `ngAfterViewInit`: After a component's views are initialized. +* `ngAfterViewChecked`: After every check of a component's views. +* `ngOnDestroy`: Just before the directive is destroyed. + +To learn more, see [Lifecycle Hooks](guide/lifecycle-hooks). + +{@a M} + +{@a module} + +## module + +In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. + +In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules. + +Angular ships as a collection of JavaScript modules (also called libraries). Each Angular library name begins with the `@angular` prefix. Install Angular libraries with the [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) and import parts of them with JavaScript `import` declarations. + +Compare to [NgModule](#ngmodule). + + +{@a N} + +{@a ngcc} + +## ngcc + +Angular compatibility compiler. +If you build your app using [Ivy](#ivy), but it depends on libraries that have not been compiled with Ivy, the CLI uses `ngcc` to automatically update the dependent libraries to use Ivy. + + +{@a ngmodule} + +## NgModule + +A class definition preceded by the `@NgModule()` [decorator](#decorator), which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. + +Like a [JavaScript module](#module), an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules. +The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also [declarable](#declarable). + +NgModules are typically named after the file in which the exported thing is defined. For example, the Angular [DatePipe](api/common/DatePipe) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. You import them from an Angular [scoped package](#scoped-package) such as `@angular/core`. + +Every Angular application has a root module. By convention, the class is called `AppModule` and resides in a file named `app.module.ts`. + +To learn more, see [NgModules](guide/ngmodules). + +{@a npm-package} + +## npm package + +The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. + +Learn more about how Angular uses [Npm Packages](guide/npm-packages). + +{@a O} + +{@a observable} + +## observable + +A producer of multiple values, which it pushes to [subscribers](#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion. + +Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion. + +Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). + +To learn more, see [Observables](guide/observables). + + +{@a observer} + +## observer + +An object passed to the `subscribe()` method for an [observable](#observable). The object defines the callbacks for the [subscriber](#subscriber). + +{@a output} + +## output + +When defining a [directive](#directive), the `@Output{}` decorator on a directive property +makes that property available as a *target* of [event binding](guide/event-binding). +Events stream *out* of this property to the receiver identified +in the [template expression](#template-expression) to the right of the equal sign. + +To learn more, see [Input and Output Properties](guide/inputs-outputs). + + +{@a P} + +{@a pipe} + +## pipe + +A class which is preceded by the `@Pipe{}` decorator and which defines a function that transforms input values to output values for display in a [view](#view). Angular defines various pipes, and you can define new pipes. + +To learn more, see [Pipes](guide/pipes). + +{@a platform} + +## platform + +In Angular terminology, a platform is the context in which an Angular application runs. +The most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server. + +Support for the various Angular run-time platforms is provided by the `@angular/platform-*` packages. These packages allow applications that make use of `@angular/core` and `@angular/common` to execute in different environments by providing implementation for gathering user input and rendering UIs for the given platform. Isolating platform-specific functionality allows the developer to make platform-independent use of the rest of the framework. + +* When running in a web browser, [`BrowserModule`](api/platform-browser/BrowserModule) is imported from the `platform-browser` package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service. + +* When [server-side rendering](#server-side-rendering) (SSR) is used, the [`platform-server`](api/platform-server) package provides web server implementations of the `DOM`, `XMLHttpRequest`, and other low-level features that don't rely on a browser. + +{@a polyfill} + +## polyfill + +An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. +See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms. + +{@a project} + +## project + +In the Angular CLI, a standalone application or [library](#library) that can be created or modified by a CLI command. + +A project, as generated by the [`ng new`](cli/new), contains the set of source files, resources, and configuration files that you need to develop and test the application using the CLI. Projects can also be created with the `ng generate application` and `ng generate library` commands. + +For more information, see [Project File Structure](guide/file-structure). + +The [`angular.json`](guide/workspace-config) file configures all projects in a [workspace](#workspace). + +{@a provider} + +## provider + +An object that implements one of the [`Provider`](api/core/Provider) interfaces. A provider object defines how to obtain an injectable dependency associated with a [DI token](#token). +An [injector](#injector) uses the provider to create a new instance of a dependency +for a class that requires it. + +Angular registers its own providers with every injector, for services that Angular defines. +You can register your own providers for services that your app needs. + +See also [service](#service), [dependency injection](#di). + +Learn more in [Dependency Injection](guide/dependency-injection). + + +{@a Q} + +{@a R} + +{@a reactive-forms} + +## reactive forms + +A framework for building Angular forms through code in a component. +The alternative is a [template-driven form](#template-driven-forms). + +When using reactive forms: + +* The "source of truth", the form model, is defined in the component class. +* Validation is set up through validation functions rather than validation directives. +* Each control is explicitly created in the component class by creating a `FormControl` instance manually or with `FormBuilder`. +* The template input elements do *not* use `ngModel`. +* The associated Angular directives are prefixed with `form`, such as `formControl`, `formGroup`, and `formControlName`. + +The alternative is a template-driven form. For an introduction and comparison of both forms approaches, see [Introduction to Angular Forms](guide/forms-overview). + +{@a resolver} + +## resolver + +A class that implements the [Resolve](api/router/Resolve "API reference") interface (or a function with the same signature as the [resolve() method](api/router/Resolve#resolve "API reference")) that you use to produce or retrieve data that is needed before navigation to a requested route can be completed. + +Resolvers run after all [route guards](#route-guard "Definition") for a route tree have been executed and have succeeded. + +See an example of using a [resolve guard](guide/router-tutorial-toh#resolve-guard "Routing techniques tutorial") to retrieve dynamic data. + +{@a route-guard} + +## route guard + +A method that controls navigation to a requested route in a routing application. +Guards determine whether a route can be activated or deactivated, and whether a lazy-loaded module can be loaded. + +Learn more in the [Routing and Navigation](guide/router#preventing-unauthorized-access "Examples") guide. + + +{@a router} +{@a router-module} + +## router + +A tool that configures and implements navigation among states and [views](#view) within an Angular app. + +The `Router` module is an [NgModule](#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](#routing-component) is one that imports the `Router` module and whose template contains a `RouterOutlet` element where it can display views produced by the router. + +The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy loading](#lazy-load) in your Angular apps. + +To learn more, see [Routing and Navigation](guide/router). + +{@a router-outlet} + +## router outlet + +A [directive](#directive) that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state. + +{@a router-component} + +## routing component + +An Angular [component](#component) with a `RouterOutlet` directive in its template that displays views based on router navigations. + +For more information, see [Routing and Navigation](guide/router). + +{@a rule} + +## rule + +In [schematics](#schematic), a function that operates on a [file tree](#file-tree) to create, delete, or modify files in a specific manner. + +{@a S} + +{@a schematic} + +## schematic + +A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. +A schematic defines [rules](#rule) that operate on a virtual file system called a [tree](#file-tree). + +The [Angular CLI](#cli) uses schematics to generate and modify [Angular projects](#project) and parts of projects. + +* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs. + +* [Library](#library) developers can create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines. +Add these schematics to the npm package that you use to publish and share your library. + +For more information, see [Schematics](guide/schematics) and [Integrating Libraries with the CLI](guide/creating-libraries#integrating-with-the-cli). + +{@a schematics-cli} + +## Schematics CLI + +Schematics come with their own command-line tool. +Using Node 6.9 or above, install the Schematics CLI globally: + + +npm install -g @angular-devkit/schematics-cli + + +This installs the `schematics` executable, which you can use to create a new schematics [collection](#collection) with an initial named schematic. The collection folder is a workspace for schematics. You can also use the `schematics` command to add a new schematic to an existing collection, or extend an existing schematic. + +{@a scoped-package} + +## scoped package + +A way to group related [npm packages](guide/npm-packages). +NgModules are delivered within scoped packages whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`. + +Import a scoped package in the same way that you import a normal package. + + + + + +{@a server-side-rendering} + +## server-side rendering + +A technique that generates static application pages on the server, and can generate and serve those pages in response to requests from browsers. +It can also pre-generate pages as HTML files that you serve later. + +This technique can improve performance on mobile and low-powered devices and improve the user experience by showing a static first page quickly while the client-side app is loading. +The static version can also make your app more visible to web crawlers. + +You can easily prepare an app for server-side rendering by using the [CLI](#cli) to run the [Angular Universal](#universal) tool, using the `@nguniversal/express-engine` [schematic](#schematic). + + +{@a service} + +## service + +In Angular, a class with the [@Injectable()](#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application. +Angular distinguishes components from services to increase modularity and reusability. + +The `@Injectable()` metadata allows the service class to be used with the [dependency injection](#di) mechanism. +The injectable class is instantiated by a [provider](#provider). +[Injectors](#injector) maintain lists of providers and use them to provide service instances when they are required by components or other services. + +To learn more, see [Introduction to Services and Dependency Injection](guide/architecture-services). + +{@a structural-directive} +{@a structural-directives} + +## structural directives + +A category of [directive](#directive) that is responsible for shaping HTML layout by modifying the DOM&mdashthat is, adding, removing, or manipulating elements and their children. + +To learn more, see [Structural Directives](guide/structural-directives). + +{@a subscriber} + +## subscriber + +A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](#observable). + +The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a `Subscription` object that lets you unsubscribe. + +The `subscribe()` method takes a JavaScript object (called an [observer](#observer)) with up to three callbacks, one for each type of notification that an observable can deliver: + +* The `next` notification sends a value such as a number, a string, or an object. +* The `error` notification sends a JavaScript Error or exception. +* The `complete` notification doesn't send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes. + +{@a T} + +{@a target} + +## target + +A buildable or runnable subset of a [project](#project), configured as an object in the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), and executed by an [Architect](#architect) [builder](#builder). + +In the `angular.json` file, each project has an "architect" section that contains targets which configure builders. Some of these targets correspond to [CLI commands](#cli), such as `build`, `serve`, `test`, and `lint`. + +For example, the Architect builder invoked by the `ng build` command to compile a project uses a particular build tool, and has a default configuration whose values can be overridden on the command line. The `build` target also defines an alternate configuration for a "production" build, that can be invoked with the `--prod` flag on the `build` command. + +The Architect tool provides a set of builders. The [`ng new` command](cli/new) provides a set of targets for the initial application project. The [`ng generate application`](cli/generate#application) and [`ng generate library`](cli/generate#library) commands provide a set of targets for each new [project](#project). These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a "staging" or "testing" configuration to a project's "build" target. + +You can also define a custom builder, and add a target to the project configuration that uses your custom builder. You can then run the target using the [`ng run`](cli/run) CLI command. + +{@a template} + +## template + +Code that defines how to render a component's [view](#view). + +A template combines straight HTML with Angular [data-binding](#data-binding) syntax, [directives](#directive), +and [template expressions](#template-expression) (logical constructs). +The Angular elements insert or calculate values that modify the HTML elements before the page is displayed. Learn more about Angular template language in the [Template Syntax](guide/template-syntax) guide. + +A template is associated with a [component class](#component) through the `@Component()` [decorator](#decorator). The template code can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property. + +Additional templates, represented by `TemplateRef` objects, can define alternative or *embedded* views, which can be referenced from multiple components. + +{@a template-driven-forms} + +## template-driven forms + +A format for building Angular forms using HTML forms and input elements in the view. +The alternative format uses the [reactive forms](#reactive-forms) framework. + +When using template-driven forms: + +* The "source of truth" is the template. The validation is defined using attributes on the individual input elements. +* [Two-way binding](#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements. +* Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input. +* The associated Angular directives are prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. + +The alternative is a reactive form. For an introduction and comparison of both forms approaches, see [Introduction to Angular Forms](guide/forms-overview). + +{@a template-expression} + +## template expression + +A TypeScript-like syntax that Angular evaluates within a [data binding](#data-binding). + +Read about how to write template expressions in the [template expressions](guide/interpolation#template-expressions) section of the [Interpolation](guide/interpolation) guide. + +{@a token} + +## token + +An opaque identifier used for efficient table lookup. In Angular, a [DI token](#di-token) is used to find [providers](#provider) of dependencies in the [dependency injection](#di) system. + +{@a transpile} + +## transpile + +The translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version. + +{@a file-tree} + +## tree + +In [schematics](#schematic), a virtual file system represented by the `Tree` class. +Schematic [rules](#rule) take a tree object as input, operate on them, and return a new tree object. + +{@a typescript} + +## TypeScript + +A programming language based on JavaScript that is notable for its optional typing system. +TypeScript provides compile-time type checking and strong tooling support (such as +code completion, refactoring, inline documentation, and intelligent search). +Many code editors and IDEs support TypeScript either natively or with plug-ins. + +TypeScript is the preferred language for Angular development. +Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/). + +## TypeScript configuration file + +A file specifies the root files and the compiler options required to compile a TypeScript project. For more information, see [TypeScript configuration](/guide/typescript-configuration). + + +{@a U} + +{@a unidirectional-data-flow} + +## unidirectional data flow + +A data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph. + +In practice, this means that data in Angular flows downward during change detection. +A parent component can easily change values in its child components because the parent is checked first. +A failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered. +In development mode, Angular throws the `ExpressionChangedAfterItHasBeenCheckedError` error if your app attempts to do this, rather than silently failing to render the new value. + +To avoid this error, a [lifecycle hook](guide/lifecycle-hooks) method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value. + +{@a universal} + +## Universal + +A tool for implementing [server-side rendering](#server-side-rendering) of an Angular application. +When integrated with an app, Universal generates and serves static pages on the server in response to requests from browsers. +The initial static page serves as a fast-loading placeholder while the full application is being prepared for normal execution in the browser. + +To learn more, see [Angular Universal: server-side rendering](guide/universal). + +{@a V} + +{@a view} + +## view + +The smallest grouping of display elements that can be created and destroyed together. +Angular renders a view under the control of one or more [directives](#directive). + +A [component](#component) class and its associated [template](#template) define a view. +A view is specifically represented by a `ViewRef` instance associated with a component. +A view that belongs immediately to a component is called a *host view*. +Views are typically collected into [view hierarchies](#view-tree). + +Properties of elements in a view can change dynamically, in response to user actions; +the structure (number and order) of elements in a view can't. +You can change the structure of elements by inserting, moving, or removing nested views within their view containers. + +View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](#router). + +{@a ve} + +## View Engine + +The compilation and rendering pipeline used by Angular before version 9. Compare [Ivy](#ivy). + + +{@a view-tree} + +## view hierarchy + +A tree of related views that can be acted on as a unit. The root view is a component's *host view*. A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular [change detection](#change-detection). + +The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules. + +{@a W} +{@a web-component} + +## web component + +See [custom element](#custom-element). + +{@a workspace} + +## workspace + +A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)). + +The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root"). +In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name. + +Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. + +For more information, see [Workspace Configuration](guide/workspace-config). + +{@a cli-config} + +{@a config} + +## workspace configuration + +A file named `angular.json` at the root level of an Angular [workspace](#workspace) provides workspace-wide and project-specific configuration defaults for build and development tools that are provided by or integrated with the [Angular CLI](#cli). + +For more information, see [Workspace Configuration](guide/workspace-config). + +Additional project-specific configuration files are used by tools, such as `package.json` for the [npm package manager](#npm-package), `tsconfig.json` for [TypeScript transpilation](#transpile), and `tslint.json` for [TSLint](https://palantir.github.io/tslint/). + +For more information, see [Workspace and Project File Structure](guide/file-structure). + +{@a X} + + +{@a Y} + + +{@a Z} +{@a zone} + +## zone + +An execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers. + +An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](#data-binding). + +A zone client can take action before and after an async operation completes. + +Learn more about zones in this +[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). \ No newline at end of file diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md index 27d8d8049f57..49db6edb6a7d 100644 --- a/aio/content/guide/glossary.md +++ b/aio/content/guide/glossary.md @@ -1,943 +1,944 @@ -# Glossary +# Glosario -Angular has its own vocabulary. -Most Angular terms are common English words or computing terms -that have a specific meaning within the Angular system. +Angular tiene su propio vocabulario. La mayoría de los términos en Angular son palabras comunes en inglés o términos informáticos que tienen un significado específico dentro del sistema Angular. -This glossary lists the most prominent terms -and a few less familiar ones with unusual or -unexpected definitions. +Este glosario enumera los términos más destacados y algunos menos familiares con definiciones inusuales o inesperadas. [A](#A) [B](#B) [C](#C) [D](#D) [E](#E) [F](#F) [G](#G) [H](#H) [I](#I) [J](#J) [K](#K) [L](#L) [M](#M) [N](#N) [O](#O) [P](#P) [Q](#Q) [R](#R) [S](#S) [T](#T) [U](#U) [V](#V) [W](#W) [X](#X) [Y](#Y) [Z](#Z) - {@a A} -{@a aot} +{@a annotation} -## ahead-of-time (AOT) compilation +## anotaciones -The Angular ahead-of-time (AOT) compiler converts Angular HTML and TypeScript code -into efficient JavaScript code during the build phase, before the browser downloads -and runs that code. -This is the best compilation mode for production environments, with decreased load time and increased performance compared to [just-in-time (JIT) compilation](#jit). +Una estructura que proporciona metadatos para una clase. Ver [decorador](#decorator). -By compiling your application using the `ngc` command-line tool, you can bootstrap directly to a module factory, so you don't need to include the Angular compiler in your JavaScript bundle. +{@a architect} -{@a angular-element} +## architect -## Angular element +Es una herramienta que utiliza la CLI para realizar tareas complejas, como la compilación y la ejecución de pruebas, de acuerdo con una configuración proporcionada. -An Angular [component](#component) packaged as a [custom element](#custom-element). +El architect es un shell que ejecuta un [constructor](#builder) (definido en un [paquete npm](#npm-package)) con una [configuración de destino] dada (#target). -Learn more in [Angular Elements Overview](guide/elements). +En el [archivo de configuración del espacio de trabajo](guide/workspace-config#project-tool-configuration-options), una sección de "architect" proporciona opciones de configuración para los architects constructores. -{@a annotation} +Por ejemplo, un constructor incorporado para el linting se define en el paquete `@angular-devkit/build_angular: tslint`, que utiliza la herramienta [TSLint](https://palantir.github.io/tslint/) para realizar el linting, con una configuración especificada en un archivo `tslint.json`. -## annotation +Utiliza el [comando CLI `ng run`](cli/run) para invocar a un constructor especificando una [configuración de destino](#target) asociada con ese constructor. +Los integradores pueden agregar constructores para permitir que las herramientas y los flujos de trabajo se ejecuten a través de la Angular CLI. Por ejemplo, un constructor personalizado puede reemplazar las herramientas de terceros utilizadas por las implementaciones integradas para los comandos de la CLI, como `ng build` o `ng test`. -A structure that provides metadata for a class. See [decorator](#decorator). +## archivo de configuración de TypeScript -{@a app-shell} +Un archivo especifica los archivos raíz y las opciones de compilación necesarias para compilar un proyecto TypeScript. Para obtener más información, consulta [Configuración de TypeScript](/guide/typescript-configuration). -## app-shell +{@a B} -App shell is a way to render a portion of your application via a route at build time. -This gives users a meaningful first paint of your application that appears quickly because the browser can render static HTML and CSS without the need to initialize JavaScript. +{@a library} -Learn more in [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell). +## biblioteca -You can use the Angular CLI to [generate](cli/generate#appshell) an app shell. -This can improve the user experience by quickly launching a static rendered page (a skeleton common to all pages) while the browser downloads the full client version and switches to it automatically after the code loads. +En Angular, un [proyecto](#project) que proporciona funcionalidad que se puede incluir en otras aplicaciones de Angular. +Una biblioteca no es una aplicación Angular completa y no puede ejecutarse de forma independiente. +Para agregar funcionalidades reutilizables de Angular a aplicaciones web no construidas con Angular, puedes usar Angular [elementos personalizados](#angular-element).) -See also [Service Worker and PWA](guide/service-worker-intro). -{@a architect} +- Los desarrolladores de bibliotecas pueden usar la [Angular CLI](#cli) para `generar` andamios para una nueva biblioteca en un [espacio de trabajo](#workspace) existente, y pueden publicar una biblioteca como un paquete `npm`. -## Architect +- Los desarrolladores de aplicaciones pueden usar la [Angular CLI](#cli) para `agregar` una biblioteca publicada para usar con una aplicación en el mismo [espacio de trabajo](#workspace). -The tool that the CLI uses to perform complex tasks such as compilation and test running, according to a provided configuration. -Architect is a shell that runs a [builder](#builder) (defined in an [npm package](#npm-package)) with a given [target configuration](#target). +Ver también [esquema](#schematic). -In the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), an "architect" section provides configuration options for Architect builders. +{@a bootstrap} -For example, a built-in builder for linting is defined in the package `@angular-devkit/build_angular:tslint`, which uses the [TSLint](https://palantir.github.io/tslint/) tool to perform linting, with a configuration specified in a `tslint.json` file. +## bootstrap -Use the [CLI command `ng run`](cli/run) to invoke a builder by specifying a [target configuration](#target) associated with that builder. -Integrators can add builders to enable tools and workflows to run through the Angular CLI. For example, a custom builder can replace the third-party tools used by the built-in implementations for CLI commands such as `ng build` or `ng test`. +Una forma de inicializar e iniciar una aplicación o sistema. -{@a attribute-directive} +En Angular, el NgModule raíz de una aplicación (`AppModule`) tiene una propiedad `bootstrap` que identifica los [componentes](#component) de nivel superior de la aplicación. +Durante el proceso de arranque, Angular crea e inserta estos componentes en la página web del host `index.html`. +Puedes arrancar varias aplicaciones en el mismo `index.html`. Cada aplicación contiene sus propios componentes. +Obtén más información en [Bootstrapping](guide/bootstrapping). -{@a attribute-directives} +{@a C} +{@a lazy-load} +{@a lazy-loading} -## attribute directives +## carga diferida -A category of [directive](#directive) that can listen to and modify the behavior of -other HTML elements, attributes, properties, and components. They are usually represented -as HTML attributes, hence the name. +Un proceso que acelera el tiempo de carga de la aplicación al dividir la aplicación en múltiples paquetes y cargarlos bajo demanda. +Por ejemplo, las dependencias pueden cargarse de forma diferida según sea necesario en lugar de los módulos [eager-loaded](#eager-loading) que requiere el módulo raíz y, por lo tanto, se cargan en el inicio. -Learn more in [Attribute Directives](guide/attribute-directives). +El [enrutador](#router) utiliza la carga diferida para cargar vistas secundarias solo cuando la vista principal está activada. +Del mismo modo, puede crear elementos personalizados que se pueden cargar en una aplicación Angular cuando sea necesario. +{@a differential-loading} -{@a B} +## carga diferencial -{@a binding} +Una técnica de compilación que crea dos paquetes para una aplicación. Un paquete más pequeño es para navegadores modernos. Un segundo paquete más grande permite que la aplicación se ejecute correctamente en navegadores más antiguos (como IE11) que no son compatibles con todas las API de navegador modernas. -## binding +Obtén más información en la guía de [Implementación](guide/deployment#differential-loading). -Generally, the practice of setting a variable or property to a data value. -Within Angular, typically refers to [data binding](#data-binding), -which coordinates DOM object properties with data object properties. +{@a dynamic-components} -Sometimes refers to a [dependency-injection](#dependency-injection) binding -between a [token](#token) and a dependency [provider](#provider). +## carga dinámica de componentes -{@a bootstrap} +Una técnica para agregar un componente al DOM en tiempo de ejecución. Requiere que excluya el componente de la compilación y luego lo conecte al marco de detección de cambios y manejo de eventos de Angular cuando lo agrega al DOM. -## bootstrap +Consulta también [elemento personalizado](#custom-element), que proporciona una ruta más fácil con el mismo resultado. -A way to initialize and launch an app or system. +{@a eager-loading} -In Angular, an app's root NgModule (`AppModule`) has a `bootstrap` property that identifies the app's top-level [components](#component). -During the bootstrap process, Angular creates and inserts these components into the `index.html` host web page. -You can bootstrap multiple apps in the same `index.html`. Each app contains its own components. +## carga eager -Learn more in [Bootstrapping](guide/bootstrapping). +Los NgModules o componentes que se cargan en el lanzamiento se llaman eager-loaded, para distinguirlos de aquellos que se cargan en tiempo de ejecución (carga diferida). + +Ver [carga diferida](#lazy-load). {@a builder} -## builder +## constructor -A function that uses the [Architect](#architect) API to perform a complex process such as "build" or "test". -The builder code is defined in an [npm package](#npm-package). +Una función que utiliza la API de [Architect](#architect) para realizar un proceso complejo como "compilar" o "probar". +El código del constructor se define en un [paquete npm](#npm-package). -For example, [BrowserBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/browser) runs a [webpack](https://webpack.js.org/) build for a browser target and [KarmaBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/karma) starts the Karma server and runs a webpack build for unit tests. +Por ejemplo, [BrowserBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/browser) ejecuta una compilación de [webpack](https://webpack.js.org/) para un destino de navegador y [KarmaBuilder](https://github.com/angular/angular-cli/tree/master/packages/angular_devkit/build_angular/src/karma) inicia el servidor Karma y ejecuta una compilación de webpack para pruebas unitarias. -The [CLI command `ng run`](cli/run) invokes a builder with a specific [target configuration](#target). -The [workspace configuration](guide/workspace-config) file, `angular.json`, contains default configurations for built-in builders. +El [comando CLI `ng run`](cli/run) invoca un constructor con una [configuración de destino específica](#target). El [archivo de configuración del espacio de trabajo](guide/workspace-config), `angular.json`, contiene configuraciones predeterminadas para los constructores integrados. -{@a C} +{@a aot} -{@a case-conventions} -{@a dash-case} -{@a camelcase} -{@a kebab-case} +## compilación ahead-of-time (AOT) -## case types +La compilación ahead-of-time (AOT) de Angular convierte el código Angular HTML y TypeScript en código JavaScript durante la fase de compilación de una manera eficiente, antes de que el navegador descargue y ejecuta ese código. -Angular uses capitalization conventions to distinguish the names of various types, as described in the [naming guidelines section](guide/styleguide#02-01) of the Style Guide. Here's a summary of the case types: +Este es el mejor modo de compilación para entornos de producción, con un menor tiempo de carga y un mayor rendimiento en comparación con [compilación just-in-time (JIT)](#jit). -* camelCase : Symbols, properties, methods, pipe names, non-component directive selectors, constants. -Standard or lower camel case uses lowercase on the first letter of the item. For example, "selectedHero". +Al compilar su aplicación utilizando la herramienta de línea de comandos `ngc`, puede iniciar directamente a una module factory, por lo que no necesita incluir el compilador Angular en su paquete de JavaScript. -* UpperCamelCase (or PascalCase): Class names, including classes that define components, interfaces, NgModules, directives, and pipes, -Upper camel case uses uppercase on the first letter of the item. For example, "HeroListComponent". +{@a jit} -* dash-case (or "kebab-case"): Descriptive part of file names, component selectors. For example, "app-hero-list". +## compilación just-in-time (JIT) -* underscore_case (or "snake_case"): Not typically used in Angular. Snake case uses words connected with underscores. -For example, "convert_link_mode". +El compilador Angular just-in-time (JIT) convierte su código Angular HTML y TypeScript en código JavaScript eficiente en tiempo de ejecución, como parte del arranque. -* UPPER_UNDERSCORE_CASE (or UPPER_SNAKE_CASE, or SCREAMING_SNAKE_CASE): Traditional for constants (acceptable, but prefer camelCase). -Upper snake case uses words in all capital letters connected with underscores. For example, "FIX_ME". +La compilación JIT es el valor predeterminado (a diferencia de la compilación AOT) cuando ejecuta los comandos CLI `ng build` y`ng serve` de Angular, y es una buena opción durante el desarrollo. +El modo JIT no se recomienda para el uso en producción porque da como resultado grandes cargas útiles de aplicaciones que dificultan el rendimiento de arranque. -{@a change-detection} +Comparar con [compilación ahead-of-time (AOT)](#aot). -## change detection +{@a router-component} + +## componente de enrutamiento -The mechanism by which the Angular framework synchronizes the state of an application's UI with the state of the data. -The change detector checks the current state of the data model whenever it runs, and maintains it as the previous state to compare on the next iteration. +Un [componente](#component) con una directiva `RouterOutlet` en su plantilla que muestra vistas basadas en la navegación del enrutador. -As the application logic updates component data, values that are bound to DOM properties in the view can change. -The change detector is responsible for updating the view to reflect the current data model. -Similarly, the user can interact with the UI, causing events that change the state of the data model. -These events can trigger change detection. +Obtén más información en [Enrutamiento y navegación](guide/router). -Using the default ("CheckAlways") change-detection strategy, the change detector goes through the [view hierarchy](#view-tree) on each VM turn to check every [data-bound property](#data-binding) in the template. In the first phase, it compares the current state of the dependent data with the previous state, and collects changes. -In the second phase, it updates the page DOM to reflect any new data values. +{@a collection} -If you set the `OnPush` ("CheckOnce") change-detection strategy, the change detector runs only when [explicitly invoked] (api/core/ChangeDetectorRef), or when it is triggered by an `Input` reference change or event handler. This typically improves performance. For more information, see [Optimize Angular's change detection](https://web.dev/faster-angular-change-detection/). +## colección -{@a class-decorator} +En Angular, un conjunto de [esquemas](#schematic) relacionados recogidos en un [paquete npm](#npm-package). -## class decorator +{@a component} -A [decorator](#decorator) that appears immediately before a class definition, which declares the class to be of the given type, and provides metadata suitable to the type. +## componente -The following decorators can declare Angular class types: -* `@Component()` -* `@Directive()` -* `@Pipe()` -* `@Injectable()` -* `@NgModule()` +Una clase con el `@Component()` [decorador](#decorator) que lo asocia con un compañero [plantilla](#template). Juntos, la clase de componente y la plantilla definen una [vista](#view). +Un componente es un tipo especial de [directiva](#directive). +El decorador `@Component()` extiende el decorador `@Directive()` con características orientadas a plantillas. +Una clase de componente Angular es responsable de exponer los datos y manejar la mayor parte de la visualización de la vista y la lógica de interacción del usuario a través de [enlace de datos](#data-binding). -{@a class-field-decorator} +Lee más sobre clases de componentes, plantillas y vistas en [Introducción a los conceptos de Angular](guide/architecture). -## class field decorator +{@a configuration} -A [decorator](#decorator) statement immediately before a field in a class definition that declares the type of that field. Some examples are `@Input` and `@Output`. +## configuración -{@a collection} +Ver [configuración del espacio de trabajo](#cli-config) -## collection +{@a cli-config} -In Angular, a set of related [schematics](#schematic) collected in an [npm package](#npm-package). +{@a config} -{@a cli} +## configuración del espacio de trabajo -## command-line interface (CLI) +Un archivo llamado `angular.json` en el nivel raíz de un [espacio de trabajo](#workspace) Angular proporciona valores predeterminados de configuración de todo el espacio de trabajo y específicos del proyecto para las herramientas de compilación y desarrollo proporcionadas o integradas con la [Angular CLI](#cli). -The [Angular CLI](cli) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](#workspace) or [project](#project), and to run [schematics](#schematic) that add and modify code for initial generic versions of various elements. The CLI supports all stages of the development cycle, including building, testing, bundling, and deployment. +Para obtener más información, consulta [Configuración del espacio de trabajo](guide/workspace-config). -* To begin using the CLI for a new project, see [Local Environment Setup](guide/setup-local "Setting up for Local Development"). -* To learn more about the full capabilities of the CLI, see the [CLI command reference](cli). +Las herramientas utilizan archivos de configuración adicionales específicos del proyecto, como `package.json` para el [manejador de paquetes npm](#npm-package), `tsconfig.json` para [TypeScript transpilation](#transpile), y `tslint.json` para [TSLint](https://palantir.github.io/tslint/). -See also [Schematics CLI](#schematics-cli). +Para obtener más información, consulta [Espacio de trabajo y estructura de archivos de proyecto](guide/file-structure). -{@a component} +{@a form-control} -## component +## control de formulario -A class with the `@Component()` [decorator](#decorator) that associates it with a companion [template](#template). Together, the component class and template define a [view](#view). -A component is a special type of [directive](#directive). -The `@Component()` decorator extends the `@Directive()` decorator with template-oriented features. +Una instancia de `FormControl`, que es un elemento fundamental para los formularios Angular. +Junto con `FormGroup` y `FormArray`, rastrea el valor, la validación y el estado de un elemento de entrada de formulario. -An Angular component class is responsible for exposing data and handling most of the view's display and user-interaction logic through [data binding](#data-binding). +Lee más sobre formularios en [Introducción a los formularios en Angular](guide/forms-overview). -Read more about component classes, templates, and views in [Introduction to Angular concepts](guide/architecture). +{@a D} +{@a change-detection} -## configuration +## detección de cambios -See [workspace configuration](#cli-config) +El mecanismo por el cual el framework de Angular sincroniza el estado de la interfaz de usuario de una aplicación con el estado de los datos. -{@a content-projection} +El detector de cambios verifica el estado actual del modelo de datos cada vez que se ejecuta y lo mantiene como el estado anterior para compararlo en la siguiente iteración. -## content projection +A medida que la lógica de la aplicación actualiza los datos de los componentes, los valores que están vinculados a las propiedades DOM en la vista pueden cambiar. +El detector de cambios es responsable de actualizar la vista para reflejar el modelo de datos actual. +Del mismo modo, el usuario puede interactuar con la interfaz de usuario, lo que provoca eventos que cambian el estado del modelo de datos. +Estos eventos pueden desencadenar la detección de cambios. -A way to insert DOM content from outside a component into the component's view in a designated spot. +Usando la estrategia de detección de cambio predeterminada ("CheckAlways"), el detector de cambio pasa por la [jerarquía de vista](#view-tree) en cada turno de VM para verificar cada [propiedad vinculada a datos](#data-binding) en la plantilla. en el modelo. En la primera fase, compara el estado actual de los datos dependientes con el estado anterior y recopila los cambios. +En la segunda fase, actualiza la página DOM para reflejar los nuevos valores de datos. -For more information, see [Responding to changes in content](guide/lifecycle-hooks#content-projection). +Si configuras la estrategia de detección de cambios `OnPush` ("CheckOnce"), el detector de cambios se ejecuta solo cuando [invocado explícitamente](api/core/ChangeDetectorRef), o cuando se activa mediante un cambio de referencia en mediante un `Input` o un controlador de eventos. Esto generalmente mejora el rendimiento. Para obtener más información, consulta [Optimizar la detección de cambios de Angular](https://web.dev/faster-angular-change-detection/). -{@a custom-element} +{@a class-decorator} -## custom element +## decorador de clase -A web platform feature, currently supported by most browsers and available in other browsers through polyfills (see [Browser support](guide/browser-support)). +Un [decorador](#decorator) que aparece inmediatamente antes de una definición de clase, que declara que la clase es del tipo dado y proporciona metadatos adecuados para el tipo. -The custom element feature extends HTML by allowing you to define a tag whose content is created and controlled by JavaScript code. A custom element (also called a *web component*) is recognized by a browser when it's added to the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry). +Los siguientes decoradores pueden declarar tipos de clase Angular: -You can use the API to transform an Angular component so that it can be registered with the browser and used in any HTML that you add directly to the DOM within an Angular app. The custom element tag inserts the component's view, with change-detection and data-binding functionality, into content that would otherwise be displayed without Angular processing. +- `@Component()` +- `@Directive()` +- `@Pipe()` +- `@Injectable()` +- `@NgModule()` -See [Angular element](#angular-element). +{@a class-field-decorator} -See also [dynamic component loading](#dynamic-components). +## decorador de campo de clase +Un [decorador](#decorator) declarado inmediatamente antes de un campo en una definición de clase que declara el tipo de ese campo. Algunos ejemplos son `@Input` y `@Output`. -{@a D} +{@a attribute-directive} +{@a attribute-directives} -{@a data-binding} +## directivas de atributos -## data binding +Una categoría de [directiva](#directive) que puede escuchar y modificar el comportamiento de otros elementos HTML, atributos, propiedades y componentes. Generalmente están representados como atributos HTML, de ahí el nombre. -A process that allows apps to display data values to a user and respond to user -actions (such as clicks, touches, and keystrokes). +Obtén más información en [Directivas de atributos](guide/attribute-directives). -In data binding, you declare the relationship between an HTML widget and a data source -and let the framework handle the details. -Data binding is an alternative to manually pushing application data values into HTML, attaching -event listeners, pulling changed values from the screen, and -updating application data values. +{@a structural-directive} +{@a structural-directives} + +## directivas estructurales -Read about the following forms of binding in Angular's [Template Syntax](guide/template-syntax): +Una categoría de [directiva](#directive) que es responsable de dar forma al diseño HTML modificando DOM y mdashthat, es decir, agregando, eliminando o manipulando elementos y sus elementos secundarios. - * [Interpolation](guide/interpolation) - * [Property binding](guide/property-binding) - * [Event binding](guide/event-binding) - * [Attribute binding](guide/attribute-binding) - * [Class binding](guide/attribute-binding#class-binding) - * [Style binding](guide/attribute-binding#style-binding) - * [Two-way data binding with ngModel](guide/built-in-directives#ngModel) +Obtén más información en [Directivas estructurales](guide/structural-directives). {@a declarable} ## declarable -A class type that you can add to the `declarations` list of an [NgModule](#ngmodule). -You can declare [components](#component), [directives](#directive), and [pipes](#pipe). +Un tipo de clase que puede agregar a la lista de 'declaraciones' de un [NgModule](#ngmodule). +Puedes declarar [componentes](#component), [directivas](#directive), y [pipes](#pipe). -Don't declare the following: -* A class that's already declared in another NgModule -* An array of directives imported from another package. For example, don't declare `FORMS_DIRECTIVES` from `@angular/forms` -* NgModule classes -* Service classes -* Non-Angular classes and objects, such as strings, numbers, functions, entity models, configurations, business logic, and helper classes +No declares lo siguiente: +- Una clase que ya está declarada en otro NgModule +- Un conjunto de directivas importadas de otro paquete. Por ejemplo, no declarar `FORMS_DIRECTIVES` de `@angular/forms` +- Clases de NgModule +- Clases de servicio +- Clases y objetos no de Angular, como cadenas de texto, números, funciones, modelos de entidad, configuraciones, lógica de negocios y clases auxiliares. {@a decorator} - {@a decoration} -## decorator | decoration +## decorador | decoración -A function that modifies a class or property definition. Decorators (also called *annotations*) are an experimental (stage 2) [JavaScript language feature](https://github.com/wycats/javascript-decorators). -TypeScript adds support for decorators. +Una función que modifica una definición de clase o propiedad. Los decoradores (también llamados _anotaciones_) son experimentales (etapa 2) [característica del lenguaje JavaScript](https://github.com/wycats/javascript-decorators). +TypeScript agrega soporte para decoradores. -Angular defines decorators that attach metadata to classes or properties -so that it knows what those classes or properties mean and how they should work. +Angular define decoradores que adjuntan metadatos a clases o propiedades para que sepas qué significan esas clases o propiedades y cómo deberían funcionar. -See [class decorator](#class-decorator), [class field decorator](#class-field-decorator). +Consulta [decorador de clase](#class-decorator), [decorador de campo de clase](#class-field-decorator). -{@a di} +{@a directive} +{@a directives} -{@a dependency-injection} +## directiva -## dependency injection (DI) +Una clase que puede modificar la estructura del DOM o modificar atributos en el DOM y el modelo de datos de componentes. Una definición de clase directiva está precedida inmediatamente por un `@Directive()` [decorador](#decorator) que proporciona metadatos. -A design pattern and mechanism for creating and delivering some parts of an application (dependencies) to other parts of an application that require them. +Una clase de directiva generalmente está asociada con un elemento o atributo HTML, y ese elemento o atributo a menudo se conoce como la directiva misma. Cuando Angular encuentra una directiva en una [plantilla](#template) HTML, crea la instancia de clase de directiva coincidente y le da a la instancia control sobre esa parte del DOM del navegador. -In Angular, dependencies are typically services, but they also can be values, such as strings or functions. -An [injector](#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](#provider) of the service or value. +Hay tres categorías de directivas: -Learn more in [Dependency Injection in Angular](guide/dependency-injection). +- [Componentes](#component) usa `@Component()` (una extensión de `@Directive()`) para asociar una plantilla con una clase. -{@a di-token} +- [Directivas de atributo](#attribute-directive) modifica el comportamiento y la apariencia de los elementos de la página. -## DI token +- [Directivas estructurales](#structural-directive) modifican la estructura del DOM. -A lookup token associated with a dependency [provider](#provider), for use with the [dependency injection](#di) system. +Angular proporciona una serie de directivas integradas que comienzan con el prefijo `ng`. +También puede crear nuevas directivas para implementar su propia funcionalidad. +Asocia un _selector_ (una etiqueta HTML como ``) con una directiva personalizada, extendiendo así la [sintaxis de plantilla](guide/template-syntax) que puede usar en sus aplicaciones. -{@a differential-loading} +{@a E} -## differential loading +{@a ecma} -A build technique that creates two bundles for an application. One smaller bundle is for modern browsers. A second, larger bundle allows the application to run correctly in older browsers (such as IE11) that do not support all modern browser APIs. +## ECMAScript -For more information, see the [Deployment](guide/deployment#differential-loading) guide. +La [especificación oficial del lenguaje JavaScript](https://es.wikipedia.org/wiki/ECMAScript). +No todos los navegadores son compatibles con el último estándar ECMAScript, pero puede usar un [transpiler](#transpile) (como [TypeScript](#typescript)) para escribir código utilizando las últimas funciones, que luego se transpilarán al código que se ejecuta en las versiones que son compatibles con los navegadores. -{@a directive} -{@a directives} +Para obtener más información, consultá [Browser Support](guide/browser-support). -## directive +{@a binding} -A class that can modify the structure of the DOM or modify attributes in the DOM and component data model. A directive class definition is immediately preceded by a `@Directive()` [decorator](#decorator) that supplies metadata. +## enlaces (binding) -A directive class is usually associated with an HTML element or attribute, and that element or attribute is often referred to as the directive itself. When Angular finds a directive in an HTML [template](#template), it creates the matching directive class instance and gives the instance control over that portion of the browser DOM. +En general, es la práctica de establecer una variable o propiedad en un valor de datos Dentro de Angular, generalmente se refiere a [enlace de datos](#data-binding), que coordina las propiedades del objeto DOM con las propiedades del objeto de datos. -There are three categories of directive: -* [Components](#component) use `@Component()` (an extension of `@Directive()`) to associate a template with a class. +A veces se refiere a una [inyección de dependencia](#dependency-injection) de enlace +entre un [token](#token) y una dependencia de [proveedor](#provider). -* [Attribute directives](#attribute-directive) modify behavior and appearance of page elements. +{@a data-binding} -* [Structural directives](#structural-directive) modify the structure of the DOM. +## enlace de datos -Angular supplies a number of built-in directives that begin with the `ng` prefix. -You can also create new directives to implement your own functionality. -You associate a *selector* (an HTML tag such as ``) with a custom directive, thereby extending the [template syntax](guide/template-syntax) that you can use in your apps. +Un proceso que permite a las aplicaciones mostrar valores de datos a un usuario y responder al usuario acciones (como clics, toques y pulsaciones de teclas). -{@a dom} +En el enlace de datos, declara la relación entre un widget HTML y una fuente de datos +y deja que el framework maneje los detalles. -## domain-specific language (DSL) +El enlace de datos es una alternativa para insertar manualmente los valores de datos de la aplicación en HTML, adjuntando oyentes de eventos, extrayendo valores modificados de la pantalla y actualizar los valores de los datos de la aplicación. -A special-purpose library or API; see [Domain-specific language](https://en.wikipedia.org/wiki/Domain-specific_language). -Angular extends TypeScript with domain-specific languages for a number of domains relevant to Angular apps, defined in NgModules such as [animations](guide/animations), [forms](guide/forms), and [routing and navigation](guide/router). +Lee sobre las siguientes formas de enlace en la [Sintaxis de plantilla](guide/template-syntax) de Angular: -{@a dynamic-components} +- [Interpolación](guide/interpolation) +- [Enlace de propiedad](guide/property-binding) +- [Enlace de evento](guide/event-binding) +- [Enlace de atributo](guide/attribute-binding) +- [Enlace de clase](guide/attribute-binding#class-binding) +- [Enlace de estilo](guide/attribute-binding#style-binding) +- [Enlace de datos bidireccional con ngModel](guide/built-in-directives#ngModel) -## dynamic component loading +{@a input} -A technique for adding a component to the DOM at run time. Requires that you exclude the component from compilation and then connect it to Angular's change-detection and event-handling framework when you add it to the DOM. +## entrada -See also [custom element](#custom-element), which provides an easier path with the same result. +Al definir una [directiva](#directive), el decorador `@Input()` en una propiedad directiva +hace que esa propiedad esté disponible como _objetivo_ de un [enlace de propiedad](guide/property-binding). +Los valores de datos fluyen a una propiedad de entrada desde la fuente de datos identificada en la [expresión de plantilla](#template-expression) a la derecha del signo igual. +Obtén más información en [propiedades de entrada y salida](guide/inputs-outputs). -{@a E} +{@a router} +{@a router-module} -{@a eager-loading} +## enrutador -## eager loading +Una herramienta que configura e implementa la navegación entre estados y [vistas](#view) dentro de una aplicación Angular. -NgModules or components that are loaded on launch are called eager-loaded, to distinguish them from those -that are loaded at run time (lazy-loaded). -See [lazy loading](#lazy-load). +El módulo `Router` es un [NgModule](#ngmodule) que proporciona los proveedores de servicios y las directivas necesarias para navegar por las vistas de la aplicación. Un [componente de enrutamiento](#router-outlet) es aquel que importa el módulo `Router` y cuya plantilla contiene un elemento `RouterOutlet` donde puede mostrar vistas producidas por el enrutador. +El enrutador define la navegación entre vistas en una sola página, a diferencia de la navegación entre páginas. Interpreta enlaces de tipo URL para determinar qué vistas crear o destruir, y qué componentes cargar o descargar. Le permite aprovechar [carga diferida](#lazy-load) en las aplicaciones Angular. -{@a ecma} +Obtén más información en [Enrutamiento y navegación](guide/router). -## ECMAScript +{@a element} -The [official JavaScript language specification](https://en.wikipedia.org/wiki/ECMAScript). +## elemento -Not all browsers support the latest ECMAScript standard, but you can use a [transpiler](#transpile) (like [TypeScript](#typescript)) to write code using the latest features, which will then be transpiled to code that runs on versions that are supported by browsers. +Angular define una clase `ElementRef` para envolver elementos de interfaz de usuario nativos específicos del render. +En la mayoría de los casos, esto le permite usar plantillas de Angular y enlace de datos para acceder a elementos DOM sin referencia al elemento nativo. -To learn more, see [Browser Support](guide/browser-support). +La documentación generalmente se refiere a _elementos_ (instancias `ElementRef`), a diferencia de _elementos DOM_ (que se puede acceder directamente si es necesario). +Comparado con [elemento personalizado](#custom-element). -{@a element} +{@a angular-element} -## element +## elemento Angular -Angular defines an `ElementRef` class to wrap render-specific native UI elements. -In most cases, this allows you to use Angular templates and data binding to access DOM elements -without reference to the native element. +Un [componente](#component) Angular empaquetado como un [elemento personalizado](#custom-element). -The documentation generally refers to *elements* (`ElementRef` instances), as distinct from *DOM elements* -(which can be accessed directly if necessary). +Obtén más información en [Vista general de Elementos Angular](guide/elements). -Compare to [custom element](#custom-element). +{@a custom-element} -{@a entry-point} +## elemento personalizado -## entry point +Una función de plataforma web, actualmente compatible con la mayoría de los navegadores y disponible en otros navegadores a través de polyfills (consulta [Soporte del navegador](guide/browser-support)). -A [JavaScript module](#module) that is intended to be imported by a user of [an -npm package](guide/npm-packages). An entry-point module typically re-exports -symbols from other internal modules. A package can contain multiple -entry points. For example, the `@angular/core` package has two entry-point -modules, which can be imported using the module names `@angular/core` and -`@angular/core/testing`. +La característica de elemento personalizado extiende HTML al permitirle definir una etiqueta cuyo contenido es creado y controlado por código JavaScript. Un elemento personalizado (también llamado _componente web_) es reconocido por un navegador cuando se agrega a [CustomElementRegistry](https://developer.mozilla.org/es/docs/Web/API/CustomElementRegistry). -{@a F} +Puedes usar la API para transformar un componente Angular para que pueda registrarse con el navegador y usarse en cualquier HTML que agregue directamente al DOM dentro de una aplicación Angular. La etiqueta de elemento personalizado inserta la vista del componente, con la funcionalidad de detección de cambios y enlace de datos, en contenido que de otro modo se mostraría sin procesamiento Angular. -{@a form-control} +Ver [Elemento Angular](#angular-element). -## form control +Consulta también [carga de componentes dinámicos](#dynamic-components). -A instance of `FormControl`, which is a fundamental building block for Angular forms. Together with `FormGroup` and `FormArray`, tracks the value, validation, and status of a form input element. +{@a schematic} -Read more forms in the [Introduction to forms in Angular](guide/forms-overview). +## esquema -{@a form-model} +Una biblioteca de andamios que define cómo generar o transformar un proyecto de programación creando, modificando, refactorizando o moviendo archivos y códigos. +Un esquema define [reglas](#rule) que operan en un sistema de archivos virtual llamado [árbol](#file-tree). -## form model +La [Angular CLI](#cli) utiliza esquemas para generar y modificar [proyectos Angular](#project) y partes de proyectos. -The "source of truth" for the value and validation status of a form input element at a given point in time. When using [reactive forms](#reactive-forms), the form model is created explicitly in the component class. When using [template-driven forms](#template-driven-forms), the form model is implicitly created by directives. +- Angular proporciona un conjunto de esquemas para usar con la CLI. Consulta la [Referencia de comando de Angular CLI](cli). El comando [`ng add`](cli/add) ejecuta esquemas como parte de agregar una biblioteca a su proyecto. El comando [`ng generate`](cli/generate) ejecuta esquemas para crear aplicaciones, bibliotecas y construcciones de código Angular. -Learn more about reactive and template-driven forms in the [Introduction to forms in Angular](guide/forms-overview). +- Los desarrolladores de [Bibliotecas](#library) pueden crear esquemas que permitan a la Angular CLI agregar y actualizar sus bibliotecas publicadas y generar artefactos que la biblioteca defina. + Agregue estos esquemas al paquete npm que usa para publicar y compartir su biblioteca. -{@a form-validation} +Obtén más información en [Esquemas](guide/schematics) e [Integración de bibliotecas con la CLI](guide/creating-libraries#integrating-with-the-cli). -## form validation +{@a schematics-cli} -A check that runs when form values change and reports whether the given values are correct and complete, according to the defined constraints. Reactive forms apply [validator functions](guide/form-validation#adding-to-reactive-forms). Template-driven forms use [validator directives](guide/form-validation#adding-to-template-driven-forms). +## esquema CLI +Los esquemas vienen con su propia herramienta de línea de comandos. +Usando Node 6.9 o superior, instala la CLI de esquemas globalmente: -To learn more, see [Form Validation](guide/form-validation). + +npm install -g @angular-devkit/schematics-cli + -{@a G} +Esto instala el ejecutable `schematics`, que puede usar para crear un nuevo esquema [colección](#collection) con un esquema inicial llamado. La carpeta de colección es un espacio de trabajo para esquemas. También puede usar el comando `schematics` para agregar un nuevo esquema a una colección existente, o extender un esquema existente. +{@a workspace} -{@a H} +## espacio de trabajo -{@a I} +Una colección de [proyectos](#project) Angular (es decir, aplicaciones y bibliotecas) con tecnología de [anglar CLI](#cli) que generalmente se ubican en un único repositorio de control de fuente (como [git](https://git-scm.com/)). +El [CLI](#cli) [`ng new` command](cli/new) crea un directorio del sistema de archivos (la "raíz del espacio de trabajo"). En la raíz del espacio de trabajo, también crea el espacio de trabajo [archivo de configuración](#configuration) (`angular.json`) y, por defecto, un proyecto de aplicación inicial con el mismo nombre. -{@a immutability} +Los comandos que crean u operan en aplicaciones y bibliotecas (como `add` y `generate`) deben ejecutarse desde una carpeta de espacio de trabajo. -## immutability +Para obtener más información, consulta [Configuración del espacio de trabajo](guide/workspace-config). -The ability to alter the state of a value after its creation. [Reactive forms](#reactive-forms) perform immutable changes in that -each change to the data model produces a new data model rather than modifying the existing one. [Template-driven forms](#template-driven-forms) perform mutable changes with `NgModel` and [two-way data binding](#data-binding) to modify the existing data model in place. +{@a template-expression} -{@a injectable} +## expresión de plantilla -## injectable +Una sintaxis tipo TypeScript que Angular evalúa dentro de un [enlace de datos](#data-binding). -An Angular class or other definition that provides a dependency using the [dependency injection](#di) mechanism. An injectable [service](#service) class must be marked by the `@Injectable()` [decorator](#decorator). Other items, such as constant values, can also be injectable. +Lee acerca de cómo escribir expresiones de plantilla en la sección [expresiones de plantilla](guide/interpolation#template-expressions) de la guía [Interpolación](guide/interpolation). -{@a injector} +{@a F} -## injector +{@a template-driven-forms} -An object in the Angular [dependency-injection](#dependency-injection) system -that can find a named dependency in its cache or create a dependency -using a configured [provider](#provider). -Injectors are created for NgModules automatically as part of the bootstrap process -and are inherited through the component hierarchy. +## formularios basados en plantillas -* An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components. +Un formato para crear formularios Angular utilizando formularios HTML y elementos de entrada en la vista. +El formato alternativo utiliza el framework [formularios reactivos](#reactive-forms). -* A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components. +Al usar formularios basados en plantillas: -* You can configure injectors with different providers that can provide different implementations of the same dependency. +- La "fuente de la verdad" es la plantilla. La validación se define utilizando atributos en los elementos de entrada individuales. +- [Enlace bidireccional](#data-binding) con `ngModel` mantiene el modelo de componente sincronizado con la entrada del usuario en los elementos de entrada. +- Detrás de escena, Angular crea un nuevo control para cada elemento de entrada, siempre que haya configurado un atributo `name` y un enlace bidireccional para cada entrada. +- Las directivas Angular asociadas tienen el prefijo `ng` como `ngForm`, `ngModel` y `ngModelGroup`. -Learn more about the injector hierarchy in [Hierarchical Dependency Injectors](guide/hierarchical-dependency-injection). +La alternativa es una forma reactiva. Para una introducción y comparación de ambos enfoques de formularios, consulta [Introducción a los formularios Angular](guide/forms-overview). -{@a input} +{@a reactive-forms} -## input +## formularios reactivos -When defining a [directive](#directive), the `@Input()` decorator on a directive property -makes that property available as a *target* of a [property binding](guide/property-binding). -Data values flow into an input property from the data source identified -in the [template expression](#template-expression) to the right of the equal sign. +Un framework para construir forularios Angular a través del código en un componente. +La alternativa es un [formulario controlado por plantilla](#template-driven-forms). -To learn more, see [input and output properties](guide/inputs-outputs). +Cuando se usan formularios reactivos: -{@a interpolation} +- La "fuente de verdad", el modelo de formulario, se define en la clase de componente. +- La validación se configura mediante funciones de validación en lugar de directivas de validación. +- Cada control se crea explícitamente en la clase de componente creando una instancia de `FormControl` manualmente o con `FormBuilder`. +- Los elementos de entrada de la plantilla _no_ usan `ngModel`. +- as directivas Angular asociadas tienen el prefijo `form`, como `formControl`, `formGroup` y `formControlName`. -## interpolation +La alternativa es un formulario basado en plantillas. Para una introducción y comparación de ambos enfoques de formularios, consulte [Introducción a los formularios Angular](guide/forms-overview). -A form of property [data binding](#data-binding) in which a [template expression](#template-expression) between double-curly braces renders as text. -That text can be concatenated with neighboring text before it is assigned to an element property -or displayed between element tags, as in this example. +{@a unidirectional-data-flow} -```html -My current hero is {{hero.name}} -``` +## flujo de datos unidireccional +Un modelo de flujo de datos donde el árbol de componentes siempre se verifica en busca de cambios en una dirección (principal a secundario), lo que evita los ciclos en el gráfico de detección de cambios. -Read more in the [Interpolation](guide/interpolation) guide. +En la práctica, esto significa que los datos en Angular fluyen hacia abajo durante la detección de cambios. +Un componente primario puede cambiar fácilmente los valores en sus componentes secundarios porque primero se verifica el primario. +Sin embargo, podría producirse un error si un componente secundario intenta cambiar un valor en su elemento primario durante la detección de cambio (invirtiendo el flujo de datos esperado), porque el componente principal ya se ha procesado. +En modo de desarrollo, Angular arroja el error `ExpressionChangedAfterItHasBeenCheckedError` si su aplicación intenta hacer esto, en lugar de fallar silenciosamente en representar el nuevo valor. -{@a ivy} +Para evitar este error, un método [lifecycle hook](guide/lifecycle-hooks)que busca realizar dicho cambio debería desencadenar una nueva ejecución de detección de cambio. La nueva ejecución sigue la misma dirección que antes, pero logra recoger el nuevo valor. -## Ivy +{@a G} -Ivy is the code name for Angular's [next-generation compilation and rendering pipeline](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7). -With the version 9 release of Angular, the new compiler and runtime instructions are used by default instead of the older compiler and runtime, known as [View Engine](#ve). +{@a route-guard} -See [Angular Ivy](guide/ivy). +## guard de ruta +Un método que controla la navegación a una ruta solicitada en una aplicación de enrutamiento. +Los guards determinan si una ruta se puede activar o desactivar, y si se puede cargar un módulo con carga diferida. -{@a J} +Obtén más información en [Enrutamiento y navegación](guide/router#preventing-unauthorized-access "Ejemplos"). -{@a javascript} +{@a H} -## JavaScript +{@a I} -See [ECMAScript](#ecma), [TypeScript](#typescript). +{@a di} +{@a dependency-injection} -{@a jit} +## inyección de dependencia (DI) +Un patrón de diseño y un mecanismo para crear y entregar algunas partes de una aplicación (dependencias) a otras partes de una aplicación que las requieran. -## just-in-time (JIT) compilation +En Angular, las dependencias suelen ser servicios, pero también pueden ser valores, como cadenas o funciones. -The Angular just-in-time (JIT) compiler converts your Angular HTML and TypeScript code into -efficient JavaScript code at run time, as part of bootstrapping. +Un [inyector](#injector) para una aplicación (creado automáticamente durante el arranque) crea instancias de dependencias cuando sea necesario, utilizando un [proveedor](#provider) configurado del servicio o valor. -JIT compilation is the default (as opposed to AOT compilation) when you run Angular's `ng build` and `ng serve` CLI commands, and is a good choice during development. -JIT mode is strongly discouraged for production use -because it results in large application payloads that hinder the bootstrap performance. +Obtén más información en [Inyección de dependencia en Angular](guide/dependency-injection). -Compare to [ahead-of-time (AOT) compilation](#aot). +{@a command-line-interface-cli} +{@a cli} +## interfaz de línea de comandos (CLI) -{@a K} +[Angular CLI](cli) es una herramienta de línea de comandos para administrar el ciclo de desarrollo Angular. Úsalo para crear la estructura inicial del sistema de archivos para un [espacio de trabajo](#workspace) o [proyecto](#project), y para ejecutar [esquemas](#schematic) que agregue y modifique código para versiones genéricas iniciales de varios elementos. La CLI admite todas las etapas del ciclo de desarrollo, incluidas la construcción, las pruebas, la agrupación y la implementación. +- Para comenzar a usar la CLI para un nuevo proyecto, consultá [Configuración del entorno local](guide/setup-local "Configuración para el desarrollo local"). +- Para obtener más información sobre las capacidades completas de la CLI, consultá la [Referencia del comando CLI](cli). -{@a L} +Ver también [Esquemas CLI](#schematics-cli). -{@a lazy-load} +{@a immutability} -## lazy loading +## inmutabilidad -A process that speeds up application load time by splitting the application into multiple bundles and loading them on demand. -For example, dependencies can be lazy loaded as needed—as opposed to [eager-loaded](#eager-loading) modules that are required by the root module and are thus loaded on launch. +La capacidad de alterar el estado de un valor después de su creación. [Formularios reactivos](#reactive-forms) realizan cambios inmutables en ese cada cambio en el modelo de datos produce un nuevo modelo de datos en lugar de modificar el existente. [Formas controladas por plantilla](#template-driven-forms) realizan cambios mutables con `NgModel` y [enlace de datos bidireccional](#data-binding) para modificar el modelo de datos existente en su lugar. -The [router](#router) makes use of lazy loading to load child views only when the parent view is activated. -Similarly, you can build custom elements that can be loaded into an Angular app when needed. +{@a injectable} -{@a library} +## inyectable -## library +Una clase Angular u otra definición que proporciona una dependencia utilizando el mecanismo de [inyección de dependencia](#di). Una clase inyectable [servicio](#service) debe estar marcada por el `@Injectable()` [decorador](#decorator). Otros elementos, como valores constantes, también pueden ser inyectables. -In Angular, a [project](#project) that provides functionality that can be included in other Angular apps. -A library isn't a complete Angular app and can't run independently. -(To add re-usable Angular functionality to non-Angular web apps, you can use Angular [custom elements](#angular-element).) +{@a injector} -* Library developers can use the [Angular CLI](#cli) to `generate` scaffolding for a new library in an existing [workspace](#workspace), and can publish a library as an `npm` package. +## inyector -* Application developers can use the [Angular CLI](#cli) to `add` a published library for use with an application in the same [workspace](#workspace). +Un objeto en el sistema Angular [inyección de dependencia](#dependency-injection) que puede encontrar una dependencia con nombre en su caché o crear una dependencia utilizando un [proveedor](#provider) configurado. +Los inyectores se crean para NgModules automáticamente como parte del proceso de arranque +y se heredan a través de la jerarquía de componentes. -See also [schematic](#schematic). +- Un inyector proporciona una instancia singleton de una dependencia, y puede inyectar esta misma instancia en múltiples componentes. -{@a lifecycle-hook} +- Una jerarquía de inyectores a nivel de NgModule y componente puede proporcionar diferentes instancias de dependencia a sus propios componentes y componentes secundarios. -## lifecycle hook +- Puedes configurar inyectores con diferentes proveedores que pueden proporcionar diferentes implementaciones de la misma dependencia. -An interface that allows you to tap into the lifecycle of [directives](#directive) and [components](#component) as they are created, updated, and destroyed. +Obtén más información sobre la jerarquía de inyectores en [Inyectores de dependencia jerárquica](guide/hierarchical-dependency-injection). -Each interface has a single hook method whose name is the interface name prefixed with `ng`. -For example, the `OnInit` interface has a hook method named `ngOnInit`. +{@a interpolation} -Angular calls these hook methods in the following order: +## interpolación -* `ngOnChanges`: When an [input](#input)/[output](#output) binding value changes. -* `ngOnInit`: After the first `ngOnChanges`. -* `ngDoCheck`: Developer's custom change detection. -* `ngAfterContentInit`: After component content initialized. -* `ngAfterContentChecked`: After every check of component content. -* `ngAfterViewInit`: After a component's views are initialized. -* `ngAfterViewChecked`: After every check of a component's views. -* `ngOnDestroy`: Just before the directive is destroyed. +Una forma de propiedad [enlace de datos](#data-binding) en la que una [expresión de plantilla](#template-expression) entre llaves dobles se representa como texto. +Ese texto se puede concatenar con el texto vecino antes de asignarlo a una propiedad de elemento +o se muestra entre etiquetas de elementos, como en este ejemplo. -To learn more, see [Lifecycle Hooks](guide/lifecycle-hooks). +```html +Mi héroe actual es {{hero.name}} +``` -{@a M} +Lee más en la guía [Interpolación](guide/interpolation). -{@a module} +{@a ivy} -## module +## Ivy -In general, a module collects a block of code dedicated to a single purpose. Angular uses standard JavaScript modules and also defines an Angular module, `NgModule`. +Ivy es el nombre en clave del [canal de compilación y renderización de próxima generación](https://blog.angular.io/a-plan-for-version-8-0-and-ivy-b3318dfc19f7) de Angular. +Con la versión 9 de Angular, el nuevo compilador y las instrucciones de tiempo de ejecución se utilizan de forma predeterminada en lugar del compilador y el tiempo de ejecución más antiguos, conocidos como [View Engine](#ve). -In JavaScript (ECMAScript), each file is a module and all objects defined in the file belong to that module. Objects can exported, making them public, and public objects can be imported for use by other modules. +Lee más en [Angular Ivy](guide/ivy). -Angular ships as a collection of JavaScript modules (also called libraries). Each Angular library name begins with the `@angular` prefix. Install Angular libraries with the [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) and import parts of them with JavaScript `import` declarations. +{@a J} -Compare to [NgModule](#ngmodule). +{@a javascript} +## JavaScript -{@a N} +Ver [ECMAScript](#ecma), [TypeScript](#typescript). -{@a ngcc} +{@a view-tree} -## ngcc +## jerarquía de vistas -Angular compatibility compiler. -If you build your app using [Ivy](#ivy), but it depends on libraries that have not been compiled with Ivy, the CLI uses `ngcc` to automatically update the dependent libraries to use Ivy. +Un árbol de vistas relacionadas en el que se puede actuar como una unidad. La vista raíz es la _vista de host_ de un componente. Una vista de host puede ser la raíz de un árbol de _vistas incrustadas_, recopiladas en un _contenedor de vista_ (`ViewContainerRef`) adjunto a un elemento de anclaje en el componente de alojamiento. La jerarquía de vistas es una parte clave de Angular [detección de cambios](#change-detection). +La jerarquía de vistas no implica una jerarquía de componentes. Las vistas que están integradas en el contexto de una jerarquía particular pueden ser vistas de host de otros componentes. Esos componentes pueden estar en el mismo NgModule que el componente de alojamiento o pertenecer a otros NgModules. -{@a ngmodule} +{@a K} -## NgModule +{@a L} -A class definition preceded by the `@NgModule()` [decorator](#decorator), which declares and serves as a manifest for a block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. +{@a dom} -Like a [JavaScript module](#module), an NgModule can export functionality for use by other NgModules and import public functionality from other NgModules. -The metadata for an NgModule class collects components, directives, and pipes that the application uses along with the list of imports and exports. See also [declarable](#declarable). +## lenguaje específico de dominio (DSL) -NgModules are typically named after the file in which the exported thing is defined. For example, the Angular [DatePipe](api/common/DatePipe) class belongs to a feature module named `date_pipe` in the file `date_pipe.ts`. You import them from an Angular [scoped package](#scoped-package) such as `@angular/core`. +Una biblioteca o API de propósito especial; consulte [Idioma específico del dominio](https://es.wikipedia.org/wiki/Lenguaje_espec%C3%ADfico_de_dominio). +Angular extiende TypeScript con lenguajes específicos de dominio para varios dominios relevantes para aplicaciones Angular, definidas en NgModules como [animaciones](guide/animations), [formularios](guide/forms), y [enrutamiento y navegación](guide/router). -Every Angular application has a root module. By convention, the class is called `AppModule` and resides in a file named `app.module.ts`. +{@a lifecycle-hook} -To learn more, see [NgModules](guide/ngmodules). +## lifecycle hook -{@a npm-package} +Una interfaz que le permite aprovechar el ciclo de vida de [directivas](#directive) and [componentes](#component) a medida que se crean, actualizan y destruyen. -## npm package +Cada interfaz tiene un método de enlace único cuyo nombre es el nombre de la interfaz con el prefijo `ng`. +Por ejemplo, la interfaz `OnInit` tiene un método de enlace llamado `ngOnInit`. -The [npm package manager](https://docs.npmjs.com/getting-started/what-is-npm) is used to distribute and load Angular modules and libraries. +Angular llama a estos métodos de enlace en el siguiente orden: -Learn more about how Angular uses [Npm Packages](guide/npm-packages). +- `ngOnChanges`: Cuando cambia un valor de enlace [entrada](#input)/[salida](#output). +- `ngOnInit`: Después de los primeros `ngOnChanges`. +- `ngDoCheck`: Detección de cambios personalizados del desarrollador. +- `ngAfterContentInit`: Después del contenido del componente inicializado. +- `ngAfterContentChecked`: Después de cada verificación del contenido del componente. +- `ngAfterViewInit`: Después de que se inicializan las vistas de un componente. +- `ngAfterViewChecked`: Después de cada comprobación de las vistas de un componente. +- `ngOnDestroy`: Justo antes de que se destruya la directiva. -{@a O} +Obtén más información en [Lifecycle Hooks](guide/lifecycle-hooks). -{@a observable} +{@a M} -## observable +{@a form-model} -A producer of multiple values, which it pushes to [subscribers](#subscriber). Used for asynchronous event handling throughout Angular. You execute an observable by subscribing to it with its `subscribe()` method, passing callbacks for notifications of new values, errors, or completion. +## modelo de formulario -Observables can deliver single or multiple values of any type to subscribers, either synchronously (as a function delivers a value to its caller) or on a schedule. A subscriber receives notification of new values as they are produced and notification of either normal completion or error completion. +La "fuente de verdad" para el valor y el estado de validación de un elemento de entrada de formulario en un momento dado. Cuando se usan [formularios reactivos](#reactive-forms), tel modelo de formulario se crea explícitamente en la clase de componente. Al utilizar [formularios controlados por plantilla](#template-driven-forms), el modelo de formulario se crea implícitamente mediante directivas. -Angular uses a third-party library called [Reactive Extensions (RxJS)](http://reactivex.io/rxjs/). +Obtén más información sobre los formularios reactivos y basados en plantillas en [Introducción a los formularios en Angular](guide/forms-overview). -To learn more, see [Observables](guide/observables). +{@a module} +## módulo -{@a observer} +En general, un módulo recopila un bloque de código dedicado a un solo propósito. Angular utiliza módulos JavaScript estándar y también define un módulo Angular, `NgModule`. -## observer +En JavaScript (ECMAScript), cada archivo es un módulo y todos los objetos definidos en el archivo pertenecen a ese módulo. Los objetos se pueden exportar, haciéndolos públicos, y los objetos públicos se pueden importar para su uso por otros módulos. -An object passed to the `subscribe()` method for an [observable](#observable). The object defines the callbacks for the [subscriber](#subscriber). +Angular se envía como una colección de módulos JavaScript (también llamados bibliotecas). Cada nombre de biblioteca Angular comienza con el prefijo `@angular`. Instala bibliotecas Angular con el [administrador de paquetes npm](https://docs.npmjs.com/getting-started/what-is-npm) e importa partes de ellas con las declaraciones de JavaScript `import`. -{@a output} +Comparar con [NgModule](#ngmodule). -## output +{@a N} -When defining a [directive](#directive), the `@Output{}` decorator on a directive property -makes that property available as a *target* of [event binding](guide/event-binding). -Events stream *out* of this property to the receiver identified -in the [template expression](#template-expression) to the right of the equal sign. +{@a ngcc} -To learn more, see [Input and Output Properties](guide/inputs-outputs). +## ngcc +Compilador de compatibilidad Angular. +Si se crea la aplicación usando [Ivy](#ivy), pero depende de las bibliotecas que no se han compilado con Ivy, la CLI usa `ngcc` para actualizar automáticamente las bibliotecas dependientes para usar Ivy. -{@a P} +{@a ngmodule} -{@a pipe} +## NgModule -## pipe +Una definición de clase precedida por el `@NgModule()` [decorador](#decorator), que declara y sirve como manifiesto para un bloque de código dedicado a un dominio de aplicación, un flujo de trabajo o un conjunto de capacidades estrechamente relacionadas. -A class which is preceded by the `@Pipe{}` decorator and which defines a function that transforms input values to output values for display in a [view](#view). Angular defines various pipes, and you can define new pipes. +Al igual que un [módulo JavaScript](#module), un NgModule puede exportar la funcionalidad para que otros NgModules la usen e importar la funcionalidad pública de otros NgModules. +Los metadatos para una clase NgModule recopilan componentes, directivas y canalizaciones que la aplicación usa junto con la lista de importaciones y exportaciones. Ver también [declarable](#declarable). -To learn more, see [Pipes](guide/pipes). +Los NgModules generalmente llevan el nombre del archivo en el que se define lo exportado. Por ejemplo, la clase Angular [DatePipe](api/common/DatePipe) pertenece a un módulo de características llamado `date_pipe` en el archivo`date_pipe.ts`. Se importa desde un [paquete con scope](#scoped-package) como `@angular/core`. -{@a platform} +Cada aplicación Angular tiene un módulo raíz. Por convención, la clase se llama `AppModule` y reside en un archivo llamado `app.module.ts`. -## platform +Para obtener más información, consulta [NgModules](guide/ngmodules). -In Angular terminology, a platform is the context in which an Angular application runs. -The most common platform for Angular applications is a web browser, but it can also be an operating system for a mobile device, or a web server. +{@a O} -Support for the various Angular run-time platforms is provided by the `@angular/platform-*` packages. These packages allow applications that make use of `@angular/core` and `@angular/common` to execute in different environments by providing implementation for gathering user input and rendering UIs for the given platform. Isolating platform-specific functionality allows the developer to make platform-independent use of the rest of the framework. +{@a observable} -* When running in a web browser, [`BrowserModule`](api/platform-browser/BrowserModule) is imported from the `platform-browser` package, and supports services that simplify security and event processing, and allows applications to access browser-specific features, such as interpreting keyboard input and controlling the title of the document being displayed. All applications running in the browser use the same platform service. +## observable -* When [server-side rendering](#server-side-rendering) (SSR) is used, the [`platform-server`](api/platform-server) package provides web server implementations of the `DOM`, `XMLHttpRequest`, and other low-level features that don't rely on a browser. +Un productor de múltiples valores, que empuja a [suscriptores](#subscriber). Se utiliza para el manejo de eventos asíncronos en todo Angular. Ejecutas un observable suscribiéndote con su método `subscribe()`, pasando devoluciones de llamada para notificaciones de nuevos valores, errores o finalización. -{@a polyfill} +Los observables pueden entregar valores únicos o múltiples de cualquier tipo a los suscriptores, ya sea sincrónicamente (como una función entrega un valor a la persona que llama) o en un horario. Un suscriptor recibe una notificación de los nuevos valores a medida que se producen y una notificación de finalización normal o finalización de error. -## polyfill +Angular utiliza una biblioteca de terceros llamada [Extensiones reactivas (RxJS)](http://reactivex.io/rxjs/). -An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. -See [Browser Support](guide/browser-support) for polyfills that support particular functionality for particular platforms. +Obtén más información en [Observables](guide/observables). -{@a project} +{@a observer} -## project +## observador -In the Angular CLI, a standalone application or [library](#library) that can be created or modified by a CLI command. +Un objeto pasado al método `subscribe()` para un [observable](#observable). El objeto define las devoluciones de llamada para el [suscriptor](#subscriber). -A project, as generated by the [`ng new`](cli/new), contains the set of source files, resources, and configuration files that you need to develop and test the application using the CLI. Projects can also be created with the `ng generate application` and `ng generate library` commands. +{@a P} -For more information, see [Project File Structure](guide/file-structure). +{@a npm-package} -The [`angular.json`](guide/workspace-config) file configures all projects in a [workspace](#workspace). +## paquete npm -{@a provider} +El [administrador de paquetes npm](https://docs.npmjs.com/getting-started/what-is-npm) se usa para distribuir y cargar módulos y bibliotecas Angular. -## provider +Obtén más información acerca de cómo Angular usa [Paquetes npm](guide/npm-packages). -An object that implements one of the [`Provider`](api/core/Provider) interfaces. A provider object defines how to obtain an injectable dependency associated with a [DI token](#token). -An [injector](#injector) uses the provider to create a new instance of a dependency -for a class that requires it. +{@a scoped-package} -Angular registers its own providers with every injector, for services that Angular defines. -You can register your own providers for services that your app needs. +## paquetes con scope -See also [service](#service), [dependency injection](#di). +Una forma de agrupar [paquetes npm](guide/npm-packages) relacionados. +Los NgModules se entregan dentro de paquetes con ámbito cuyos nombres comienzan con Angular _nombre del scope_ `@angular`. Por ejemplo, `@angular/core`, `@angular/common`, `@angular/forms`, y `@angular/router`. -Learn more in [Dependency Injection](guide/dependency-injection). +Importa un paquete con alcance de la misma manera que se importa un paquete normal. + -{@a Q} + -{@a R} +{@a pipe} -{@a reactive-forms} +## pipe -## reactive forms +Una clase precedida por el decorador `@Pipe{}` y que define una función que transforma los valores de entrada en valores de salida para mostrar en una [vista](#view). Angular define varias pipes y puedes definir nuevas pipes. -A framework for building Angular forms through code in a component. -The alternative is a [template-driven form](#template-driven-forms). +Obtén más información en [Pipes](guide/pipes). -When using reactive forms: +{@a platform} -* The "source of truth", the form model, is defined in the component class. -* Validation is set up through validation functions rather than validation directives. -* Each control is explicitly created in the component class by creating a `FormControl` instance manually or with `FormBuilder`. -* The template input elements do *not* use `ngModel`. -* The associated Angular directives are prefixed with `form`, such as `formControl`, `formGroup`, and `formControlName`. +## plataforma -The alternative is a template-driven form. For an introduction and comparison of both forms approaches, see [Introduction to Angular Forms](guide/forms-overview). +En terminología Angular, una plataforma es el contexto en el que se ejecuta una aplicación Angular. +La plataforma más común para aplicaciones Angular es un navegador web, pero también puede ser un sistema operativo para un dispositivo móvil o un servidor web. -{@a resolver} +Los paquetes `@angular/platform-*` proporcionan soporte para las diversas plataformas de tiempo de ejecución Angular. Estos paquetes permiten que las aplicaciones que utilizan `@angular/core` y `@angular/common` se ejecuten en diferentes entornos al proporcionar la implementación para recopilar la entrada del usuario y representar las IU para la plataforma dada. El aislamiento de la funcionalidad específica de la plataforma permite al desarrollador hacer un uso independiente de la plataforma del resto del marco. -## resolver +- Cuando se ejecuta en un navegador web, [`BrowserModule`](api/platform-browser/BrowserModule) se importa desde el paquete `platform-browser`, y admite servicios que simplifican la seguridad y el procesamiento de eventos, y permite que las aplicaciones accedan al navegador- características específicas, como interpretar la entrada del teclado y controlar el título del documento que se muestra. Todas las aplicaciones que se ejecutan en el navegador utilizan el mismo servicio de plataforma. -A class that implements the [Resolve](api/router/Resolve "API reference") interface (or a function with the same signature as the [resolve() method](api/router/Resolve#resolve "API reference")) that you use to produce or retrieve data that is needed before navigation to a requested route can be completed. +- Cuando se utiliza [renderizado del lado del servidor](#server-side-rendering) (SSR) el paquete [`platform-server`](api/platform-server) proporciona implementaciones de servidor web de`DOM`, `XMLHttpRequest`, y otras características de bajo nivel que no dependen de un navegador. -Resolvers run after all [route guards](#route-guard "Definition") for a route tree have been executed and have succeeded. +{@a template} -See an example of using a [resolve guard](guide/router-tutorial-toh#resolve-guard "Routing techniques tutorial") to retrieve dynamic data. +## plantilla -{@a route-guard} +Código que define cómo representar la [vista](#view) de un componente. -## route guard +Una plantilla combina HTML directo con sintaxis Angular [enlace de datos](#data-binding), [directivas](#directive),y [expresiones de plantilla](#template-expression) (construcciones lógicas). +Los elementos Angular insertan o calculan valores que modifican los elementos HTML antes de que se muestre la página. Obtén más información sobre el lenguaje de plantilla Angular en la guía [Sintaxis de plantilla](guide/template-syntax). -A method that controls navigation to a requested route in a routing application. -Guards determine whether a route can be activated or deactivated, and whether a lazy-loaded module can be loaded. +Una plantilla está asociada con una [clase de componente](#component) a través del [decorador](#decorator) `@Component()`. El código de la plantilla se puede proporcionar en línea, como el valor de la propiedad `template`, o en un archivo HTML separado vinculado a través de la propiedad`templateUrl`. -Learn more in the [Routing and Navigation](guide/router#preventing-unauthorized-access "Examples") guide. +Las plantillas adicionales, representadas por objetos `TemplateRef`, pueden definir vistas alternativas o _incrustadas_, a las que se puede hacer referencia desde múltiples componentes. +{@a polyfill} -{@a router} -{@a router-module} +## polyfill -## router +Un [paquete npm](guide/npm-packages) que cierra las brechas en la implementación de JavaScript de un navegador. +Consulta [Soporte del navegador](guide/browser-support) para ver polyfills que admiten funcionalidades particulares para plataformas particulares. -A tool that configures and implements navigation among states and [views](#view) within an Angular app. +{@a project} -The `Router` module is an [NgModule](#ngmodule) that provides the necessary service providers and directives for navigating through application views. A [routing component](#routing-component) is one that imports the `Router` module and whose template contains a `RouterOutlet` element where it can display views produced by the router. +## proyecto -The router defines navigation among views on a single page, as opposed to navigation among pages. It interprets URL-like links to determine which views to create or destroy, and which components to load or unload. It allows you to take advantage of [lazy loading](#lazy-load) in your Angular apps. +En la Angular CLI, una aplicación independiente o [biblioteca](#library) que se puede crear o modificar mediante un comando de la CLI. -To learn more, see [Routing and Navigation](guide/router). +Un proyecto, generado por [`ng new`](cli/new), contiene el conjunto de archivos de origen, recursos y archivos de configuración que necesita para desarrollar y probar la aplicación utilizando la CLI. Los proyectos también se pueden crear con los comandos `ng generate application` y `ng generate library`. -{@a router-outlet} +Obtén más información en [Estructura del archivo del proyecto](guide/file-structure). -## router outlet +El archivo [`angular.json`](guide/workspace-config) configura todos los proyectos en un [espacio de trabajo](#workspace). -A [directive](#directive) that acts as a placeholder in a routing component's template. Angular dynamically renders the template based on the current router state. +{@a content-projection} -{@a router-component} +## proyección de contenido -## routing component +Una forma de insertar contenido DOM desde fuera de un componente en la vista del componente en un lugar designado. -An Angular [component](#component) with a `RouterOutlet` directive in its template that displays views based on router navigations. +Para obtener más información, consultá [Respuesta a cambios en el contenido](guide/lifecycle-hooks#content-projection). -For more information, see [Routing and Navigation](guide/router). +{@a provider} -{@a rule} +## proveedor -## rule +Un objeto que implementa una de las interfaces [`Provider`](api/core/Provider). Un objeto proveedor define cómo obtener una dependencia inyectable asociada con un [token DI](#token). +Un [inyector](#injector) usa el proveedor para crear una nueva instancia de una dependencia para una clase que lo requiera. -In [schematics](#schematic), a function that operates on a [file tree](#file-tree) to create, delete, or modify files in a specific manner. +Angular registra sus propios proveedores con cada inyector, para los servicios que Angular define. +Puedes registrar sus propios proveedores para los servicios que su aplicación necesita. -{@a S} +Consulta también [servicio](#service), [inyección de dependencia](#di). -{@a schematic} +Obtén más información en [Inyección de dependencia](guide/dependency-injection). -## schematic +{@a entry-point} -A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code. -A schematic defines [rules](#rule) that operate on a virtual file system called a [tree](#file-tree). +## punto de entrada -The [Angular CLI](#cli) uses schematics to generate and modify [Angular projects](#project) and parts of projects. +Un [módulo de JavaScript](#module) que está destinado a ser importado por un usuario de [un +paquete npm](guide/npm-packages). Un módulo de punto de entrada suele reexportarse símbolos de otros módulos internos. Un paquete puede contener múltiples puntos de entrada. Por ejemplo, el paquete `@angular/core` Un módulo de punto de entrada suele reexportarse +símbolos de otros módulos internos. Un paquete puede contener múltiples puntos de entrada. Por ejemplo, el paquete `@angular/core` y +`@angular/core/testing`. -* Angular provides a set of schematics for use with the CLI. See the [Angular CLI command reference](cli). The [`ng add`](cli/add) command runs schematics as part of adding a library to your project. The [`ng generate`](cli/generate) command runs schematics to create apps, libraries, and Angular code constructs. +{@a Q} -* [Library](#library) developers can create schematics that enable the Angular CLI to add and update their published libraries, and to generate artifacts the library defines. -Add these schematics to the npm package that you use to publish and share your library. +{@a R} -For more information, see [Schematics](guide/schematics) and [Integrating Libraries with the CLI](guide/creating-libraries#integrating-with-the-cli). +{@a rule} -{@a schematics-cli} +## regla -## Schematics CLI +En [esquemas](#schematic), una función que opera en un [árbol de archivos](#file-tree) para crear, eliminar o modificar archivos de una manera específica. -Schematics come with their own command-line tool. -Using Node 6.9 or above, install the Schematics CLI globally: +{@a server-side-rendering} - -npm install -g @angular-devkit/schematics-cli - +## renderizado del lado del servidor -This installs the `schematics` executable, which you can use to create a new schematics [collection](#collection) with an initial named schematic. The collection folder is a workspace for schematics. You can also use the `schematics` command to add a new schematic to an existing collection, or extend an existing schematic. +Una técnica que genera páginas de aplicaciones estáticas en el servidor, y puede generar y servir esas páginas en respuesta a las solicitudes de los navegadores. +También puede pregenerar páginas como archivos HTML que servirá más adelante. -{@a scoped-package} +Esta técnica puede mejorar el rendimiento en dispositivos móviles y de baja potencia y mejorar la experiencia del usuario al mostrar una primera página estática rápidamente mientras se carga la aplicación del lado del cliente. +La versión estática también puede hacer que su aplicación sea más visible para los rastreadores web. -## scoped package +Puedes preparar fácilmente una aplicación para la representación del lado del servidor utilizando la [CLI](#cli) para ejecutar la herramienta [Angular Universal](#universal) utilizando el [esquema](#schematic) `@nguniversal/express-engine`. -A way to group related [npm packages](guide/npm-packages). -NgModules are delivered within scoped packages whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`. +{@a resolver} -Import a scoped package in the same way that you import a normal package. +## resolver - +Una clase que implementa la interfaz [Resolve](api/router/Resolve "Referencia API") (o una función con la misma firma que el método [resolve()](api/router/Resolve#resolve "Referencia API")) que utiliza para producir o recuperar los datos necesarios antes de poder completar la navegación a una ruta solicitada. - +Los resolvers se ejecutan después de que todos los [guards de ruta](#route-guard "Definición") para un árbol de ruta se hayan ejecutado y hayan tenido éxito. -{@a server-side-rendering} +Ver un ejemplo de uso de [resolve guard](guide/router-tutorial-toh#resolve-guard "Tutorial de técnicas de enrutamiento") para recuperar datos dinámicos. -## server-side rendering +{@a router-outlet} -A technique that generates static application pages on the server, and can generate and serve those pages in response to requests from browsers. -It can also pre-generate pages as HTML files that you serve later. +## router outlet -This technique can improve performance on mobile and low-powered devices and improve the user experience by showing a static first page quickly while the client-side app is loading. -The static version can also make your app more visible to web crawlers. +Una [directiva](#directive) que actúa como marcador de posición en la plantilla de un componente de enrutamiento. Angular renderiza dinámicamente la plantilla en función del estado actual del enrutador. -You can easily prepare an app for server-side rendering by using the [CLI](#cli) to run the [Angular Universal](#universal) tool, using the `@nguniversal/express-engine` [schematic](#schematic). +{@a S} +{@a output} -{@a service} +## salida -## service +Al definir una [directiva](#directive), el decorador `@Output{}` en una propiedad directiva +hace que esa propiedad esté disponible como _objetivo_ de [enlace de evento](guide/event-binding). +La secuencia de eventos _fuera_ de esta propiedad al receptor identificado +en la [expresión de plantilla](#template-expression) a la derecha del signo igual. -In Angular, a class with the [@Injectable()](#injectable) decorator that encapsulates non-UI logic and code that can be reused across an application. -Angular distinguishes components from services to increase modularity and reusability. +Obtén más información en [Propiedades de entrada y salida](guide/inputs-outputs). -The `@Injectable()` metadata allows the service class to be used with the [dependency injection](#di) mechanism. -The injectable class is instantiated by a [provider](#provider). -[Injectors](#injector) maintain lists of providers and use them to provide service instances when they are required by components or other services. +{@a app-shell} -To learn more, see [Introduction to Services and Dependency Injection](guide/architecture-services). +## shell de aplicación -{@a structural-directive} -{@a structural-directives} +El shell de aplicación es una forma de representar una parte de su aplicación a través de una ruta en el momento de la compilación. +Esto brinda a los usuarios una primera visualización significativa de su aplicación que aparece rápidamente porque el navegador puede renderizar HTML y CSS estáticos sin la necesidad de inicializar JavaScript. -## structural directives +Obtén más información en [Modelo Shell de Aplicación](https://developers.google.com/web/fundamentals/architecture/app-shell). -A category of [directive](#directive) that is responsible for shaping HTML layout by modifying the DOM—that is, adding, removing, or manipulating elements and their children. +Puedes usar Angular CLI para [generar](cli/generate#appshell) un shell de aplicación. +Esto puede mejorar la experiencia del usuario al iniciar rápidamente una página estática renderizada (un esqueleto común a todas las páginas) mientras el navegador descarga la versión completa del cliente y cambia automáticamente después de que se carga el código. -To learn more, see [Structural Directives](guide/structural-directives). +Ver también [Service Worker y PWA](guide/service-worker-intro). -{@a subscriber} +{@a service} -## subscriber +## Servicio -A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](#observable). +En Angular, una clase con el decorador [@Injectable()](#injectable) que encapsula la lógica y el código no UI que se pueden reutilizar en una aplicación. +Angular distingue los componentes de los servicios para aumentar la modularidad y la reutilización. -The act of subscribing to an observable triggers its execution, associates callbacks with it, and creates a `Subscription` object that lets you unsubscribe. +Los metadatos `@Injectable()` permiten que la clase de servicio se use con el mecanismo [inyección de dependencia](#di). +La clase inyectable es instanciada por un [proveedor](#provider). +Los [Inyectores](#injector) mantienen listas de proveedores y los utilizan para proporcionar instancias de servicio cuando son requeridos por componentes u otros servicios. -The `subscribe()` method takes a JavaScript object (called an [observer](#observer)) with up to three callbacks, one for each type of notification that an observable can deliver: +Obtén más información en [Introducción a los servicios y la inyección de dependencias](guide/architecture-services). -* The `next` notification sends a value such as a number, a string, or an object. -* The `error` notification sends a JavaScript Error or exception. -* The `complete` notification doesn't send a value, but the handler is called when the call completes. Scheduled values can continue to be returned after the call completes. +{@a subscriber} -{@a T} +## suscriptor -{@a target} +Una función que define cómo obtener o generar valores o mensajes para publicar. Esta función se ejecuta cuando un consumidor llama al método `subscribe()` de un [observable](#observable). -## target +El acto de suscribirse a un observable desencadena su ejecución, asocia devoluciones de llamada con él y crea un objeto de `Subscription` que le permite darse de baja. -A buildable or runnable subset of a [project](#project), configured as an object in the [workspace configuration file](guide/workspace-config#project-tool-configuration-options), and executed by an [Architect](#architect) [builder](#builder). +El método `subscribe ()` toma un objeto JavaScript (llamado [observador](#observer)) con hasta tres devoluciones de llamada, una para cada tipo de notificación que un observable puede entregar: -In the `angular.json` file, each project has an "architect" section that contains targets which configure builders. Some of these targets correspond to [CLI commands](#cli), such as `build`, `serve`, `test`, and `lint`. +- La notificación `next` envía un valor como un número, una cadena o un objeto. +- La notificación `error` envía un error de JavaScript o una excepción. +- La notificación `complete` no envía un valor, pero se llama al controlador cuando finaliza la llamada. Los valores programados pueden continuar devolviéndose después de que se complete la llamada. -For example, the Architect builder invoked by the `ng build` command to compile a project uses a particular build tool, and has a default configuration whose values can be overridden on the command line. The `build` target also defines an alternate configuration for a "production" build, that can be invoked with the `--prod` flag on the `build` command. +{@a T} -The Architect tool provides a set of builders. The [`ng new` command](cli/new) provides a set of targets for the initial application project. The [`ng generate application`](cli/generate#application) and [`ng generate library`](cli/generate#library) commands provide a set of targets for each new [project](#project). These targets, their options and configurations, can be customized to meet the needs of your project. For example, you may want to add a "staging" or "testing" configuration to a project's "build" target. +{@a target} -You can also define a custom builder, and add a target to the project configuration that uses your custom builder. You can then run the target using the [`ng run`](cli/run) CLI command. +## target -{@a template} +Un subconjunto construible o ejecutable de un [proyecto](#project), configurado como un objeto en el [archivo de configuración del espacio de trabajo](guide/workspace-config#project-tool-configuration-options), y ejecutado por un [Architect](#architect) [constructor](#builder). -## template +En el archivo `angular.json`, cada proyecto tiene una sección de "architect" que contiene targets que configuran los constructores. Algunos de estos targets corresponden a [comandos CLI](#cli), como `build`, `serve`, `test` y `lint`. -Code that defines how to render a component's [view](#view). +Por ejemplo, el constructor de Architect invocado por el comando `ng build` para compilar un proyecto usa una herramienta de construcción particular, y tiene una configuración predeterminada cuyos valores pueden ser anulados en la línea de comando. El objetivo `build` también define una configuración alternativa para una compilación "producción", que se puede invocar con el indicador `--prod` en el comando `build`. -A template combines straight HTML with Angular [data-binding](#data-binding) syntax, [directives](#directive), -and [template expressions](#template-expression) (logical constructs). -The Angular elements insert or calculate values that modify the HTML elements before the page is displayed. Learn more about Angular template language in the [Template Syntax](guide/template-syntax) guide. +Por ejemplo, el constructor de la herramienta Architect proporciona un conjunto de constructores. El comando [`ng new`](cli/new) proporciona un conjunto de targets para el proyecto de aplicación inicial. Los comandos [`ng generate application`](cli/generate#application) y [`ng generate library`](cli/generate#library) proporcionan un conjunto de targets para cada nuevo [proyecto](#project). Estos targets, sus opciones y configuraciones, se pueden personalizar para satisfacer las necesidades de su proyecto. Por ejemplo, es posible que desee agregar una configuración de "puesta en escena" o "prueba" al objetivo de "compilación" de un proyecto. -A template is associated with a [component class](#component) through the `@Component()` [decorator](#decorator). The template code can be provided inline, as the value of the `template` property, or in a separate HTML file linked through the `templateUrl` property. +También puedes definir un generador personalizado y agregar un target a la configuración del proyecto que utiliza su generador personalizado. Luego puede ejecutar el target utilizando el comando [`ng run`](cli/run). -Additional templates, represented by `TemplateRef` objects, can define alternative or *embedded* views, which can be referenced from multiple components. +{@a case-conventions} +{@a case-types} +{@a dash-case} +{@a camelcase} +{@a kebab-case} -{@a template-driven-forms} +## tipos de casos -## template-driven forms +Angular usa convenciones de mayúsculas para distinguir los nombres de varios tipos, como se describe en la [sección de pautas de nomenclatura](guide/styleguide#02-01) de la Guía de estilo. Aquí hay un resumen de los tipos de casos: -A format for building Angular forms using HTML forms and input elements in the view. -The alternative format uses the [reactive forms](#reactive-forms) framework. +- camelCase: símbolos, propiedades, métodos, nombres de pipelines, selectores de directivas sin componentes, constantes. + El caso de camelcase estándar o inferior usa minúsculas en la primera letra del artículo. Por ejemplo, "selectedHero". -When using template-driven forms: +- UpperCamelCase (o PascalCase): nombres de clase, incluidas las clases que definen componentes, interfaces, NgModules, directivas y tuberías, + La mayúscula del camelcase usa mayúscula en la primera letra del artículo. Por ejemplo, "HeroListComponent". -* The "source of truth" is the template. The validation is defined using attributes on the individual input elements. -* [Two-way binding](#data-binding) with `ngModel` keeps the component model synchronized with the user's entry into the input elements. -* Behind the scenes, Angular creates a new control for each input element, provided you have set up a `name` attribute and two-way binding for each input. -* The associated Angular directives are prefixed with `ng` such as `ngForm`, `ngModel`, and `ngModelGroup`. +- dash-case (o "kebab-case"): Parte descriptiva de los nombres de archivos, selectores de componentes. Por ejemplo, "app-hero-list". -The alternative is a reactive form. For an introduction and comparison of both forms approaches, see [Introduction to Angular Forms](guide/forms-overview). +- underscore_case (o "snake_case"): No se usa típicamente en Angular. El caso de serpiente utiliza palabras relacionadas con guiones bajos. + Por ejemplo, "convert_link_mode". -{@a template-expression} +- UPPER_UNDERSCORE_CASE (o UPPER_SNAKE_CASE, o SCREAMING_SNAKE_CASE): Tradicional para constantes (aceptable, pero prefiere camelCase). + Las mayúsculas y minúsculas usan palabras en mayúsculas conectadas con guiones bajos. Por ejemplo, "FIX_ME". -## template expression +{@a di-token} -A TypeScript-like syntax that Angular evaluates within a [data binding](#data-binding). +## token DI -Read about how to write template expressions in the [template expressions](guide/interpolation#template-expressions) section of the [Interpolation](guide/interpolation) guide. +Un token de búsqueda asociado con una dependencia [proveedor](#provider), para usar con el sistema [inyección de dependencia](#di). {@a template-reference-variable} @@ -956,148 +957,98 @@ For more information, see the [Template reference variable](guide/template-refer ## token -An opaque identifier used for efficient table lookup. In Angular, a [DI token](#di-token) is used to find [providers](#provider) of dependencies in the [dependency injection](#di) system. +Un identificador opaco utilizado para la búsqueda eficiente de tablas. En Angular, se utiliza un [token DI](#di-token) para encontrar [proveedores](#provider) de dependencias en el sistema [inyección de dependencia](#di). {@a transpile} ## transpile -The translation process that transforms one version of JavaScript to another version; for example, down-leveling ES2015 to the older ES5 version. +El proceso de traducción que transforma una versión de JavaScript en otra versión; por ejemplo, bajar el nivel de ES2015 a la versión anterior de ES5. {@a file-tree} ## tree -In [schematics](#schematic), a virtual file system represented by the `Tree` class. -Schematic [rules](#rule) take a tree object as input, operate on them, and return a new tree object. +En [esquemas](#schematic), un sistema de archivos virtual representado por la clase `Tree`. +Las [reglas](#rule) esquemáticas toman un objeto de árbol como entrada, operan en ellas y devuelven un nuevo objeto de árbol. {@a typescript} ## TypeScript -A programming language based on JavaScript that is notable for its optional typing system. -TypeScript provides compile-time type checking and strong tooling support (such as -code completion, refactoring, inline documentation, and intelligent search). -Many code editors and IDEs support TypeScript either natively or with plug-ins. - -TypeScript is the preferred language for Angular development. -Read more about TypeScript at [typescriptlang.org](http://www.typescriptlang.org/). - -## TypeScript configuration file - -A file specifies the root files and the compiler options required to compile a TypeScript project. For more information, see [TypeScript configuration](/guide/typescript-configuration). +Un lenguaje de programación basado en JavaScript que destaca por su sistema de escritura opcional. +TypeScript proporciona verificación de tipos en tiempo de compilación y un fuerte soporte de herramientas (como +terminación de código, refactorización, documentación en línea y búsqueda inteligente). +Muchos editores de código e IDE admiten TypeScript de forma nativa o con complementos. +TypeScript es el lenguaje preferido para el desarrollo Angular. +Lee más sobre TypeScript en [typescriptlang.org](http://www.typescriptlang.org/). {@a U} -{@a unidirectional-data-flow} - -## unidirectional data flow - -A data flow model where the component tree is always checked for changes in one direction (parent to child), which prevents cycles in the change detection graph. - -In practice, this means that data in Angular flows downward during change detection. -A parent component can easily change values in its child components because the parent is checked first. -A failure could occur, however, if a child component tries to change a value in its parent during change detection (inverting the expected data flow), because the parent component has already been rendered. -In development mode, Angular throws the `ExpressionChangedAfterItHasBeenCheckedError` error if your app attempts to do this, rather than silently failing to render the new value. - -To avoid this error, a [lifecycle hook](guide/lifecycle-hooks) method that seeks to make such a change should trigger a new change detection run. The new run follows the same direction as before, but succeeds in picking up the new value. - {@a universal} ## Universal -A tool for implementing [server-side rendering](#server-side-rendering) of an Angular application. -When integrated with an app, Universal generates and serves static pages on the server in response to requests from browsers. -The initial static page serves as a fast-loading placeholder while the full application is being prepared for normal execution in the browser. +Una herramienta para implementar [renderizado del lado del servidor](#server-side-rendering) de una aplicación Angular. +Cuando se integra con una aplicación, Universal genera y sirve páginas estáticas en el servidor en respuesta a las solicitudes de los navegadores. +La página estática inicial sirve como marcador de posición de carga rápida mientras se prepara la aplicación completa para la ejecución normal en el navegador. -To learn more, see [Angular Universal: server-side rendering](guide/universal). +Para obtener más información, consulta [Angular Universal: representación del lado del servidor](guide/universal). {@a V} -{@a view} - -## view +{@a form-validation} -The smallest grouping of display elements that can be created and destroyed together. -Angular renders a view under the control of one or more [directives](#directive). +## validación de formulario -A [component](#component) class and its associated [template](#template) define a view. -A view is specifically represented by a `ViewRef` instance associated with a component. -A view that belongs immediately to a component is called a *host view*. -Views are typically collected into [view hierarchies](#view-tree). +Una comprobación que se ejecuta cuando cambian los valores del formulario e informa si los valores dados son correctos y completos, de acuerdo con las restricciones definidas. Se aplican formas reactivas [funciones de validación](guide/form-validation#adding-to-reactive-forms). Los formularios basados en plantillas usan [directivas de validación](guide/form-validation#adding-to-template-driven-forms). -Properties of elements in a view can change dynamically, in response to user actions; -the structure (number and order) of elements in a view can't. -You can change the structure of elements by inserting, moving, or removing nested views within their view containers. +Obtén más información en [Validación de formularios](guide/form-validation). -View hierarchies can be loaded and unloaded dynamically as the user navigates through the application, typically under the control of a [router](#router). +{@a view} -{@a ve} +## vista -## View Engine +La agrupación más pequeña de elementos de visualización que se pueden crear y destruir juntos. +Angular representa una vista bajo el control de una o más [directivas](#directive). -The compilation and rendering pipeline used by Angular before version 9. Compare [Ivy](#ivy). +Una clase [componente](#component) y su [plantilla](#template) asociada definen una vista. +Una vista está representada específicamente por una instancia `ViewRef` asociada con un componente. +Una vista que pertenece inmediatamente a un componente se llama _vista de host_. +Las vistas se suelen recopilar en [jerarquías de vista](#view-tree). +Las propiedades de los elementos en una vista pueden cambiar dinámicamente, en respuesta a las acciones del usuario; la estructura (número y orden) de elementos en una vista no puede. +Puedes cambiar la estructura de los elementos insertando, moviendo o eliminando vistas anidadas dentro de sus contenedores de vistas. -{@a view-tree} +Las jerarquías de vista se pueden cargar y descargar dinámicamente a medida que el usuario navega por la aplicación, generalmente bajo el control de un [enrutador](#router). -## view hierarchy +{@a ve} -A tree of related views that can be acted on as a unit. The root view is a component's *host view*. A host view can be the root of a tree of *embedded views*, collected in a *view container* (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular [change detection](#change-detection). +## View Engine -The view hierarchy doesn't imply a component hierarchy. Views that are embedded in the context of a particular hierarchy can be host views of other components. Those components can be in the same NgModule as the hosting component, or belong to other NgModules. +La canalización de compilación y representación utilizada por Angular antes de la versión 9. Comparar con [Ivy](#ivy). {@a W} {@a web-component} ## web component -See [custom element](#custom-element). - -{@a workspace} - -## workspace - -A collection of Angular [projects](#project) (that is, applications and libraries) powered by the [Angular CLI] (#cli) that are typically co-located in a single source-control repository (such as [git](https://git-scm.com/)). - -The [CLI](#cli) [`ng new` command](cli/new) creates a file system directory (the "workspace root"). -In the workspace root, it also creates the workspace [configuration file](#configuration) (`angular.json`) and, by default, an initial application project with the same name. - -Commands that create or operate on apps and libraries (such as `add` and `generate`) must be executed from within a workspace folder. - -For more information, see [Workspace Configuration](guide/workspace-config). - -{@a cli-config} - -{@a config} - -## workspace configuration - -A file named `angular.json` at the root level of an Angular [workspace](#workspace) provides workspace-wide and project-specific configuration defaults for build and development tools that are provided by or integrated with the [Angular CLI](#cli). - -For more information, see [Workspace Configuration](guide/workspace-config). - -Additional project-specific configuration files are used by tools, such as `package.json` for the [npm package manager](#npm-package), `tsconfig.json` for [TypeScript transpilation](#transpile), and `tslint.json` for [TSLint](https://palantir.github.io/tslint/). - -For more information, see [Workspace and Project File Structure](guide/file-structure). +Ver [elementos personalizados](#custom-element). {@a X} - {@a Y} - {@a Z} {@a zone} -## zone +## zona -An execution context for a set of asynchronous tasks. Useful for debugging, profiling, and testing apps that include asynchronous operations such as event processing, promises, and calls to remote servers. +Un contexto de ejecución para un conjunto de tareas asincrónicas. Útil para depurar, perfilar y probar aplicaciones que incluyen operaciones asincrónicas como el procesamiento de eventos, promesas y llamadas a servidores remotos. -An Angular app runs in a zone where it can respond to asynchronous events by checking for data changes and updating the information it displays by resolving [data bindings](#data-binding). +Una aplicación Angular se ejecuta en una zona donde puede responder a eventos asincrónicos al verificar los cambios de datos y actualizar la información que muestra al resolver [enlaces de datos](#data-binding). -A zone client can take action before and after an async operation completes. +Un cliente de zona puede tomar medidas antes y después de que se complete una operación asincrónica. -Learn more about zones in this -[Brian Ford video](https://www.youtube.com/watch?v=3IqtmUscE_U). +Obtén más información sobre las zonas en este [Video de Brian Ford](https://www.youtube.com/watch?v=3IqtmUscE_U). diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md index ba0d17526256..5d56815072c6 100644 --- a/aio/content/guide/i18n.md +++ b/aio/content/guide/i18n.md @@ -39,7 +39,7 @@ To prepare your app for translations, you should have a basic understanding of t * [Templates](guide/glossary#template "Definition of a template") * [Components](guide/glossary#component "Definition of a component") -* [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI") command-line tool for managing the Angular development cycle +* [Angular CLI](guide/glossary#cli "Definition of CLI") command-line tool for managing the Angular development cycle * [Extensible Markup Language (XML)](https://www.w3.org/XML/ "W3C: Extensible Markup Language (XML)") used for translation files ## Steps to localize your app @@ -534,13 +534,13 @@ The following example shows both translation units after translating: ## Merge translations into the app -To merge the completed translations into the app, use the [Angular CLI](guide/glossary#command-line-interface-cli "Definition of CLI") to build a copy of the app's distributable files for each locale. +To merge the completed translations into the app, use the [Angular CLI](guide/glossary#cli "Definition of CLI") to build a copy of the app's distributable files for each locale. The build process replaces the original text with translated text, and sets the `LOCALE_ID` token for each distributable copy of the app. It also loads and registers the locale data. After merging, you can serve each distributable copy of the app using server-side language detection or different subdirectories, as described in the next section about [deploying multiple locales](#deploy-locales). -The build process uses [ahead-of-time (AOT) compilation](guide/glossary#ahead-of-time-aot-compilation) to produce a small, fast, +The build process uses [ahead-of-time (AOT) compilation](guide/glossary#aot) to produce a small, fast, ready-to-run app. With Ivy in Angular version 9, AOT is used by default for both development and production builds, and AOT is required to localize component templates. @@ -610,7 +610,7 @@ To use your locale definition in the build configuration, use the `"localize"` o

-Note: [Ahead-of-time (AOT) compilation](guide/glossary#ahead-of-time-aot-compilation) is required to localize component templates. +Note: [Ahead-of-time (AOT) compilation](guide/glossary#aot) is required to localize component templates. If you changed this setting, set `"aot"` to `true` in order to use AOT.

diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md index 27396d9e16b6..68ce23394067 100644 --- a/aio/content/guide/lifecycle-hooks.md +++ b/aio/content/guide/lifecycle-hooks.md @@ -457,7 +457,7 @@ The object reference did not change when the value of its own `name` property ch ### Responding to view changes -As Angular traverses the [view hierarchy](guide/glossary#view-hierarchy "Definition of view hierarchy definition") during change detection, it needs to be sure that a change in a child does not attempt to cause a change in its own parent. Such a change would not be rendered properly, because of how [unidirectional data flow](guide/glossary#unidirectional-data-flow "Definition") works. +As Angular traverses the [view hierarchy](guide/glossary#view-tree "Definition of view hierarchy definition") during change detection, it needs to be sure that a change in a child does not attempt to cause a change in its own parent. Such a change would not be rendered properly, because of how [unidirectional data flow](guide/glossary#unidirectional-data-flow "Definition") works. If you need to make a change that inverts the expected data flow, you must trigger a new change detection cycle to allow that change to be rendered. The examples illustrate how to make such changes safely. diff --git a/aio/content/guide/pipes.md b/aio/content/guide/pipes.md index 0d28ab4aa462..837765f5bbc5 100644 --- a/aio/content/guide/pipes.md +++ b/aio/content/guide/pipes.md @@ -146,7 +146,7 @@ You can then use your custom pipe in template expressions, the same way you use ### Marking a class as a pipe -To mark a class as a pipe and supply configuration metadata, apply the [`@Pipe`](/api/core/Pipe "API reference for Pipe") [decorator](/guide/glossary#decorator--decoration "Definition for decorator") to the class. +To mark a class as a pipe and supply configuration metadata, apply the [`@Pipe`](/api/core/Pipe "API reference for Pipe") [decorator](/guide/glossary#decorator "Definition for decorator") to the class. Use [UpperCamelCase](guide/glossary#case-types "Definition of case types") (the general convention for class names) for the pipe class name, and [camelCase](guide/glossary#case-types "Definition of case types") for the corresponding `name` string. Do not use hyphens in the `name`. For details and more examples, see [Pipe names](guide/styleguide#pipe-names "Pipe names in the Angular coding style guide"). diff --git a/aio/content/start/start-data.md b/aio/content/start/start-data.md index 74701016935a..3a5a3cf19643 100644 --- a/aio/content/start/start-data.md +++ b/aio/content/start/start-data.md @@ -12,7 +12,7 @@ This page guides you through creating the shopping cart in three phases: {@a services} ## Services -Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection-di "Dependency injection definition"). +Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's [dependency injection system](guide/glossary#dependency-injection "Dependency injection definition"). Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods. From a9920d6776489f289cbc2afad4ac461de4cb162b Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Sat, 15 Aug 2020 21:48:07 -0400 Subject: [PATCH 127/253] =?UTF-8?q?docs:=20enlace=20a=20las=20gu=C3=ADas?= =?UTF-8?q?=20de=20MDN=20en=20espa=C3=B1ol?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - use el enlace CoC correcto --- aio/content/marketing/docs.md | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/aio/content/marketing/docs.md b/aio/content/marketing/docs.md index 0d9248498d4d..293ef31efa3d 100644 --- a/aio/content/marketing/docs.md +++ b/aio/content/marketing/docs.md @@ -1,8 +1,10 @@

Introducción a la Documentación de Angular

-Angular es un framework de diseño de aplicaciones y plataforma de desarrollo para crear aplicaciones de una sola página eficientes y sofisticadas +Angular es un framework de diseño de aplicaciones y plataforma de desarrollo para crear aplicaciones de una +sola página eficientes y sofisticadas -Esta documentación de Angular te ayuda a aprender y usar el framework y la plataforma de desarrollo, desde su primera aplicación hasta la optimización de aplicaciones complejas de una sola página, para empresas. +Esta documentación de Angular te ayuda a aprender y usar el framework y la plataforma de desarrollo, desde su +primera aplicación hasta la optimización de aplicaciones complejas de una sola página, para empresas. Los tutoriales y guías incluyen ejemplos descargables para acelerar tus proyectos. @@ -36,22 +38,34 @@ Los tutoriales y guías incluyen ejemplos descargables para acelerar tus proyect ## Supuestos -Esta documentación asume que estas familiarizado con [HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML "Aprende HTML"), [CSS](https://developer.mozilla.org/docs/Learn/CSS/First_steps "Aprende CSS"), [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript "Aprende JavaScript"), -y algunas herramientas de los [últimos estándares javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Language_Resources "Últimos estándares JavaScript"), como son las [clases](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes "Clases ES2015") y [modulos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import "Modulos ES2015"). +Esta documentación asume que estas familiarizado con +[HTML](https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML "Aprende HTML"), +[CSS](https://developer.mozilla.org/es/docs/Learn/CSS/First_steps "Aprende CSS"), +[JavaScript](https://developer.mozilla.org/es/docs/Web/JavaScript/Una_re-introducci%C3%B3n_a_JavaScript "Aprende JavaScript"), +y algunas herramientas de los +[últimos estándares javascript](https://developer.mozilla.org/es/docs/Web/JavaScript/Language_Resources "Últimos estándares JavaScript"), +como son las [clases](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes "Clases ES2015") +y [modulos](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/import "Modulos ES2015"). Los ejemplos de código son escritos usando [TypeScript](https://www.typescriptlang.org/ "TypeScript"). -La mayor parte del código Angular se puede escribir tan solo con la versión más reciente de JavaScript, usando [tipos](https://www.typescriptlang.org/docs/handbook/classes.html "Tipos TypeScript") para inyección de dependencia, y usando [decoradores](https://www.typescriptlang.org/docs/handbook/decorators.html "Decoradores") para metadatos. +La mayor parte del código Angular se puede escribir tan solo con la versión más reciente de JavaScript, usando +[tipos](https://www.typescriptlang.org/docs/handbook/classes.html "Tipos TypeScript") para inyección de +dependencia, y usando [decoradores](https://www.typescriptlang.org/docs/handbook/decorators.html "Decoradores") +para metadatos. ## Retrolimentación

Puedes sentarte con nosotros!

-Queremos saber de ti. [Informa problemas o envía sugerencias para nueva documentación.](https://github.com/angular-hispano/angular/issues/new/choose "Repositorio GitHub de Angular, form para nuevo issue") +Queremos saber de ti. +[Informa problemas o envía sugerencias para nueva documentación.](https://github.com/angular-hispano/angular/issues/new/choose "Repositorio GitHub de Angular, form para nuevo issue") -Colabora con la documentación de Angular creando [pull requests](https://github.com/angular-hispano/angular/pulls "Angular Github pull requests") +Colabora con la documentación de Angular creando +[pull requests](https://github.com/angular-hispano/angular/pulls "Angular Github pull requests") en el repositorio Github de Angular en español. Mira [Colaborando a Angular](https://github.com/angular-hispano/angular/blob/master/CONTRIBUTING.md "Guía de Colaboración") para obtener información sobre las pautas de envío de nuevas colaboraciones. Nuestra comunidad valora la comunicación respetuosa y solidaria. -Consulta y adhierete al [Código de Conducta](https://github.com/angular-hispano/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md "Código de Conducta del Colaborador"). +Consulta y adhierete al +[Código de Conducta](https://angular.lat/coc "Código de Conducta del comunidad"). From a4912ff29719356726e39d39b36c9994506dbfe3 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Sat, 15 Aug 2020 21:28:33 -0400 Subject: [PATCH 128/253] =?UTF-8?q?docs:=20hacer=20que=20el=20archivo=20RE?= =?UTF-8?q?ADME.md=20sea=20m=C3=A1s=20aplicable=20a=20este=20repositorio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - aclarar que el trabajo de bugs / características debe realizarse upstream - cambiar los enlaces para que apunten dentro del repositorio en lugar de a la web --- README.en.md | 26 ++++++++++++++++++++++++++ README.md | 30 +++++++++++++++--------------- 2 files changed, 41 insertions(+), 15 deletions(-) create mode 100644 README.en.md diff --git a/README.en.md b/README.en.md new file mode 100644 index 000000000000..846270ca0429 --- /dev/null +++ b/README.en.md @@ -0,0 +1,26 @@ +[![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/workflows/angular/tree/master) +[![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core) + + +# Angular + +Angular is a development platform for building mobile and desktop web applications using TypeScript/JavaScript and other languages. + +## Quickstart + +[Get started in 5 minutes][quickstart]. + +## Changelog + +[Learn about the latest improvements][changelog]. + +## Want to help? + +Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our +guidelines for [contributing][contributing] and then check out one of our issues in the [hotlist: community-help](https://github.com/angular/angular/labels/hotlist%3A%20community-help). + +[contributing]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md +[quickstart]: https://angular.io/start +[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md +[ng]: https://angular.io diff --git a/README.md b/README.md index 81e9fa455d60..e8eb2134fa14 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,25 @@ -[![CircleCI](https://circleci.com/gh/angular/angular/tree/master.svg?style=shield)](https://circleci.com/gh/angular/workflows/angular/tree/master) -[![Join the chat at https://gitter.im/angular/angular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/angular/angular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) -[![npm version](https://badge.fury.io/js/%40angular%2Fcore.svg)](https://www.npmjs.com/@angular/core) +# Angular en español +Angular es una plataforma de desarrollo para construir aplicaciones web y móviles que usa +TypeScript/JavaScript y otros lenguajes de programación. -# Angular +## ¿Quieres ayudar? -Angular es una plataforma de desarrollo para construir aplicaciones web y móviles que usa TypeScript/JavaScript y otros lenguajes de programación. +### Documentación en español -## Guía rápida +¿Quieres mejorar la documentación? ¡Excelente! Lee nuestras pautas para +[colaborar](CONTRIBUTING.md) y luego revisa algunos de nuestras +[issues](https://github.com/angular-hispano/angular/issues). -[Comienza a usarlo en 5 minutos][quickstart]. +### El framework -## Registro de cambios (Changelog) +La colaboración para corregir errores y agregar funciones en el framework debe realizarse en inglés a través +del repositorio [angular/angular](https://github.com/angular/angular) upstream. -[Últimas mejoras realizadas][changelog]. +## Guía rápida -## ¿Quieres ayudar? +[Comienza a usarlo en 5 minutos](https://docs.angular.lat/start). -¿Quieres encontrar fallos, colaborar con código, o mejorar la documentación? ¡Excelente! Lee nuestras -pautas para [colaborar][contributing] y luego revisa algunos de nuestras incidencias (issues) en [ayuda comunitaria](https://github.com/angular-hispano/angular/labels/ayuda%20comunitaria). +## Registro de cambios (Changelog) -[contributing]: https://github.com/angular-hispano/angular/blob/master/CONTRIBUTING.md -[quickstart]: https://docs.angular.lat/start -[changelog]: https://github.com/angular/angular/blob/master/CHANGELOG.md +[Últimas mejoras realizadas](CHANGELOG.md). From 333a1266cca5fae253f430b8ff371530177ceac3 Mon Sep 17 00:00:00 2001 From: Joel Rivera <31928575+Joel97c@users.noreply.github.com> Date: Mon, 24 Aug 2020 12:43:22 -0500 Subject: [PATCH 129/253] build: translate readme.md to spanish (#54) Fixes #44 --- aio/README.md | 167 ++++++++++++++++++++++++-------------------------- 1 file changed, 79 insertions(+), 88 deletions(-) diff --git a/aio/README.md b/aio/README.md index b46467d2bf18..88177f89a6a7 100644 --- a/aio/README.md +++ b/aio/README.md @@ -1,140 +1,131 @@ -# Angular documentation project (https://angular.io) +# Proyecto de documentación Angular (https://docs.angular.lat) -Everything in this folder is part of the documentation project. This includes +Todo en esta carpeta es parte del proyecto de documentación. Esto incluye: -* the web site for displaying the documentation -* the dgeni configuration for converting source files to rendered files that can be viewed in the web site. -* the tooling for setting up examples for development; and generating live-example and zip files from the examples. +* El sitio web para mostrar la documentación +* La configuración de dgeni para convertir los archivos de origen a archivos renderizados que se pueden vizualizar en el sitio web. +* Las herramientas para establecer ejemplos para el desarrollo; y generar archivos en tiempo real y archivos zip desde los ejemplos. -## Developer tasks +## Tareas de desarrollador -We use [Yarn](https://yarnpkg.com) to manage the dependencies and to run build tasks. -You should run all these tasks from the `angular/aio` folder. -Here are the most important tasks you might need to use: +Nosotros usamos [Yarn](https://yarnpkg.com) para gestionar las dependencias y crear tareas de compilación. +Debes ejecutar todas estas tareas desde la carpeta `angular/aio`. +Aquí están las tareas más importantes que podrías necesitar usar: -* `yarn` - install all the dependencies. -* `yarn setup` - install all the dependencies, boilerplate, stackblitz, zips and run dgeni on the docs. -* `yarn setup-local` - same as `setup`, but build the Angular packages from the source code and use these locally built versions (instead of the ones fetched from npm) for aio and docs examples boilerplate. +* `yarn` - instalar todas las dependencias. +* `yarn setup` - instalar todas las dependencias, boilerplate, stackblitz, zips y ejecuta dgeni en los documentos. +* `yarn setup-local` - igual que `setup`, pero crea los paquetes de Angular a partir del código y usa estas versiones construidas localmente (en lugar de las recuperadas desde npm) para aio y ejemplos de documentos boilerplate. -* `yarn build` - create a production build of the application (after installing dependencies, boilerplate, etc). -* `yarn build-local` - same as `build`, but use `setup-local` instead of `setup`. -* `yarn build-local-with-viewengine` - same as `build-local`, but in addition also turns on `ViewEngine` (pre-Ivy) mode in aio. - (Note: To turn on `ViewEngine` mode in docs examples, see `yarn boilerplate:add:viewengine` below.) +* `yarn build` - crear una compilación de producción de la aplicación (después de instalar dependencias, boilerplate, etc). +* `yarn build-local` - igual que `build`, pero usa `setup-local` en lugar de `setup`. +* `yarn build-local-with-viewengine` - igual que `build-local`, pero además también enciende el modo `ViewEngine` (pre-Ivy) en aio. + (Nota: Encender el modo `ViewEngine` en ejemplos de documentos, ver `yarn boilerplate:add:viewengine` abajo.) -* `yarn start` - run a development web server that watches the files; then builds the doc-viewer and reloads the page, as necessary. -* `yarn serve-and-sync` - run both the `docs-watch` and `start` in the same console. -* `yarn lint` - check that the doc-viewer code follows our style rules. -* `yarn test` - watch all the source files, for the doc-viewer, and run all the unit tests when any change. -* `yarn test --watch=false` - run all the unit tests once. -* `yarn e2e` - run all the e2e tests for the doc-viewer. +* `yarn start` - ejecutar un servidor web de desarrollo que observa los archivos; luego crea el doc-viewer y vuelve a cargar la página, según sea necesario. +* `yarn serve-and-sync` - ejecutar ambos, el `docs-watch` y `start` en la misma consola. +* `yarn lint` - comprobar que el código del doc-viewer sigue nuestras reglas de estilo. +* `yarn test` - observar todos los archivos de origen, para el doc-viewer, y ejecuta todas las pruebas unitarias cuando haya algún cambio. +* `yarn test --watch=false` -ejecutar todas las pruebas unitarias una sola vez. +* `yarn e2e` - ejecutar todas las pruebas de e2e para el doc-viewer. -* `yarn docs` - generate all the docs from the source files. -* `yarn docs-watch` - watch the Angular source and the docs files and run a short-circuited doc-gen for the docs that changed. -* `yarn docs-lint` - check that the doc gen code follows our style rules. -* `yarn docs-test` - run the unit tests for the doc generation code. +* `yarn docs` - generar toda la documentación desde los archivos fuente. +* `yarn docs-watch` - observar el código Angular, los archivos de documentación y ejecutar un 'doc-gen' en corto circuito para los documentos que fueron cambiados. +* `yarn docs-lint` - comprobar que el código del documento generado sigue nuestras reglas de estilo. +* `yarn docs-test` - ejecutar las pruebas unitarias para el código de generación de doc. -* `yarn boilerplate:add` - generate all the boilerplate code for the examples, so that they can be run locally. -* `yarn boilerplate:add:viewengine` - same as `boilerplate:add` but also turns on `ViewEngine` (pre-Ivy) mode. +* `yarn boilerplate:add` - generar todo el código boilerplate para los ejemplos, para que puedan ejecutarse localmente. +* `yarn boilerplate:add:viewengine` - igual que `boilerplate:add` pero también enciende el modo `ViewEngine` (pre-Ivy). -* `yarn boilerplate:remove` - remove all the boilerplate code that was added via `yarn boilerplate:add`. -* `yarn generate-stackblitz` - generate the stackblitz files that are used by the `live-example` tags in the docs. -* `yarn generate-zips` - generate the zip files from the examples. Zip available via the `live-example` tags in the docs. +* `yarn boilerplate:remove` - eliminar todo el código boilerplate que fue añadido a través`yarn boilerplate:add`. +* `yarn generate-stackblitz` - generar los archivos stackblitz que están usados por la etiqueta `live-example` en documentos. +* `yarn generate-zips` - generar los archivos zip desde los ejemplos. Zip está disponible a través de la etiqueta `live-example` en los documentos. -* `yarn example-e2e` - run all e2e tests for examples. Available options: - - `--setup`: generate boilerplate, force webdriver update & other setup, then run tests. - - `--local`: run e2e tests with the local version of Angular contained in the "dist" folder. - _Requires `--setup` in order to take effect._ - - `--viewengine`: run e2e tests in `ViewEngine` (pre-Ivy) mode. - - `--filter=foo`: limit e2e tests to those containing the word "foo". +* `yarn example-e2e` - ejecutar todas las pruebas e2e para ejemplos. Opciones disponibles: + - `--setup`: generar boilerplate, forzar la actualización del controlador web y otras configuraciones, luego ejecutar las pruebas. + - `--local`: ejecutar pruebas e2e con la versión local de Angular contenida en la carpeta "dist". + _Requiere `--setup` para que surta efecto._ + - `--viewengine`: ejecutar pruebas e2e en modo `ViewEngine` (pre-Ivy). + - `--filter=foo`: limitar pruebas e2e a las que contienen la palabra "foo". -> **Note for Windows users** +> **Nota para usuarios Windows** > -> Setting up the examples involves creating some [symbolic links](https://en.wikipedia.org/wiki/Symbolic_link) (see [here](./tools/examples/README.md#symlinked-node_modules) for details). On Windows, this requires to either have [Developer Mode enabled](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (supported on Windows 10 or newer) or run the setup commands as administrator. +> Configurar los ejemplos implica crear algunos [enlaces simbólicos](https://es.wikipedia.org/wiki/Enlace_simb%C3%B3lico) (ver [Aquí](./tools/examples/README.md#symlinked-node_modules) para más detalles). En Windows, esto requiere tener [Habilitado el Modo de desarrollador ](https://blogs.windows.com/windowsdeveloper/2016/12/02/symlinks-windows-10) (compatible con Windows 10 o más reciente) o ejecutar los comandos de configuración cómo administrador. > -> The affected commands are: +> Los comandos afectados son: > - `yarn setup` / `yarn setup-*` > - `yarn build` / `yarn build-*` > - `yarn boilerplate:add` > - `yarn example-e2e --setup` -## Using ServiceWorker locally +## Usando ServiceWorker localmente -Running `yarn start` (even when explicitly targeting production mode) does not set up the -ServiceWorker. If you want to test the ServiceWorker locally, you can use `yarn build` and then -serve the files in `dist/` with `yarn http-server dist -p 4200`. +Ejecutando `yarn start` (incluso cuando se apunta explícitamente al modo de producción) no configura el +ServiceWorker. Si quieres probar el ServiceWorker localmente, puedes usar `yarn build` y luego +ejecutar los archivos en `dist/` con `yarn http-server dist -p 4200`. -## Guide to authoring +## Guía de autoría +Existen dos tipos de contenido en la documentación: -There are two types of content in the documentation: +* **Documentación de API**: descripciones de los módulos, clases, interfaces, decoradores, etc que son parte de la plataforma Angular. +La documentacion de API está generada directamente desde el código fuente. +El código fuente está contenido en archivos TypeScript , almacenados en la carpeta `angular/packages`. +Cada elemento de la API puede tener un comentario anterior, el cual contiene etiquetas y contenido de estilos JSDoc. +El contenido está escrito en markdown. -* **API docs**: descriptions of the modules, classes, interfaces, decorators, etc that make up the Angular platform. -API docs are generated directly from the source code. -The source code is contained in TypeScript files, located in the `angular/packages` folder. -Each API item may have a preceding comment, which contains JSDoc style tags and content. -The content is written in markdown. +* **Otro contenido**: guias, tutoriales, y otro material de marketing. +Todos los demás contenidos se escriben utilizando markdown en archivos de texto, ubicados en la carpeta `angular/aio/content`. +Más específicamente, hay subcarpetas que contienen tipos particulares de contenido: guías, tutoriales y marketing. -* **Other content**: guides, tutorials, and other marketing material. -All other content is written using markdown in text files, located in the `angular/aio/content` folder. -More specifically, there are sub-folders that contain particular types of content: guides, tutorial and marketing. +* **Ejempos de código**: los ejemplos de código deben ser comprobables para garantizar su precisión. +Además, nuestros ejemplos tienen un aspecto específico y permiten al usuario copiar el código fuente. Para mayor +ejemplos se representan en una interfaz con pestañas (e.g. template, HTML, y TypeScript en pestañas separadas). Adicionalmente, algunos son ejemplos en acción, que proporcionan enlaces donde se puede editar el código, ejecutar, y/o descargar. Para obtener más detalles sobre cómo trabajar con ejemplos de código, lea los [fragmentos de código](https://docs.angular.lat/guide/docs-style-guide#code-snippets), [código fuente de marcado ](https://docs.angular.lat/guide/docs-style-guide#source-code-markup), y [ ejemplos en acción ](https://docs.angular.lat/guide/docs-style-guide#live-examples) paginas de los [ autores de guías de estilo ](https://docs.angular.lat/guide/docs-style-guide). -* **Code examples**: code examples need to be testable to ensure their accuracy. -Also, our examples have a specific look and feel and allow the user to copy the source code. For larger -examples they are rendered in a tabbed interface (e.g. template, HTML, and TypeScript on separate -tabs). Additionally, some are live examples, which provide links where the code can be edited, executed, and/or downloaded. For details on working with code examples, please read the [Code snippets](https://angular.io/guide/docs-style-guide#code-snippets), [Source code markup](https://angular.io/guide/docs-style-guide#source-code-markup), and [Live examples](https://angular.io/guide/docs-style-guide#live-examples) pages of the [Authors Style Guide](https://angular.io/guide/docs-style-guide). +Usamos la herramienta [dgeni](https://github.com/angular/dgeni) para convertir estos archivos en docs que se pueden ver en el doc-viewer. +Las [guías de estilo para Autores](https://docs.angular.lat/guide/docs-style-guide) prescriben pautas para +escribir páginas de guía, explica cómo usar la documentación de clases y componentes, y cómo marcar el código fuente para producir fragmentos de código. -We use the [dgeni](https://github.com/angular/dgeni) tool to convert these files into docs that can be viewed in the doc-viewer. +### Generando documentos completos -The [Authors Style Guide](https://angular.io/guide/docs-style-guide) prescribes guidelines for -writing guide pages, explains how to use the documentation classes and components, and how to markup sample source code to produce code snippets. +La principal tarea para generar los documentos es `yarn docs`. Esto procesará todos los archivos fuente (API y otros), extrayendo la documentación y generando archivos JSON que pueden ser consumidos por el doc-viewer. -### Generating the complete docs +### Generación parcial de doc para editores -The main task for generating the docs is `yarn docs`. This will process all the source files (API and other), -extracting the documentation and generating JSON files that can be consumed by the doc-viewer. +La generación completa de documentos puede llevar hasta un minuto. Eso es demasiado lento para la creación y edición eficiente de documentos. -### Partial doc generation for editors +Puedes ealizar pequeños cambios en un editor inteligente que muestre un markdown con formato: +>En VS Code, _Cmd-K, V_ abre la vista previa de markdown en el panel lateral; _Cmd-B_ alterna la barra izquierda -Full doc generation can take up to one minute. That's too slow for efficient document creation and editing. +Puedes también mirar los cambios que se muestran correctamente en el doc-viewer +con un tiempo de ciclo rápido de edición / visualización. -You can make small changes in a smart editor that displays formatted markdown: ->In VS Code, _Cmd-K, V_ opens markdown preview in side pane; _Cmd-B_ toggles left sidebar +Para este propósito, usa la tarea `yarn docs-watch`, que observa los cambios en los archivos de origen y solo vuelve a procesar los archivos necesarios para generar los documentos relacionados con el archivo que ha cambiado. +Dado que esta tarea tiene accesos directos, es mucho más rápido (a menudo menos de 1 segundo) pero no producirá contenido de fidelidad completa. Por ejemplo, los enlaces a otros documentoss y ejemplos de código pueden no mostrarse correctamente. Esto se nota especialmente en los enlaces a otros documentos y en los ejemplos incrustados, que no siempre se representan correctamente. -You also want to see those changes displayed properly in the doc viewer -with a quick, edit/view cycle time. +La configuración general es la siguiente: -For this purpose, use the `yarn docs-watch` task, which watches for changes to source files and only -re-processes the files necessary to generate the docs that are related to the file that has changed. -Since this task takes shortcuts, it is much faster (often less than 1 second) but it won't produce full -fidelity content. For example, links to other docs and code examples may not render correctly. This is -most particularly noticed in links to other docs and in the embedded examples, which may not always render -correctly. - -The general setup is as follows: - -* Open a terminal, ensure the dependencies are installed; run an initial doc generation; then start the doc-viewer: +* Abrir una terminal, estar seguro que las dependencias están instaladas; ejecutar una generación inicial del doc; luego iniciar el doc-viewer: ```bash yarn setup yarn start ``` -* Open a second terminal and start watching the docs +* Abrir una segunda terminal e iniciar el observador de documentos. ```bash yarn docs-watch ``` ->Alternatively, try the consolidated `serve-and-sync` command that builds, watches and serves in the same terminal window +>Alternativamente, prueba el comando fusionado `serve-and-sync` que crea, observa y ejecuta en la misma ventana de la terminal ```bash yarn serve-and-sync ``` -* Open a browser at https://localhost:4200/ and navigate to the document on which you want to work. -You can automatically open the browser by using `yarn start -o` in the first terminal. +* Abre un navegador con la siguiente dirección https://localhost:4200/ y navega hasta el documento en el que quieras trabajar. +Puedes automáticamente abrir el navegador utilizando `yarn start -o` en la primera terminal. -* Make changes to the page's associated doc or example files. Every time a file is saved, the doc will -be regenerated, the app will rebuild and the page will reload. +* Realiza cambios en la página de documentación asociada o en los archivos de ejemplo. Cada vez que un archivo es guardado, la documentación se regenerará, la aplicación se reconstruirá y la página se volverá a cargar. -* If you get a build error complaining about examples or any other odd behavior, be sure to consult -the [Authors Style Guide](https://angular.io/guide/docs-style-guide). +*Si recibes un error de compilación acerca de los ejemplos o cualquier otro error, asegúrate de consultar las + [guías de estilo para Autores](https://angular.io/guide/docs-style-guide) para más información. From 408d38b223d3b1aa2675ba591587bb8404795691 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gustavo=20Rodr=C3=ADguez?= <47954465+gustavguez@users.noreply.github.com> Date: Mon, 24 Aug 2020 14:46:47 -0300 Subject: [PATCH 130/253] docs: translate guide/attribute-binding.md file to Spanish (#53) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alejandro Lora Co-authored-by: Pato <11162114+devpato@users.noreply.github.com> Co-authored-by: José de Jesús Amaya Closes #25 --- aio/content/guide/attribute-binding.en.md | 303 ++++++++++++++++++++++ aio/content/guide/attribute-binding.md | 200 +++++++------- 2 files changed, 400 insertions(+), 103 deletions(-) create mode 100644 aio/content/guide/attribute-binding.en.md diff --git a/aio/content/guide/attribute-binding.en.md b/aio/content/guide/attribute-binding.en.md new file mode 100644 index 000000000000..13525002ccf2 --- /dev/null +++ b/aio/content/guide/attribute-binding.en.md @@ -0,0 +1,303 @@ +# Attribute, class, and style bindings + +The template syntax provides specialized one-way bindings for scenarios less well-suited to property binding. + +

+ +See the for a working example containing the code snippets in this guide. + +

+ + +## Attribute binding + +Set the value of an attribute directly with an **attribute binding**. This is the only exception to the rule that a binding sets a target property and the only binding that creates and sets an attribute. + +Usually, setting an element property with a [property binding](guide/property-binding) +is preferable to setting the attribute with a string. However, sometimes +there is no element property to bind, so attribute binding is the solution. + +Consider the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and +[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). They are purely attributes, don't correspond to element properties, and don't set element properties. In these cases, there are no property targets to bind to. + +Attribute binding syntax resembles property binding, but +instead of an element property between brackets, start with the prefix `attr`, +followed by a dot (`.`), and the name of the attribute. +You then set the attribute value, using an expression that resolves to a string, +or remove the attribute when the expression resolves to `null`. + +One of the primary use cases for attribute binding +is to set ARIA attributes, as in this example: + + + +{@a colspan} + +

+ +#### `colspan` and `colSpan` + +Notice the difference between the `colspan` attribute and the `colSpan` property. + +If you wrote something like this: + + + <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> + + +You'd get this error: + + + Template parse errors: + Can't bind to 'colspan' since it isn't a known native property + + +As the message says, the `

` element does not have a `colspan` property. This is true +because `colspan` is an attribute—`colSpan`, with a capital `S`, is the +corresponding property. Interpolation and property binding can set only *properties*, not attributes. + +Instead, you'd use property binding and write it like this: + + + + + +

+ +{@a class-binding} + +## Class binding + +Here's how to set the `class` attribute without a binding in plain HTML: + +```html + +

Some text

+``` + +You can also add and remove CSS class names from an element's `class` attribute with a **class binding**. + +To create a single class binding, start with the prefix `class` followed by a dot (`.`) and the name of the CSS class (for example, `[class.foo]="hasFoo"`). +Angular adds the class when the bound expression is truthy, and it removes the class when the expression is falsy (with the exception of `undefined`, see [styling delegation](#styling-delegation)). + +To create a binding to multiple classes, use a generic `[class]` binding without the dot (for example, `[class]="classExpr"`). +The expression can be a space-delimited string of class names, or you can format it as an object with class names as the keys and truthy/falsy expressions as the values. +With object format, Angular will add a class only if its associated value is truthy. + +It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated. +Updating the property without changing object identity will have no effect. + +If there are multiple bindings to the same class name, conflicts are resolved using [styling precedence](#styling-precedence). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Binding Type +	+ Syntax +	+ Input Type +	+ Example Input Values +
Single class binding	`[class.foo]="hasFoo"`	`boolean \| undefined \| null`	`true`, `false`
Multi-class binding	`[class]="classExpr"`	`string`	`"my-class-1 my-class-2 my-class-3"`
		`{[key: string]: boolean \| undefined \| null}`	`{foo: true, bar: false}`
		`Array`<`string`>	`['foo', 'bar']`

+ + +The [NgClass](guide/built-in-directives/#ngclass) directive can be used as an alternative to direct `[class]` bindings. +However, using the above class binding syntax without `NgClass` is preferred because due to improvements in class binding in Angular, `NgClass` no longer provides significant value, and might eventually be removed in the future. + + +

+ +## Style binding + +Here's how to set the `style` attribute without a binding in plain HTML: + +```html + +

Some text

+``` + +You can also set styles dynamically with a **style binding**. + +To create a single style binding, start with the prefix `style` followed by a dot (`.`) and the name of the CSS style property (for example, `[style.width]="width"`). +The property will be set to the value of the bound expression, which is normally a string. +Optionally, you can add a unit extension like `em` or `%`, which requires a number type. + +

+ +Note that a _style property_ name can be written in either +[dash-case](guide/glossary#dash-case), as shown above, or +[camelCase](guide/glossary#camelcase), such as `fontSize`. + +

+ +If there are multiple styles you'd like to toggle, you can bind to the `[style]` property directly without the dot (for example, `[style]="styleExpr"`). +The expression attached to the `[style]` binding is most often a string list of styles like `"width: 100px; height: 100px;"`. + +You can also format the expression as an object with style names as the keys and style values as the values, like `{width: '100px', height: '100px'}`. +It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated. +Updating the property without changing object identity will have no effect. + +If there are multiple bindings to the same style property, conflicts are resolved using [styling precedence rules](#styling-precedence). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Binding Type +	+ Syntax +	+ Input Type +	+ Example Input Values +
Single style binding	`[style.width]="width"`	`string \| undefined \| null`	`"100px"`
Single style binding with units	`[style.width.px]="width"`	`number \| undefined \| null`	`100`
Multi-style binding	`[style]="styleExpr"`	`string`	`"width: 100px; height: 100px"`
		`{[key: string]: string \| undefined \| null}`	`{width: '100px', height: '100px'}`
		`Array`<`string`>	`['width', '100px']`

+ +The [NgStyle](guide/built-in-directives/#ngstyle) directive can be used as an alternative to direct `[style]` bindings. +However, using the above style binding syntax without `NgStyle` is preferred because due to improvements in style binding in Angular, `NgStyle` no longer provides significant value, and might eventually be removed in the future. + + +

+ +{@a styling-precedence} + +## Styling Precedence + +A single HTML element can have its CSS class list and style values bound to multiple sources (for example, host bindings from multiple directives). + +When there are multiple bindings to the same class name or style property, Angular uses a set of precedence rules to resolve conflicts and determine which classes or styles are ultimately applied to the element. + +

Styling precedence (highest to lowest)

+ +1. Template bindings + 1. Property binding (for example, `

` or `

`) + 1. Map binding (for example, `

` or `

`) + 1. Static value (for example, `

` or `

`) +1. Directive host bindings + 1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`) + 1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`) + 1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`) +1. Component host bindings + 1. Property binding (for example, `host: {'[class.foo]': 'hasFoo'}` or `host: {'[style.color]': 'color'}`) + 1. Map binding (for example, `host: {'[class]': 'classExpr'}` or `host: {'[style]': 'styleExpr'}`) + 1. Static value (for example, `host: {'class': 'foo'}` or `host: {'style': 'color: blue'}`) + +

+ +The more specific a class or style binding is, the higher its precedence. + +A binding to a specific class (for example, `[class.foo]`) will take precedence over a generic `[class]` binding, and a binding to a specific style (for example, `[style.bar]`) will take precedence over a generic `[style]` binding. + + + +Specificity rules also apply when it comes to bindings that originate from different sources. +It's possible for an element to have bindings in the template where it's declared, from host bindings on matched directives, and from host bindings on matched components. + +Template bindings are the most specific because they apply to the element directly and exclusively, so they have the highest precedence. + +Directive host bindings are considered less specific because directives can be used in multiple locations, so they have a lower precedence than template bindings. + +Directives often augment component behavior, so host bindings from components have the lowest precedence. + + + +In addition, bindings take precedence over static attributes. + +In the following case, `class` and `[class]` have similar specificity, but the `[class]` binding will take precedence because it is dynamic. + + + +{@a styling-delegation} +### Delegating to styles with lower precedence + +It is possible for higher precedence styles to "delegate" to lower precedence styles using `undefined` values. +Whereas setting a style property to `null` ensures the style is removed, setting it to `undefined` will cause Angular to fall back to the next-highest precedence binding to that style. + +For example, consider the following template: + + + +Imagine that the `dirWithHostBinding` directive and the `comp-with-host-binding` component both have a `[style.width]` host binding. +In that case, if `dirWithHostBinding` sets its binding to `undefined`, the `width` property will fall back to the value of the `comp-with-host-binding` host binding. +However, if `dirWithHostBinding` sets its binding to `null`, the `width` property will be removed entirely. \ No newline at end of file diff --git a/aio/content/guide/attribute-binding.md b/aio/content/guide/attribute-binding.md index c73dbcdb0325..4df8847370e5 100644 --- a/aio/content/guide/attribute-binding.md +++ b/aio/content/guide/attribute-binding.md @@ -1,33 +1,28 @@ -# Attribute, class, and style bindings +# Enlaces de atributos, clases y estilos -The template syntax provides specialized one-way bindings for scenarios less well-suited to property binding. +La sintaxis de la plantilla proporciona enlaces one-way especializados para escenarios menos adecuados para el enlace de propiedades.

-See the for a working example containing the code snippets in this guide. +Consulta el para ver un ejemplo práctico que contiene los fragmentos de código de esta guía.

-## Attribute binding +## Enlace de atributo -Set the value of an attribute directly with an **attribute binding**. This is the only exception to the rule that a binding sets a target property and the only binding that creates and sets an attribute. +Establece el valor de un atributo directamente con un **enlace de atributo**. Esta es la única excepción a la regla de que un enlace establece una propiedad de destino y el único enlace que crea y establece un atributo. -Usually, setting an element property with a [property binding](guide/property-binding) -is preferable to setting the attribute with a string. However, sometimes -there is no element property to bind, so attribute binding is the solution. +Por lo general, establecer una propiedad de elemento con un [enlace de propiedad](guide/property-binding) es preferible establecer el atributo con una string. Sin embargo, a veces +no hay ninguna propiedad de elemento para vincular, por lo que la vinculación de atributos es la solución. -Consider the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) and -[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). They are purely attributes, don't correspond to element properties, and don't set element properties. In these cases, there are no property targets to bind to. +Considera el [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) y +[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG). Son puramente atributos, no corresponden a las propiedades del elemento y no establecen las propiedades del elemento. En estos casos, no hay objetivos de propiedad a los que vincularse. -Attribute binding syntax resembles property binding, but -instead of an element property between brackets, start with the prefix `attr`, -followed by a dot (`.`), and the name of the attribute. -You then set the attribute value, using an expression that resolves to a string, -or remove the attribute when the expression resolves to `null`. +La sintaxis de enlace de atributo se parece al enlace de propiedad, pero en lugar de una propiedad de elemento entre paréntesis, comienza con el prefijo `attr`, seguido de un punto (`.`) y el nombre del atributo. +Luego establece el valor del atributo, utilizando una expresión que se resuelve en una string, o elimina el atributo cuando la expresión se resuelva en `null`. -One of the primary use cases for attribute binding -is to set ARIA attributes, as in this example: +Uno de los casos de uso principales para el enlace de atributos es establecer atributos ARIA, como en este ejemplo: @@ -35,28 +30,27 @@ is to set ARIA attributes, as in this example:

-#### `colspan` and `colSpan` +#### `colspan` y `colSpan` -Notice the difference between the `colspan` attribute and the `colSpan` property. +Observa la diferencia entre el atributo `colspan` y la propiedad `colSpan`. -If you wrote something like this: +Si escribes algo como esto: <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> -You'd get this error: +Recibirías este error: Template parse errors: Can't bind to 'colspan' since it isn't a known native property -As the message says, the `

` element does not have a `colspan` property. This is true -because `colspan` is an attribute—`colSpan`, with a capital `S`, is the -corresponding property. Interpolation and property binding can set only *properties*, not attributes. +Como dice el mensaje, el elemento `

` no tiene una propiedad `colspan`. Esto es verdad +porque `colspan` es un atributo—`colSpan`, con una `S` mayúscula, es la propiedad correspondiente. La interpolación y el enlace de propiedades solo pueden establecer *propiedades*, no atributos. -Instead, you'd use property binding and write it like this: +En su lugar, puedes usar el enlace de propiedad y lo escribirías así: @@ -66,28 +60,28 @@ Instead, you'd use property binding and write it like this: {@a class-binding} -## Class binding +## Enlace de clase -Here's how to set the `class` attribute without a binding in plain HTML: +Aquí se explica cómo configurar el atributo `class` sin un enlace en HTML simple: ```html -

Some text

Algún texto

``` -You can also add and remove CSS class names from an element's `class` attribute with a **class binding**. +También puedes agregar y eliminar nombres de clase CSS del atributo `class` de un elemento con un **enlace de clase**. -To create a single class binding, start with the prefix `class` followed by a dot (`.`) and the name of the CSS class (for example, `[class.foo]="hasFoo"`). -Angular adds the class when the bound expression is truthy, and it removes the class when the expression is falsy (with the exception of `undefined`, see [styling delegation](#styling-delegation)). +Para crear un enlace de clase único, comienza con el prefijo `class` seguido de un punto (`.`) y el nombre de la clase CSS (por ejemplo, `[class.foo]="hasFoo"`). +Angular agrega la clase cuando la expresión enlazada es verdadera y elimina la clase cuando la expresión es falsa (con la excepción de `undefined`, vea [delegación de estilo](#styling-delegation)). -To create a binding to multiple classes, use a generic `[class]` binding without the dot (for example, `[class]="classExpr"`). -The expression can be a space-delimited string of class names, or you can format it as an object with class names as the keys and truthy/falsy expressions as the values. -With object format, Angular will add a class only if its associated value is truthy. +Para crear un enlace a varias clases, usa un enlace genérico `[class]` sin el punto (por ejemplo, `[class]="classExpr"`). +La expresión puede ser una string de nombres de clase delimitada por espacios, o puede formatearla como un objeto con nombres de clase como claves y expresiones de verdad / falsedad como valores. +Con el formato de objeto, Angular agregará una clase solo si su valor asociado es verdadero. -It's important to note that with any object-like expression (`object`, `Array`, `Map`, `Set`, etc), the identity of the object must change for the class list to be updated. -Updating the property without changing object identity will have no effect. +Es importante tener en cuenta que con cualquier expresión similar a un objeto (`object`,`Array`, `Map`, `Set`, etc.), la identidad del objeto debe cambiar para que se actualice la lista de clases. +Actualizar la propiedad sin cambiar la identidad del objeto no tendrá ningún efecto. -If there are multiple bindings to the same class name, conflicts are resolved using [styling precedence](#styling-precedence). +Si hay varios enlaces al mismo nombre de clase, los conflictos se resuelven usando [precedencia de estilo](#styling-precedence). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Syntax	Example
Literal object	`{cherry: true, apple: true, mincemeat: false}`
Literal array	`['cherries', 'flour', 'sugar']`
Spread in literal array	`['apples', 'flour', ...the_rest]`
Calls	`bake(ingredients)`
New	`new Oven()`
Property access	`pie.slice`
Array index	`ingredients[0]`
Identity reference	`Component`
A template string	`pie is ${multiplier} times better than cake`
Literal string	`pi`
Literal number	`3.14153265`
Literal boolean	`true`
Literal null	`null`
Supported prefix operator	`!cake`
Supported binary operator	`a+b`
Conditional operator	`a ? b : c`
Parentheses	`(a+b)`

+ + +If an expression uses unsupported syntax, the collector writes an error node to the `.metadata.json` file. +The compiler later reports the error if it needs that piece of metadata to generate the application code. + +

+ + If you want `ngc` to report syntax errors immediately rather than produce a `.metadata.json` file with errors, set the `strictMetadataEmit` option in the TypeScript configuration file. + +``` + "angularCompilerOptions": { + ... + "strictMetadataEmit" : true + } + ``` + +Angular libraries have this option to ensure that all Angular `.metadata.json` files are clean and it is a best practice to do the same when building your own libraries. + +

+ +{@a function-expression} +{@a arrow-functions} +### No arrow functions + +The AOT compiler does not support [function expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function) +and [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), also called _lambda_ functions. + +Consider the following component decorator: + +```typescript +@Component({ + ... + providers: [{provide: server, useFactory: () => new Server()}] +}) +``` + +The AOT collector does not support the arrow function, `() => new Server()`, in a metadata expression. +It generates an error node in place of the function. +When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an _exported function_. + +You can fix the error by converting to this: + +```typescript +export function serverFactory() { + return new Server(); +} + +@Component({ + ... + providers: [{provide: server, useFactory: serverFactory}] +}) +``` + +In version 5 and later, the compiler automatically performs this rewriting while emitting the `.js` file. + +{@a exported-symbols} +{@a code-folding} +### Code folding + +The compiler can only resolve references to **_exported_** symbols. +The collector, however, can evaluate an expression during collection and record the result in the `.metadata.json`, rather than the original expression. +This allows you to make limited use of non-exported symbols within expressions. + +For example, the collector can evaluate the expression `1 + 2 + 3 + 4` and replace it with the result, `10`. +This process is called _folding_. An expression that can be reduced in this manner is _foldable_. + +{@a var-declaration} +The collector can evaluate references to module-local `const` declarations and initialized `var` and `let` declarations, effectively removing them from the `.metadata.json` file. + +Consider the following component definition: + +```typescript +const template = '

'; + +@Component({ + selector: 'app-hero', + template: template +}) +export class HeroComponent { + @Input() hero: Hero; +} +``` + +The compiler could not refer to the `template` constant because it isn't exported. +The collector, however, can fold the `template` constant into the metadata definition by in-lining its contents. +The effect is the same as if you had written: + +```typescript +@Component({ + selector: 'app-hero', + template: '

' +}) +export class HeroComponent { + @Input() hero: Hero; +} +``` + +There is no longer a reference to `template` and, therefore, nothing to trouble the compiler when it later interprets the _collector's_ output in `.metadata.json`. + +You can take this example a step further by including the `template` constant in another expression: + +```typescript +const template = '

'; + +@Component({ + selector: 'app-hero', + template: template + '

' +}) +export class HeroComponent { + @Input() hero: Hero; +} +``` + +The collector reduces this expression to its equivalent _folded_ string: + +``` +'

' +``` + +#### Foldable syntax + +The following table describes which expressions the collector can and cannot fold: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Syntax	Foldable
Literal object	yes
Literal array	yes
Spread in literal array	no
Calls	no
New	no
Property access	yes, if target is foldable
Array index	yes, if target and index are foldable
Identity reference	yes, if it is a reference to a local
A template with no substitutions	yes
A template with substitutions	yes, if the substitutions are foldable
Literal string	yes
Literal number	yes
Literal boolean	yes
Literal null	yes
Supported prefix operator	yes, if operand is foldable
Supported binary operator	yes, if both left and right are foldable
Conditional operator	yes, if condition is foldable
Parentheses	yes, if the expression is foldable

+ + +If an expression is not foldable, the collector writes it to `.metadata.json` as an [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) for the compiler to resolve. + + +## Phase 2: code generation + +The collector makes no attempt to understand the metadata that it collects and outputs to `.metadata.json`. +It represents the metadata as best it can and records errors when it detects a metadata syntax violation. +It's the compiler's job to interpret the `.metadata.json` in the code generation phase. + +The compiler understands all syntax forms that the collector supports, but it may reject _syntactically_ correct metadata if the _semantics_ violate compiler rules. + +### Public symbols + +The compiler can only reference _exported symbols_. + +* Decorated component class members must be public. You cannot make an `@Input()` property private or protected. +* Data bound properties must also be public. + +```typescript +// BAD CODE - title is private +@Component({ + selector: 'app-root', + template: '

' +}) +export class AppComponent { + private title = 'My App'; // Bad +} +``` + +{@a supported-functions} + +### Supported classes and functions + +The collector can represent a function call or object creation with `new` as long as the syntax is valid. +The compiler, however, can later refuse to generate a call to a _particular_ function or creation of a _particular_ object. + +The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions. +* New instances + + The compiler only allows metadata that create instances of the class `InjectionToken` from `@angular/core`. + +* Supported decorators + + The compiler only supports metadata for the [Angular decorators in the `@angular/core` module](api/core#decorators). + +* Function calls + + Factory functions must be exported, named functions. + The AOT compiler does not support lambda expressions ("arrow functions") for factory functions. + +{@a function-calls} +### Functions and static method calls + +The collector accepts any function or static method that contains a single `return` statement. +The compiler, however, only supports macros in the form of functions or static methods that return an *expression*. + +For example, consider the following function: + +```typescript +export function wrapInArray(value: T): T[] { + return [value]; +} +``` + +You can call the `wrapInArray` in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset. + +You might use `wrapInArray()` like this: + +```typescript +@NgModule({ + declarations: wrapInArray(TypicalComponent) +}) +export class TypicalModule {} +``` + +The compiler treats this usage as if you had written: + +```typescript +@NgModule({ + declarations: [TypicalComponent] +}) +export class TypicalModule {} +``` +The Angular [`RouterModule`](api/router/RouterModule) exports two macro static methods, `forRoot` and `forChild`, to help declare root and child routes. +Review the [source code](https://github.com/angular/angular/blob/master/packages/router/src/router_module.ts#L139 "RouterModule.forRoot source code") +for these methods to see how macros can simplify configuration of complex [NgModules](guide/ngmodules). + +{@a metadata-rewriting} + +### Metadata rewriting + +The compiler treats object literals containing the fields `useClass`, `useValue`, `useFactory`, and `data` specially, converting the expression initializing one of these fields into an exported variable that replaces the expression. +This process of rewriting these expressions removes all the restrictions on what can be in them because +the compiler doesn't need to know the expression's value—it just needs to be able to generate a reference to the value. + +You might write something like: + +```typescript +class TypicalServer { + +} + +@NgModule({ + providers: [{provide: SERVER, useFactory: () => TypicalServer}] +}) +export class TypicalModule {} +``` + +Without rewriting, this would be invalid because lambdas are not supported and `TypicalServer` is not exported. +To allow this, the compiler automatically rewrites this to something like: + +```typescript +class TypicalServer { + +} + +export const ɵ0 = () => new TypicalServer(); + +@NgModule({ + providers: [{provide: SERVER, useFactory: ɵ0}] +}) +export class TypicalModule {} +``` + +This allows the compiler to generate a reference to `ɵ0` in the factory without having to know what the value of `ɵ0` contains. + +The compiler does the rewriting during the emit of the `.js` file. +It does not, however, rewrite the `.d.ts` file, so TypeScript doesn't recognize it as being an export. and it does not interfere with the ES module's exported API. + + +{@a binding-expression-validation} + +## Phase 3: Template type checking + +One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime. +In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates. + +Enable this phase explicitly by adding the compiler option `"fullTemplateTypeCheck"` in the `"angularCompilerOptions"` of the project's TypeScript configuration file +(see [Angular Compiler Options](guide/angular-compiler-options)). + +

+ +In [Angular Ivy](guide/ivy), the template type checker has been completely rewritten to be more capable as well as stricter, meaning it can catch a variety of new errors that the previous type checker would not detect. + +As a result, templates that previously compiled under View Engine can fail type checking under Ivy. This can happen because Ivy's stricter checking catches genuine errors, or because application code is not typed correctly, or because the application uses libraries in which typings are inaccurate or not specific enough. + +This stricter type checking is not enabled by default in version 9, but can be enabled by setting the `strictTemplates` configuration option. +We do expect to make strict type checking the default in the future. + +For more information about type-checking options, and about improvements to template type checking in version 9 and above, see [Template type checking](guide/template-typecheck). + +

+ +Template validation produces error messages when a type error is detected in a template binding +expression, similar to how type errors are reported by the TypeScript compiler against code in a `.ts` +file. + +For example, consider the following component: + +```typescript + @Component({ + selector: 'my-component', + template: '{{person.addresss.street}}' + }) + class MyComponent { + person?: Person; + } +``` + +This produces the following error: + +``` + my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'? + ``` + +The file name reported in the error message, `my.component.ts.MyComponent.html`, is a synthetic file +generated by the template compiler that holds contents of the `MyComponent` class template. +The compiler never writes this file to disk. +The line and column numbers are relative to the template string in the `@Component` annotation of the class, `MyComponent` in this case. +If a component uses `templateUrl` instead of `template`, the errors are reported in the HTML file referenced by the `templateUrl` instead of a synthetic file. + +The error location is the beginning of the text node that contains the interpolation expression with the error. +If the error is in an attribute binding such as `[value]="person.address.street"`, the error +location is the location of the attribute that contains the error. + +The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control how detailed the type validation is. +For example, if the `strictTypeChecks` is specified, the error +```my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined'``` +is reported as well as the above error message. + +### Type narrowing + +The expression used in an `ngIf` directive is used to narrow type unions in the Angular +template compiler, the same way the `if` expression does in TypeScript. +For example, to avoid `Object is possibly 'undefined'` error in the template above, modify it to only emit the interpolation if the value of `person` is initialized as shown below: + +```typescript + @Component({ + selector: 'my-component', + template: ' {{person.addresss.street}} ' + }) + class MyComponent { + person?: Person; + } +``` + +Using `*ngIf` allows the TypeScript compiler to infer that the `person` used in the binding expression will never be `undefined`. + +For more information about input type narrowing, see [Input setter coercion](guide/template-typecheck#input-setter-coercion) and [Improving template type checking for custom directives](guide/structural-directives#directive-type-checks). + +### Non-null type assertion operator + +Use the [non-null type assertion operator](guide/template-expression-operators#non-null-assertion-operator) to suppress the `Object is possibly 'undefined'` error when it is inconvenient to use `*ngIf` or when some constraint in the component ensures that the expression is always non-null when the binding expression is interpolated. + +In the following example, the `person` and `address` properties are always set together, implying that `address` is always non-null if `person` is non-null. +There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using `address!.street`. + +```typescript + @Component({ + selector: 'my-component', + template: ' {{person.name}} lives on {{address!.street}} ' + }) + class MyComponent { + person?: Person; + address?: Address; + + setData(person: Person, address: Address) { + this.person = person; + this.address = address; + } + } +``` + +The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint. + +In this example it is recommended to include the checking of `address` in the `*ngIf` as shown below: + +```typescript + @Component({ + selector: 'my-component', + template: ' {{person.name}} lives on {{address.street}} ' + }) + class MyComponent { + person?: Person; + address?: Address; + + setData(person: Person, address: Address) { + this.person = person; + this.address = address; + } + } +``` diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md index df846a9209d3..3fba3505a6f8 100644 --- a/aio/content/guide/aot-compiler.md +++ b/aio/content/guide/aot-compiler.md @@ -1,62 +1,59 @@ -# Ahead-of-time (AOT) compilation +# Compilación anticipada (AOT) -An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser. +Una aplicación Angular consta principalmente de componentes y sus plantillas HTML. Los componentes y plantillas proporcionados por Angular no pueden ser entendidos por el navegador directamente, las aplicaciones en Angular requieren un proceso de compilación antes de que puedan correr en un navegador. -The Angular [ahead-of-time (AOT) compiler](guide/glossary#aot) converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase _before_ the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser. +La [compilación anticipada de Angular (AOT)](guide/glossary#aot) convierte plantillas y código de TypeScript en eficiente código JavaScript durante la fase de construcción _antes_ de que el navegador descargue y corra el código. Compilando tu aplicación durante el proceso de construcción se proporciona una renderización más rápida en el navegador. -This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler. +Esta guía explica como especificar metadatos y aplicar las opciones del compilador disponibles para compilar aplicaciones eficientemente usando la compilación anticipada (AOT).

- Watch Alex Rickabaugh explain the Angular compiler at AngularConnect 2019. + Mira a Alex Rickabaugh explicando el compilador de Angular en AngularConnect 2019.

{@a why-aot} -Here are some reasons you might want to use AOT. +Aquí algunas razones por las qué podrías querer usar AOT. -* *Faster rendering* - With AOT, the browser downloads a pre-compiled version of the application. - The browser loads executable code so it can render the application immediately, without waiting to compile the app first. +* *Renderizado más rápido* + Con AOT, el navegador descarga una versión pre compilada de una aplicación. + El navegador carga el código ejecutable para que pueda renderizar la aplicación inmediatamente, sin esperar a compilar la aplicación primero. -* *Fewer asynchronous requests* - The compiler _inlines_ external HTML templates and CSS style sheets within the application JavaScript, - eliminating separate ajax requests for those source files. +* *Menos solicitudes asincrónicas* + El compilador _inserta_ plantillas HTML y hojas de estilo CSS externas dentro de la aplicación JavaScript, eliminando solicitudes ajax separadas para esos archivos fuente. -* *Smaller Angular framework download size* - There's no need to download the Angular compiler if the app is already compiled. - The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload. +* *Angular pesa menos* + No existe necesidad de incluir el compilador de Angular si la aplicación ya esta compilada. + El compilador es aproximadamente la mitad de Angular en si mismo, así que omitíendolo se reduce drásticamente el peso de la aplicación. -* *Detect template errors earlier* - The AOT compiler detects and reports template binding errors during the build step - before users can see them. +* *Detecte errores en platillas antes* + El compilador AOT detecta y reporta errores de enlace de datos en plantillas durante el paso de construcción antes que los usuarios puedan verlos. -* *Better security* - AOT compiles HTML templates and components into JavaScript files long before they are served to the client. - With no templates to read and no risky client-side HTML or JavaScript evaluation, - there are fewer opportunities for injection attacks. +* *Mejor seguridad* + AOT compila las plantillas HTML y componentes en archivos JavaScript mucho antes de que se sirvan a el cliente. + Sin plantillas para leer y sin evaluaciones de JavaScript o HTML del lado del cliente riesgosas, existen pocas oportunidades para ataques de inyección. {@a overview} -## Choosing a compiler +## Eligiendo un compilador. -Angular offers two ways to compile your application: +Angular ofrece dos formas para compilar tu aplicación: -* **_Just-in-Time_ (JIT)**, which compiles your app in the browser at runtime. This was the default until Angular 8. -* **_Ahead-of-Time_ (AOT)**, which compiles your app and libraries at build time. This is the default since Angular 9. +* **_Just-in-Time_ (JIT)**, cuando compila tu aplicación en el navegador en tiempo de ejecución. Este fué el modo de compilación por defecto hasta Angular 8. +* **_Ahead-of-Time_ (AOT)**, cuando compila tu aplicación y librerías en el tiempo de construcción. Este es el modo de compilación por defecto desde Angular 9. -When you run the [`ng build`](cli/build) (build only) or [`ng serve`](cli/serve) (build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the `aot` property in your build configuration specified in `angular.json`. By default, `aot` is set to `true` for new CLI apps. +Cuando ejecutas los comandos del CLI [`ng build`](cli/build) (solo construcción) o [`ng serve`](cli/serve) (construye y sirve localmente), el tipo de compilación (JIT o AOT) depende del valor de la propiedad `aot` en tu configuración de construcción especificada en el archivo `angular.json`. Por defecto, `aot` esta establecido en `true` para nuevas aplicaciones. -See the [CLI command reference](cli) and [Building and serving Angular apps](guide/build) for more information. +Mira la [referencia de comandos del CLI](cli) y [Construyendo y sirviendo Angular apps](guide/build) para más información. -## How AOT works +## Como funciona AOT -The Angular AOT compiler extracts **metadata** to interpret the parts of the application that Angular is supposed to manage. -You can specify the metadata explicitly in **decorators** such as `@Component()` and `@Input()`, or implicitly in the constructor declarations of the decorated classes. -The metadata tells Angular how to construct instances of your application classes and interact with them at runtime. +El compilador de Angular AOT extrae **metadatos** para interpretar las partes de la aplicación que se supone que Angular maneja. +Puedes especificar los metadatos explícitamente en **decoradores** como `@Component()` y `@Input()`, o implícitamente en las declaraciones del constructor de las clases decoradas. +Los metadatos le dicen a Angular como construir instancias de clases e interactuar con ellas en tiempo de ejecución. -In the following example, the `@Component()` metadata object and the class constructor tell Angular how to create and display an instance of `TypicalComponent`. +En el siguiente ejemplo, los metadatos de `@Component()` y el constructor le dicen a Angular como crear y mostrar una instancia de `TypicalComponent`. ```typescript @Component({ @@ -69,63 +66,63 @@ export class TypicalComponent { } ``` -The Angular compiler extracts the metadata _once_ and generates a _factory_ for `TypicalComponent`. -When it needs to create a `TypicalComponent` instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency. +El compilador de Angular extrae los metadatos _una_ vez y genera una _fabrica_ para `TypicalComponent`. +Cuando este necesita crear una instancia de `TypicalComponent`, Angular llama a la fabrica, el cuál produce un nuevo elemento visual, vinculado a una nueva instancia la clase del componente con su dependencia inyectada. -### Compilation phases +### Fases de compilación -There are three phases of AOT compilation. -* Phase 1 is *code analysis*. - In this phase, the TypeScript compiler and *AOT collector* create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation. +Existen tres fases de compilación en AOT. -* Phase 2 is *code generation*. - In this phase, the compiler's `StaticReflector` interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation. +* Fase 1: *análisis de código* + En esta fase, el compilador de TypeScript y el *recolector AOT* crea una representación de la fuente. El recolector no intenta interpretar los metadatos recopilados. Estos representan los metadatos lo mejor que pueden y registra errores cuando este detecta un violación de sintaxis en los metadatos. -* Phase 3 is *template type checking*. - In this optional phase, the Angular *template compiler* uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the `fullTemplateTypeCheck` configuration option; see [Angular compiler options](guide/angular-compiler-options). +* Fase 2: *generación de código* + En esta fase, el `StaticReflector` del compilador interpreta los metadatos recolectados en la fase 1, realiza validaciones adicionales de los metadatos y lanza un error si este detecta una violación de la restricción de metadatos. +* Fase 3: *verificación de tipos en plantillas* + Esta fase es opcional, el *compilador de plantillas* de Angular usa el compilador de Typescript para validar las expresiones de enlaces de datos en las plantillas. Puedes habilitar esta fase explícitamente configurando la opción `fullTemplateTypeCheck`; revisa [Opciones del Compilador Angular](guide/angular-compiler-options). -### Metadata restrictions -You write metadata in a _subset_ of TypeScript that must conform to the following general constraints: +### Restricciones de los metadatos -* Limit [expression syntax](#expression-syntax) to the supported subset of JavaScript. -* Only reference exported symbols after [code folding](#code-folding). -* Only call [functions supported](#supported-functions) by the compiler. -* Decorated and data-bound class members must be public. +Escribe metadatos en un _subconjunto_ de TypeScript que debe cumplir las siguientes restricciones generales: -For additional guidelines and instructions on preparing an application for AOT compilation, see [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f). +* Limita la [sintaxis de expresiones](#expression-syntax) al subconjunto soportado de JavaScript. +* Solo haz referencia a los símbolos exportados después del [plegado de código](#code-folding). +* Solo llame [funciones compátibles](#supported-functions) por el compilador. +* Miembros de clase decorados y con enlaces de datos deben ser públicos. + +Para guías e instrucciones adicionales al preparar una aplicación para compilación anticipada (AOT), revise [Angular: Writing AOT-friendly applications](https://medium.com/sparkles-blog/angular-writing-aot-friendly-applications-7b64c8afbe3f).

-Errors in AOT compilation commonly occur because of metadata that does not conform to the compiler's requirements (as described more fully below). -For help in understanding and resolving these problems, see [AOT Metadata Errors](guide/aot-metadata-errors). +Los errores en compilación anticipada (AOT) comúnmente ocurren debido a que los metadatos no se ajustan a los requisitos del compilador (como se describen con más detalle a continuación). +Para ayudar a entender y resolver estos problemas, revisa [Errores de metadatos en AOT](guide/aot-metadata-errors).

-### Configuring AOT compilation +### Configurando la compilación anticipada (AOT). -You can provide options in the [TypeScript configuration file](guide/typescript-configuration) that controls the compilation process. See [Angular compiler options](guide/angular-compiler-options) for a complete list of available options. +Puedes proporcionar opciones en el [archivo de configuración de TypeScript](guide/typescript-configuration) que controlan el proceso de compilación. Revisa [las opciones de compilación de Angular](guide/angular-compiler-options) para una lista completa de opciones disponibles. -## Phase 1: Code analysis +## Fase 1: Análisis de código. -The TypeScript compiler does some of the analytic work of the first phase. It emits the `.d.ts` _type definition files_ with type information that the AOT compiler needs to generate application code. -At the same time, the AOT **collector** analyzes the metadata recorded in the Angular decorators and outputs metadata information in **`.metadata.json`** files, one per `.d.ts` file. +El compilador de TypeScript realiza parte del trabajo analítico en la primer fase. Este emite los _archivos de definición de tipos_ `.d.ts` con el tipo de información que el compilador AOT necesita para generar el código de la aplicación. +Al mismo tiempo, el **recolector** AOT analiza los metadatos registrados en los decoradores de Angular y genera información de metadatos en archivos **`.metadata.json`**, uno por archivo `.d.ts`. -You can think of `.metadata.json` as a diagram of the overall structure of a decorator's metadata, represented as an [abstract syntax tree (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree). +Puedes pensar en `.metadata.json` como un diagrama de la estructura general de los metadatos de un decorador, representados como un [árbol de sintaxis abstracta (AST)](https://en.wikipedia.org/wiki/Abstract_syntax_tree).

-Angular's [schema.ts](https://github.com/angular/angular/blob/master/packages/compiler-cli/src/metadata/schema.ts) -describes the JSON format as a collection of TypeScript interfaces. +El [schema.ts](https://github.com/angular/angular/blob/master/packages/compiler-cli/src/metadata/schema.ts) de Angular describe el formato JSON como una colección de interfaces de TypeScript.

{@a expression-syntax} -### Expression syntax limitations +### Limitaciones del sintaxis de expresión. -The AOT collector only understands a subset of JavaScript. -Define metadata objects with the following limited syntax: +El recolector de AOT solo entiende un subconjunto de JavaScript. +Defina objetos de metadatos con la siguiente sintaxis limitada:

BRAND NAMES

Angular

The name Angular represents the work and promises provided to you by the Angular team.

- -

When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.

NOMBRES DE MARCAS

Angular

El Nombre Angular representa el trabajo y las promesas que le proporcionó el equipo de Angular.

Example

Version v4.1 now available - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!

Cuando no se especifica, se supone que Angular se refiere a la última y mejor versión estable del equipo de + Angular.

Ejemplo

Versión v4.1 ya disponible : Nos complace anunciar que la última versión de Angular ya está + disponible. ¡Mantenerse actualizado es fácil!

Example

Ejemplo

Correct: "New *ngIf capabilities—new in version 4.0 is the ability to ..."

Incorrect: "New *ngIf capabilities in Angular 4—Angular 4 introduces the ability to ..."

Correcto: "Nuevo *ngIf capacidades—nuevo en la versión 4.0 es la capacidad de + ..."

Incorrecto: "Nuevo *ngIf capacidades en Angular 4—Angular 4 + introduce la capacidad de ..."

Reasoning

Razonamiento

By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.

Al no usar "Angular 4" en el título, el contenido aún se siente aplicable y útil después de que se hayan + lanzado las versiones 5, 6, 7, ya que es poco probable que la sintaxis cambie a corto y mediano plazo.

AngularJS

AngularJS is the v1.x series of work and promises provided by the Angular team.

AngularJS es la serie v1.x de trabajo y promesas proporcionadas por el equipo de Angular.

Examples

AngularJS is one of the most used framework on the web today (by number of projects).
Millions of developers are currently building with AngularJS.
Developers are beginning to upgrade from AngularJS to Angular.
I’m upgrading my application from AngularJS to Angular.
I'm using AngularJS Material on this project.

Ejemplos

AngularJS es uno de los marcos más utilizados en la web en la actualidad (por número de proyectos).
Millones de desarrolladores están construyendo actualmente con AngularJS.
Los desarrolladores están comenzando a actualizar de AngularJS a Angular.
Estoy actualizando mi aplicación de AngularJS a Angular.
Estoy usando AngularJS Material en este proyecto.

AngularJS projects should use the +

Los proyectos de AngularJS deben usar el - original AngularJS logo / icon, and not the Angular icon.

+ logo original de AngularJS / icono, y no el icono de Angular.

Angular Material

This is the work being performed by the Angular team to provide Material Design components for Angular applications.

Este es el trabajo que está realizando el equipo de Angular para proporcionar componentes de Material Design + para aplicaciones Angular.

AngularJS Material

Material de AngularJS

This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.

Este es el trabajo que está realizando el equipo de Angular en los componentes de Material Design que son + compatibles con AngularJS.

3rd Party Projects

Proyectos de terceros

X for Angular

X para Angular

3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.

Los terceros deben utilizar la terminología "X para Angular" o "ng-X" para proyectos de software. Los + proyectos deben evitar el uso de Angular X (por ejemplo, Angular UI Toolkit), ya que podría crear confusión en + la autoría. Esta regla no se aplica a eventos o grupos de reuniones.

Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.

Los desarrolladores deben evitar el uso de números de versión de Angular en los nombres de los proyectos, ya + que esto limitará artificialmente sus proyectos al vincularlos a un punto en el tiempo de Angular, o requerirá + un cambio de nombre con el tiempo.

Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.

Cuando se usa un nombre en clave o un nombre abreviado, como en npm o github, algunos son aceptables, otros + no.

- Do not use -

ng2-
angular2-

+ No utilices +

ng2-
angular2-

- OK to use -

ng-
angular-

+ Bien para usar +

ng-
angular-

As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.

Como siempre, los selectores de componentes y directivas no deben comenzar con selectores "ng-", ya que esto + entrará en conflicto con los componentes y las directivas proporcionadas por el equipo de Angular.

Examples

The ng-BE team just launched ng-health to help developers track their own health.
I’m going to use NativeScript for Angular to take advantage of native UI widgets.
ReallyCoolTool for Angular.
ReallyCoolTool for AngularJS.

Ejemplos

El equipo ng-BE acaba de lanzar ng-health Para ayudar a los desarrolladores a rastrear su + propia salud.
Voy a usar NativeScript para Angular para aprovechar los widgets de IU nativos.
ReallyCoolTool para Angular.
ReallyCoolTool para AngularJS.

@@ -614,10 +682,10 @@

Examples

TERMS WE USE

TÉRMINOS QUE UTILIZAMOS

- We often use terms that are not part of our brand, - but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified. + A menudo utilizamos términos que no forman parte de nuestra marca, + pero queremos ser consistentes en el estilo y el uso de ellos para evitar confusiones y parecer unificados.

Ahead of Time compilation (AOT)

TERMS WE USE

- + \ No newline at end of file diff --git a/aio/content/tutorial/toh-pt2.en.md b/aio/content/tutorial/toh-pt2.en.md new file mode 100644 index 000000000000..ce094dac3f49 --- /dev/null +++ b/aio/content/tutorial/toh-pt2.en.md @@ -0,0 +1,253 @@ +# Display a selection list + +In this page, you'll expand the Tour of Heroes app to display a list of heroes, and +allow users to select a hero and display the hero's details. + +

+ + For the sample app that this page describes, see the . + +

+ + +## Create mock heroes + +You'll need some heroes to display. + +Eventually you'll get them from a remote data server. +For now, you'll create some _mock heroes_ and pretend they came from the server. + +Create a file called `mock-heroes.ts` in the `src/app/` folder. +Define a `HEROES` constant as an array of ten heroes and export it. +The file should look like this. + + + +## Displaying heroes + +Open the `HeroesComponent` class file and import the mock `HEROES`. + + + + +In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding. + + + + +### List heroes with `*ngFor` + +Open the `HeroesComponent` template file and make the following changes: + +* Add an `

` at the top, +* Below it add an HTML unordered list (`
`) +* Insert an `
` within the `
` that displays properties of a `hero`. +* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly). + +Make it look like this: + + + +That shows one hero. To list them all, add an `ngFor` to the `
` to iterate through the list of heroes: + + + + +The [`ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive. +It repeats the host element for each element in a list. + +The syntax in this example is as follows: + +* `
` is the host element. +* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list. +* `hero` holds the current hero object for each iteration through the list. + +
+ +Don't forget the asterisk () in front of `ngFor`. It's a critical part of the syntax. + +
+ +After the browser refreshes, the list of heroes appears. + +{@a styles} + +### Style the heroes + +The heroes list should be attractive and should respond visually when users +hover over and select a hero from the list. + +In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`. +That stylesheet didn't include styles for this list of heroes. + +You could add more styles to `styles.css` and keep growing that stylesheet as you add components. + +You may prefer instead to define private styles for a specific component and keep everything a component needs— the code, the HTML, +and the CSS —together in one place. + +This approach makes it easier to re-use the component somewhere else +and deliver the component's intended appearance even if the global styles are different. + +You define private styles either inline in the `@Component.styles` array or +as stylesheet file(s) identified in the `@Component.styleUrls` array. + +When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent` +and pointed to it in `@Component.styleUrls` like this. + + + + +Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`. +You'll find them in the [final code review](#final-code-review) at the bottom of this guide. + +
+ +Styles and stylesheets identified in `@Component` metadata are scoped to that specific component. +The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component. + +
+ +## Master/Detail + +When the user clicks a hero in the master list, +the component should display the selected hero's details at the bottom of the page. + +In this section, you'll listen for the hero item click event +and update the hero detail. + +### Add a click event binding + +Add a click event binding to the `
` like this: + + + +This is an example of Angular's [event binding](guide/event-binding) syntax. + +The parentheses around `click` tell Angular to listen for the `
` element's `click` event. +When the user clicks in the `
`, Angular executes the `onSelect(hero)` expression. + + +In the next section, define an `onSelect()` method in `HeroesComponent` to +display the hero that was defined in the `ngFor` expression. + + +### Add the click event handler + +Rename the component's `hero` property to `selectedHero` but don't assign it. +There is no _selected hero_ when the application starts. + +Add the following `onSelect()` method, which assigns the clicked hero from the template +to the component's `selectedHero`. + + + +### Add a details section + +Currently, you have a list in the component template. To click on a hero on the list +and reveal details about that hero, you need a section for the details to render in the +template. Add the following to `heroes.component.html` beneath the list section: + + + +After the browser refreshes, the application is broken. + +Open the browser developer tools and look in the console for an error message like this: + + + HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined + + +#### What happened? + +When the app starts, the `selectedHero` is `undefined` _by design_. + +Binding expressions in the template that refer to properties of `selectedHero`—expressions like `{{selectedHero.name}}`—_must fail_ because there is no selected hero. + + +#### The fix - hide empty details with _ngIf_ + + +The component should only display the selected hero details if the `selectedHero` exists. + +Wrap the hero detail HTML in a `
`. +Add Angular's `ngIf` directive to the `
` and set it to `selectedHero`. + + +
+ +Don't forget the asterisk () in front of `ngIf`. It's a critical part of the syntax. + +
+ + + +After the browser refreshes, the list of names reappears. +The details area is blank. +Click a hero in the list of heroes and its details appear. +The app seems to be working again. +The heroes appear in a list and details about the clicked hero appear at the bottom of the page. + + +#### Why it works + +When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider. + +When the user picks a hero, `selectedHero` has a value and +`ngIf` puts the hero detail into the DOM. + +### Style the selected hero + +It's difficult to identify the _selected hero_ in the list when all `
` elements look alike. + +If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: + +
+ +
+ +That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles). +You just have to apply the `.selected` class to the `
` when the user clicks it. + +The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally. +Just add `[class.some-css-class]="some-condition"` to the element you want to style. + +Add the following `[class.selected]` binding to the `
` in the `HeroesComponent` template: + + + +When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class. + +The finished `
` looks like this: + + + +{@a final-code-review} + +## Final code review + +Here are the code files discussed on this page, including the `HeroesComponent` styles. + + + + + + + + + + + + + + + + + +## Summary + + The Tour of Heroes app displays a list of heroes in a Master/Detail view. +* The user can select a hero and see that hero's details. +* You used `ngFor` to display a list. + You used `ngIf` to conditionally include or exclude a block of HTML. + You can toggle a CSS style class with a `class` binding. diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md index ce094dac3f49..1f33bfba3436 100644 --- a/aio/content/tutorial/toh-pt2.md +++ b/aio/content/tutorial/toh-pt2.md @@ -1,238 +1,223 @@ -# Display a selection list +# Mostrar una lista de selección -In this page, you'll expand the Tour of Heroes app to display a list of heroes, and -allow users to select a hero and display the hero's details. +En esta página, ampliaremos la aplicación Tour de Héroes para mostrar una lista de héroes, +Permite al usuario seleccionar un héroe y ver los detalles del héroe.
- For the sample app that this page describes, see the . +Para ver la aplicación de ejemplo que describe esta página, consulta el .
-## Create mock heroes +## Crea un simulacro de héroe -You'll need some heroes to display. +Primero, necesitarás algunos héroes para mostrar. +Eventualmente los obtendrá de un servidor de datos remoto. Por ahora, creará algunos _héroes simulados_ y pretenderá que provienen del servidor. -Eventually you'll get them from a remote data server. -For now, you'll create some _mock heroes_ and pretend they came from the server. - -Create a file called `mock-heroes.ts` in the `src/app/` folder. -Define a `HEROES` constant as an array of ten heroes and export it. -The file should look like this. +Crea un archivo llamado `mock-heroes.ts` en la carpeta `src/app/`. +Define la constante `HEROES` como un conjunto de 10 héroes y expórtala. +El archivo se verá así: -## Displaying heroes +## Mostrar Héroes -Open the `HeroesComponent` class file and import the mock `HEROES`. +Abre el archivo de clase `HeroesComponent` e importe el mock `HEROES`. -In the same file (`HeroesComponent` class), define a component property called `heroes` to expose the `HEROES` array for binding. +En el mismo archivo (clase `HeroesComponent`), define una propiedad de componente llamada `heroes` para exponer el array HEROES para la vinculación. -### List heroes with `ngFor` +### Enumerar héroes con `ngFor` -Open the `HeroesComponent` template file and make the following changes: +Abre las Plantillas `HeroesComponent` y realiza los siguientes cambios: -* Add an `
` at the top, -* Below it add an HTML unordered list (`
`) -* Insert an `
` within the `
` that displays properties of a `hero`. -* Sprinkle some CSS classes for styling (you'll add the CSS styles shortly). +* Agrega `
` al principio +* Agrega una lista HTML desordenada (`
`) debajo de ella +* Inserta `
` dentro del `
` que muestra la propiedad `hero` +* Espolvoreé algunas clases CSS al estilo (agregaremos estilos CSS en breve) -Make it look like this: +Se parece a esto: -That shows one hero. To list them all, add an `ngFor` to the `
` to iterate through the list of heroes: +Esto muestra un héroe. Para enumerarlos a todos, agrega `ngFor` a `
` para iterar sobre la lista de héroes. -The [`ngFor`](guide/built-in-directives#ngFor) is Angular's _repeater_ directive. -It repeats the host element for each element in a list. +[`ngFor`](guide/built-in-directives#ngFor) es la directiva de _repetición_ de Angular. + +Esto repite el elemento host para cada elemento de la lista. -The syntax in this example is as follows: +La sintaxis para este ejemplo es: - `
` is the host element. -* `heroes` holds the mock heroes list from the `HeroesComponent` class, the mock heroes list. -* `hero` holds the current hero object for each iteration through the list. +* `
` es un elemento host +* `heroes` es una lista de clases `HeroesComponent` que contiene la lista de héroes simulados +* `hero` contiene el objeto héroe actual en una lista para cada ciclo
-Don't forget the asterisk () in front of `ngFor`. It's a critical part of the syntax. +No olvides el asterisco () antes del `ngFor`. Esta es una parte importante de la sintaxis.
-After the browser refreshes, the list of heroes appears. +Actualiza tu navegador para ver la lista de héroes. {@a styles} -### Style the heroes +### Agregar estilo a los héroes + +La lista de héroes debe ser atractiva y visualmente prominente cuando el usuario coloca el cursor y selecciona un héroe de la lista. -The heroes list should be attractive and should respond visually when users -hover over and select a hero from the list. +En el [Primer tutorial](tutorial/toh-pt0#app-wide-styles), configuro el estilo básico de toda la aplicación en `styles.css`. -In the [first tutorial](tutorial/toh-pt0#app-wide-styles), you set the basic styles for the entire application in `styles.css`. -That stylesheet didn't include styles for this list of heroes. +No incluí el estilo de la lista de héroes en esta hoja de estilo. -You could add more styles to `styles.css` and keep growing that stylesheet as you add components. +Puedes agregar más estilos a `styles.css` y seguir expandiendo esa hoja de estilo a medida que agrega componentes -You may prefer instead to define private styles for a specific component and keep everything a component needs— the code, the HTML, -and the CSS —together in one place. +Es posible que prefieras definir un estilo privado para un componente en particular y mantener todo lo que el componente necesita — +código, HTML, CSS— en un solo lugar. -This approach makes it easier to re-use the component somewhere else -and deliver the component's intended appearance even if the global styles are different. +Este enfoque facilita la reutilización del componente en otro lugar y aún así proporciona al componente la apariencia deseada, incluso cuando los estilos aplicados globalmente son diferentes. -You define private styles either inline in the `@Component.styles` array or -as stylesheet file(s) identified in the `@Component.styleUrls` array. +Los estilos privados se definen en línea dentro de la matriz `@Component.styles` o como un archivo de hoja de estilo identificado en una matriz particular `@Component.styleUrls` como un archivo de hoja de estilo. -When the CLI generated the `HeroesComponent`, it created an empty `heroes.component.css` stylesheet for the `HeroesComponent` -and pointed to it in `@Component.styleUrls` like this. +Cuando la CLI crea un `HeroesComponent`, se crea un `heroes.component.css` vacío para el `HeroesComponent`. +`@Component.styleUrls` se señala de esta manera. -Open the `heroes.component.css` file and paste in the private CSS styles for the `HeroesComponent`. -You'll find them in the [final code review](#final-code-review) at the bottom of this guide. +Abre `heroes.component.css` y pega el estilo privado para `HeroesComponent`. +Puedes encontrarlos en la [Revisión del código final](#final-code-review) al final de esta guía.
-Styles and stylesheets identified in `@Component` metadata are scoped to that specific component. -The `heroes.component.css` styles apply only to the `HeroesComponent` and don't affect the outer HTML or the HTML in any other component. - +`@Component` Los estilos y las hojas de estilo identificados en los metadatos se definen en un componente en particular. +El estilo `heroes.component.css` solo se aplica a `HeroesComponent` y no afecta a otros HTML o HTML dentro de ningún otro componente.
-## Master/Detail +## Maestro/Detalle -When the user clicks a hero in the master list, -the component should display the selected hero's details at the bottom of the page. +Cuando haces clic en un héroe en la lista maestro, el componente debe mostrar los detalles del héroe seleccionado en la parte inferior de la página. -In this section, you'll listen for the hero item click event -and update the hero detail. +En este capítulo, esperemos a que se haga clic en el elemento del héroe y luego actualiza los detalles del héroe. -### Add a click event binding +### Agregar enlace de evento de clic -Add a click event binding to the `
` like this: +Agrega el enlace de evento click a su `
` así: -This is an example of Angular's [event binding](guide/event-binding) syntax. - -The parentheses around `click` tell Angular to listen for the `
` element's `click` event. -When the user clicks in the `
`, Angular executes the `onSelect(hero)` expression. - +Este es un ejemplo de la sintaxis de Angular [enlace de eventos](guide/event-binding) . -In the next section, define an `onSelect()` method in `HeroesComponent` to -display the hero that was defined in the `ngFor` expression. +Los paréntesis alrededor del `clic` le dicen a Angular que es un evento `clic` para el elemento `
`. +Cuando el usuario hace clic en `
`, Angular ejecuta la expresión `onSelect(hero)`. +En la siguiente sección, definiremos el método `onSelect()` en el `HeroesComponent` para mostrar los héroes definidos por las expresiones `ngFor`. -### Add the click event handler +### Agregar un controlador de eventos de clic -Rename the component's `hero` property to `selectedHero` but don't assign it. -There is no _selected hero_ when the application starts. +Cambia el nombre de la propiedad `hero` del componente a `selectedHero`, pero no la asignes todavía. +No hay _héroe seleccionado_ cuando se inicia la aplicación. -Add the following `onSelect()` method, which assigns the clicked hero from the template -to the component's `selectedHero`. +Agrega el método `onSelect()` de la siguiente manera y asigne el héroe en el que se hizo clic desde Plantillas al componente 'seleccionadoHero`. -### Add a details section +### Agregar una sección de detalles -Currently, you have a list in the component template. To click on a hero on the list -and reveal details about that hero, you need a section for the details to render in the -template. Add the following to `heroes.component.html` beneath the list section: +Actualmente, el componente Plantillas tiene una lista. +Para hacer clic en un héroe en la lista para ver los detalles de ese héroe, necesita una sección de detalles para representarlo en Plantillas. +Agrega lo siguiente debajo de la sección de la lista de `heroes.component.html`. -After the browser refreshes, the application is broken. +Cuando actualizo el navegador, la aplicación está rota. -Open the browser developer tools and look in the console for an error message like this: +Abre y busca las herramientas de desarrollador de su navegador y busca un mensaje de error como este en la consola: - HeroesComponent.html:3 ERROR TypeError: Cannot read property 'name' of undefined + HeroesComponent.html:3 ERROR TypeError: no se puede leer la propiedad 'nombre' de undefined -#### What happened? +### ¿Que pasó? -When the app starts, the `selectedHero` is `undefined` _by design_. +Cuando inicia la aplicación, `selectedHero` es _intencionalmente_ indefinido`. -Binding expressions in the template that refer to properties of `selectedHero`—expressions like `{{selectedHero.name}}`—_must fail_ because there is no selected hero. +Los enlaces de expresión en Plantillas que se refieren a las propiedades de `selectedHero` - expresiones como` {{{selectedHero.name}} `deben _fallar_ porque el héroe seleccionado no existe, no. +### Reparemos-use _ngIf_ para ocultar detalles vacíos -#### The fix - hide empty details with _ngIf_ - - -The component should only display the selected hero details if the `selectedHero` exists. - -Wrap the hero detail HTML in a `
`. -Add Angular's `ngIf` directive to the `
` and set it to `selectedHero`. +El componente solo debe mostrar detalles para el héroe seleccionado si `selectedHero` está presente. +Adjunta los detalles del héroe en HTML `
`. +Agrega la directiva angular `ngIf` a su `
` y configúrelo en `selectedHero`.
-Don't forget the asterisk () in front of `ngIf`. It's a critical part of the syntax. +No olvides el asterisco () antes del `ngIf`. Esta es una parte importante de la sintaxis.
-After the browser refreshes, the list of names reappears. -The details area is blank. -Click a hero in the list of heroes and its details appear. -The app seems to be working again. -The heroes appear in a list and details about the clicked hero appear at the bottom of the page. +Actualiza su navegador y verá la lista de nombres nuevamente. +El área de detalles está en blanco. +Hace clic en un héroe en la lista de héroes para ver más detalles. +La aplicación comenzó a funcionar nuevamente. +Los héroes se muestran en la lista, y los detalles del héroe seleccionado se muestran en la parte inferior de la página. +### Por qué esto funciona -#### Why it works +Cuando `selectedHero` no está definido, `ngIf` elimina los detalles del héroe del DOM. No hay obligación de preocuparse por `selectedHero`. -When `selectedHero` is undefined, the `ngIf` removes the hero detail from the DOM. There are no `selectedHero` bindings to consider. +Cuando el usuario selecciona un héroe, `selectedHero` tiene un valor y `ngIf` inserta los detalles del héroe en el DOM. -When the user picks a hero, `selectedHero` has a value and -`ngIf` puts the hero detail into the DOM. +### Dar estilo a el héroe seleccionado -### Style the selected hero +Si todos los elementos `
` se parecen, es difícil identificar al _héroe seleccionado_ en la lista. -It's difficult to identify the _selected hero_ in the list when all `
` elements look alike. - -If the user clicks "Magneta", that hero should render with a distinctive but subtle background color like this: +Si el usuario hace clic en "Magneta", el héroe debe dibujarse con un color de fondo prominente como este:

-That _selected hero_ coloring is the work of the `.selected` CSS class in the [styles you added earlier](#styles). -You just have to apply the `.selected` class to the `
` when the user clicks it. +El color del _héroe seleccionado_ es el trabajo de la clase CSS `.selected` en [el estilo que acaba de agregar](#styles). +Simplemente aplica la clase `.selected` a `
` cuando el usuario hace clic. -The Angular [class binding](guide/attribute-binding#class-binding) makes it easy to add and remove a CSS class conditionally. -Just add `[class.some-css-class]="some-condition"` to the element you want to style. +El [enlace de clase](guide/attribute-binding#class-binding)de Angular facilita la adición y eliminación de clases CSS condicionales. +Simplemente agregue `[class.some-css-class] =" some-condition"` al elemento que desea decorar. -Add the following `[class.selected]` binding to the `
` in the `HeroesComponent` template: +Agrega el enlace `[class.selected]` al `
` en `HeroesComponent` Plantillas: -When the current row hero is the same as the `selectedHero`, Angular adds the `selected` CSS class. When the two heroes are different, Angular removes the class. +Si el héroe de la fila actual es el mismo que de `selectedHero`, Angular agrega una clase CSS `selected`.Cuando los dos héroes son diferentes, Angular eliminará la clase. -The finished `
` looks like this: +El `
` completado se ve así: - + {@a final-code-review} -## Final code review +## Revisión final del código -Here are the code files discussed on this page, including the `HeroesComponent` styles. +Aquí está el archivo de código en esta página que incluye el estilo `HeroesComponent`. - + @@ -241,13 +226,12 @@ Here are the code files discussed on this page, including the `HeroesComponent` - -## Summary +## Resumen -* The Tour of Heroes app displays a list of heroes in a Master/Detail view. -* The user can select a hero and see that hero's details. -* You used `ngFor` to display a list. - You used `ngIf` to conditionally include or exclude a block of HTML. - You can toggle a CSS style class with a `class` binding. +* La aplicación "Tour de Héroes" muestra una lista de héroes en la pantalla Maestro / Detalle +* El usuario puede seleccionar un héroe y ver los detalles de ese héroe +* Utilizó `ngFor` para mostrar la lista + Utilizó `ngIf` para incluir o excluir condicionalmente bloques de HTML + La clase de estilo CSS se puede cambiar con el enlace `class` From fdf572b3c520ac0e9c93e9960f4e944001c58603 Mon Sep 17 00:00:00 2001 From: Antonio Cardenas Date: Tue, 6 Apr 2021 17:51:11 -0600 Subject: [PATCH 221/253] docs: presskit-doc traducido (#282) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michael Prentice Co-authored-by: Gustavo Rodríguez <47954465+gustavguez@users.noreply.github.com> --- aio/content/marketing/presskit.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index a23950761850..507bd8948809 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -508,14 +508,14 @@
LAZY LOADING

-
Bibliotecas
+
Librerías

Icono de bibliotecas (png) - Descargar

- Icono de bibliotecas (svg) - Icono de librerías (svg) - Descargar

@@ -613,7 +613,7 @@
AngularJS

Ejemplos

-
AngularJS es uno de los marcos más utilizados en la web en la actualidad (por número de proyectos).
+
AngularJS es uno de los frameworks más utilizados en la web en la actualidad (por número de proyectos).

Millones de desarrolladores están construyendo actualmente con AngularJS.

Los desarrolladores están comenzando a actualizar de AngularJS a Angular.

Estoy actualizando mi aplicación de AngularJS a Angular.
From 604bd6e1cb8d54cd3e8feae31289d3a771dbc4d0 Mon Sep 17 00:00:00 2001 From: Antonio Cardenas Date: Tue, 6 Apr 2021 17:54:43 -0600 Subject: [PATCH 222/253] docs: traducido marketing/README (#283) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michael Prentice Co-authored-by: Gustavo Rodríguez <47954465+gustavguez@users.noreply.github.com> --- aio/content/marketing/README.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/aio/content/marketing/README.md b/aio/content/marketing/README.md index 6733da3b8411..f3bcc1a181dc 100644 --- a/aio/content/marketing/README.md +++ b/aio/content/marketing/README.md @@ -1,32 +1,32 @@ -# Contributors page +# Página de colaboradores -We have an official accounting of who is on the Angular Team, who are "trusted collaborators" (see https://team.angular.io/collaborators), and so on. +Tenemos una contabilidad oficial de quiénes están en el Angular Team, quiénes son "colaboradores de confianza" (consulte https://team.angular.io/collaborators), etc. -The `contributors.json` should be maintained to keep our "org chart" in a single consistent place. +El `contributors.json` debe mantenerse para mantener nuestro" organigrama "en un solo lugar coherente. -## GDE listings +## Lista de GDE -There are two pages: +Hay dos páginas: - https://developers.google.com/experts/all/technology/angular -(Googlers: source at http://google3/googledata/devsite/content/en/experts/all/technology/angular.html) -which is maintained by Dawid Ostrowski based on a spreadsheet +(Empleados de Google: fuente en http://google3/googledata/devsite/content/en/experts/all/technology/angular.html) +que es mantenido por Dawid Ostrowski basado en una hoja de cálculo https://docs.google.com/spreadsheets/d/1_Ls2Kle7NxPBIG8f3OEVZ4gJZ8OCTtBxGYwMPb1TUVE/edit#gid=0. -- Ours: https://angular.io/about?group=GDE which is derived from `contributors.json`. +- Nuestro: https://angular.io/about?group=GDE que se deriva de `contributors.json`. -Alex Eagle is investigating how to reconcile these two lists. +Alex Eagle está investigando cómo conciliar estas dos listas. -## About the data +## Sobre los datos -- Keys in `contributors.json` should be GitHub handles. (Most currently are, but not all.) - This will allow us to use GitHub as the default source for things like name, avatar, etc. -- Pictures are stored in `aio/content/images/bios/`. +- Las llaves en `contributors.json` deben ser identificadores de GitHub. (La mayoría lo son actualmente, pero no todos). + Esto nos permitirá usar GitHub como fuente predeterminada para cosas como nombre, avatar, etc. +- Las imágenes se almacenan en `aio/content/images/bios/`. -## Processing the data +## Procesando los datos -Install https://stedolan.github.io/jq/ which is amazing. +Instala https://stedolan.github.io/jq/ que es increíble. ```sh for handle in $(jq keys[] --raw-output < aio/content/marketing/contributors.json) @@ -35,4 +35,4 @@ do echo -e "\n$handle\n---------\n"; curl --silent -H "Authorization: token ${TO done ``` -Relevant scripts are stored in `aio/scripts/contributors/`. +Los scripts relevantes se almacenan en `aio/scripts/contributors/`. From 67b431603a40144e36ae5ef9a41f916dcfb5b1a3 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Monroy Date: Sun, 4 Apr 2021 14:45:23 -0400 Subject: [PATCH 223/253] docs: translate libraries.md --- aio/content/guide/libraries.en.md | 37 +++++++++++++++++++++++ aio/content/guide/libraries.md | 49 ++++++++++++++++--------------- 2 files changed, 62 insertions(+), 24 deletions(-) create mode 100644 aio/content/guide/libraries.en.md diff --git a/aio/content/guide/libraries.en.md b/aio/content/guide/libraries.en.md new file mode 100644 index 000000000000..539c8949a7f0 --- /dev/null +++ b/aio/content/guide/libraries.en.md @@ -0,0 +1,37 @@ +# Overview of Angular libraries + +Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. +Developers can create general solutions for particular domains that can be adapted for re-use in different apps. +Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages. + +An Angular library is an Angular [project](guide/glossary#project) that differs from an app in that it cannot run on its own. +A library must be imported and used in an app. + +Libraries extend Angular's base functionality. For example, to add [reactive forms](guide/reactive-forms) to an app, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code. +Similarly, adding the [service worker](guide/service-worker-intro) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA). +[Angular Material](https://material.angular.io/) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components. + +Any app developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties. See [Using Published Libraries](guide/using-libraries). + +## Creating libraries + +If you have developed functionality that is suitable for reuse, you can create your own libraries. +These libraries can be used locally in your workspace, or you can publish them as [npm packages](guide/npm-packages) to share with other projects or other Angular developers. +These packages can be published to the npm registry, a private npm Enterprise registry, or a private package management system that supports npm packages. +See [Creating Libraries](guide/creating-libraries). + +Whether you decide to package functionality as a library is an architectural decision, similar to deciding whether a piece of functionality is a component or a service, or deciding on the scope of a component. + +Packaging functionality as a library forces the artifacts in the library to be decoupled from the application's business logic. +This can help to avoid various bad practices or architecture mistakes that can make it difficult to decouple and reuse code in the future. + +Putting code into a separate library is more complex than simply putting everything in one app. +It requires more of an investment in time and thought for managing, maintaining, and updating the library. +This complexity can pay off, however, when the library is being used in multiple apps. + +
+ +Note that libraries are intended to be used by Angular apps. +To add Angular functionality to non-Angular web apps, you can use [Angular custom elements](guide/elements). + +
diff --git a/aio/content/guide/libraries.md b/aio/content/guide/libraries.md index 539c8949a7f0..f03d7558056f 100644 --- a/aio/content/guide/libraries.md +++ b/aio/content/guide/libraries.md @@ -1,37 +1,38 @@ -# Overview of Angular libraries +# Vista general de librerías para Angular -Many applications need to solve the same general problems, such as presenting a unified user interface, presenting data, and allowing data entry. -Developers can create general solutions for particular domains that can be adapted for re-use in different apps. -Such a solution can be built as Angular libraries and these libraries can be published and shared as npm packages. +Muchas aplicaciones necesitan resolver los mismos problemas en general, como presentar una interfaz de usuario unificada, mostrar datos, permitir entrada de datos etc. +Los desarrolladores puede crear soluciones generales para dominios particulares que pueden ser adoptados para re usarse en diferentes aplicaciones. +Tal solución se puede construir como librerías para Angular y estas librerías pueden ser publicadas y compartidas como paquetes de npm. -An Angular library is an Angular [project](guide/glossary#project) that differs from an app in that it cannot run on its own. -A library must be imported and used in an app. +Una librería de Angular es como un [proyecto](guide/glossary#project) lo que la diferencia de una app es que no puede correr por si sola. +Una librería debe ser importada y usada en una app. -Libraries extend Angular's base functionality. For example, to add [reactive forms](guide/reactive-forms) to an app, add the library package using `ng add @angular/forms`, then import the `ReactiveFormsModule` from the `@angular/forms` library in your application code. -Similarly, adding the [service worker](guide/service-worker-intro) library to an Angular application is one of the steps for turning an application into a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA). -[Angular Material](https://material.angular.io/) is an example of a large, general-purpose library that provides sophisticated, reusable, and adaptable UI components. +Las librerías extienden la funcionalidad base de Angular. Por ejemplo, para agregar [formularios reactivos](guide/reactive-forms) en una app, agregamos la librería usando `ng add @angular/forms`, entonces importamos el `ReactiveFormsModule` desde la librería `@angular/forms` el código de la aplicación. +De igual manera, agregar la librería [service worker](guide/service-worker-intro) dentro de una aplicación Angular es el primer paso para convertir una aplicación a una [Progressive Web App](https://developers.google.com/web/progressive-web-apps/) (PWA). +[Angular Material](https://material.angular.io/) es un ejemplo de una gran librería de propósito general que ofrece componentes de UI sofisticados, reutilizables y adaptables. -Any app developer can use these and other libraries that have been published as npm packages by the Angular team or by third parties. See [Using Published Libraries](guide/using-libraries). +Cualquier desarrollador de apps puede usar estas y otras librerías que han sido publicadas como paquetes de npm por el equipo de Angular o por terceros. Mirá [Usando librerías publicadas](guide/using-libraries). -## Creating libraries +## Creando librerías -If you have developed functionality that is suitable for reuse, you can create your own libraries. -These libraries can be used locally in your workspace, or you can publish them as [npm packages](guide/npm-packages) to share with other projects or other Angular developers. -These packages can be published to the npm registry, a private npm Enterprise registry, or a private package management system that supports npm packages. -See [Creating Libraries](guide/creating-libraries). +Si tu tienes funcionalidades desarrolladas que puede ser adecuadas para re usarse tu puedes crear tus propias librerías. +Estas librerías puede ser usadas localmente en tu espacio de trabajo, o puede ser publicadas como [paquetes de npm](guide/npm-packages) para compartir con otros proyectos o otros desarrolladores Angular. +Estos paquetes pueden ser publicados en el registro de npm, en un registro empresarial privado de npm, o en un sistema de gestión de paquetes privado que soporte paquetes de npm. +Mirá [Creando librerías](guide/creating-libraries). -Whether you decide to package functionality as a library is an architectural decision, similar to deciding whether a piece of functionality is a component or a service, or deciding on the scope of a component. +Si tu decides empaquetar una funcionalidad como una librería es una decisión de arquitectura, similar a decidir entre si una pieza de funcionalidad es un componente o un servicio, o decidir el alcance de un componente. -Packaging functionality as a library forces the artifacts in the library to be decoupled from the application's business logic. -This can help to avoid various bad practices or architecture mistakes that can make it difficult to decouple and reuse code in the future. +Empaquetar funcionalidad como una librería fuerza a +que los artefactos en la librería puedan ser desacoplados de la lógica de negocio de la aplicación. +Esto puede ayudar a evitar varias malas practicas o errores de arquitectura que puede hacer difícil desacoplar y re usar código en el futuro. -Putting code into a separate library is more complex than simply putting everything in one app. -It requires more of an investment in time and thought for managing, maintaining, and updating the library. -This complexity can pay off, however, when the library is being used in multiple apps. +Poniendo el código dentro de una librería separada es más complejo que simplemente poner todo en una sola aplicación. +Esto requiere una inversión mayor de tiempo y pensar para administrar, mantener y actualizar la librería. +Sin embargo esta complejidad puede valer la pena cuando la librería esta siendo usada en múltiples aplicaciones.
-Note that libraries are intended to be used by Angular apps. -To add Angular functionality to non-Angular web apps, you can use [Angular custom elements](guide/elements). +Note que las librerías están destinadas para ser usadas por aplicaciones Angular. +Para agregar funcionalidad de Angular hacia una aplicación web que no es Angular, puedes usar [Angular custom elements](guide/elements). -
+
\ No newline at end of file From 79da3e8cd2463f15030b652ec076ef3b8090828b Mon Sep 17 00:00:00 2001 From: Antonio Cardenas Date: Tue, 6 Apr 2021 18:33:13 -0600 Subject: [PATCH 224/253] docs: traducir marketing/resources.json (#323) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Michael Prentice Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/marketing/presskit.html | 10 +- aio/content/marketing/resources.json | 353 +++++++++++++-------------- 2 files changed, 176 insertions(+), 187 deletions(-) diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index 507bd8948809..ebc9bdd77250 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -11,7 +11,7 @@
LOGO DE ANGULAR
Los gráficos del logotipo disponibles para descargar en esta página se proporcionan en CC BY 4.0. Esto significa que puedes hacer lo que quieras con él, incluso imprimirlo en camisetas, crear tu - propias variaciones, o tatuartele sobre el ombligo. + propias variaciones, o tatuártelo sobre el ombligo.

Te pedimos que no utilices el resto de los gráficos del sitio en otros contextos para evitar confusiones.
@@ -74,7 +74,7 @@
LOGOTIPO DE UN COLOR

LOGOTIPO INVERSO DE UN COLOR

- Logo Angular White Semi-Transparent (png) - Logo de Angular Blanco Semi-Transparente (png) - Descargar

@@ -271,11 +271,11 @@
HTTP

i18n

- Icono de HTTP (png) - Icono de i18n (png) - Descargar

- Icono de HTTP (svg) - Icono de i18n (svg) - Descargar

@@ -658,7 +658,7 @@
Proyectos de terceros

`angular2-`

- Bien para usar + Utiliza

`ng-`

`angular-`
diff --git a/aio/content/marketing/resources.json b/aio/content/marketing/resources.json index d2ec90a6ff96..a96f897531eb 100644 --- a/aio/content/marketing/resources.json +++ b/aio/content/marketing/resources.json @@ -1,37 +1,37 @@ { - "Community": { + "Comunidad": { "order": 3, "subCategories": { - "Community Curations": { + "Elecciones de la comunidad": { "order": 1, "resources": { "awesome-angular-components": { - "desc": "A community index of components and libraries maintained on GitHub", - "title": "Catalog of Angular Components & Libraries", + "desc": "Un índice de componentes y librerías de la comunidad mantenido en GitHub", + "title": "Catálogo de librerías y componentes Angular", "url": "https://github.com/brillout/awesome-angular-components" }, "angular-ru": { - "desc": "Angular-RU Community on GitHub is a single entry point for all resources, chats, podcasts and meetups for Angular in Russia.", + "desc": "La comunidad Angular-RU en GitHub es un punto de entrada único para todos los recursos, chats, podcasts y reuniones de Angular en Rusia.", "title": "Angular Conferences and Angular Camps in Moscow, Russia.", "url": "https://angular-ru.github.io/" }, "made-with-angular": { - "desc": "A showcase of web apps built with Angular.", - "title": "Made with Angular", + "desc": "Una muestra de aplicaciones web creadas con Angular.", + "title": "Hecho con Angular", "url": "https://www.madewithangular.com/" }, "angular-subreddit": { - "desc": "An Angular-dedicated subreddit.", + "desc": "Un subreddit dedicado a Angular.", "title": "Angular Subreddit", "url": "https://www.reddit.com/r/Angular2/" }, "angular-devto": { - "desc": "Read and share content and chat about Angular on DEV Community.", + "desc": "Lee, comparte contenido y chatea sobre Angular en la comunidad DEV.", "url": "https://dev.to/t/angular", "title": "DEV Community" }, "angular-in-depth": { - "desc": "The place where advanced Angular concepts are explained", + "desc": "El lugar donde se explican los conceptos de Angular avanzados", "url": "https://blog.angularindepth.com", "title": "Angular In Depth" } @@ -41,25 +41,25 @@ "order": 3, "resources": { "sdfjkdkfj": { - "desc": "Adventures in Angular is a weekly podcast dedicated to the Angular platform and related technologies, tools, languages, and practices.", + "desc": "Adventures in Angular es un podcast semanal dedicado a la plataforma Angular y tecnologías relacionadas, herramientas, lenguajes y prácticas.", "logo": "", "title": "Adventures in Angular", "url": "https://devchat.tv/adv-in-angular/" }, "sdlkfjsldfkj": { - "desc": "Weekly video podcast hosted by Jeff Whelpley with all the latest and greatest happenings in the wild world of Angular.", + "desc": "Podcast de video semanal presentado por Jeff Whelpley con los últimos y más grandes acontecimientos en el salvaje mundo de Angular.", "logo": "", "title": "AngularAir", "url": "https://angularair.com/" }, "sdlkfjsldfkz": { - "desc": "A weekly German podcast for Angular on the go", + "desc": "Un podcast alemán semanal para Angular muy activo.", "logo": "", - "title": "Happy Angular Podcast", + "title": "Podcast de Happy Angular", "url": "https://happy-angular.de/" }, "ngruair": { - "desc": "Russian language video podcast about Angular.", + "desc": "Podcast de video en ruso sobre Angular.", "logo": "", "title": "NgRuAir", "url": "https://github.com/ngRuAir/ngruair" @@ -68,80 +68,75 @@ } } }, - "Development": { + "Desarrollo": { "order": 1, "subCategories": { - "Cross-Platform Development": { + "Desarrollo multiplataforma": { "order": 5, "resources": { "a3b": { - "desc": "Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps.", + "desc": "Ionic ofrece una biblioteca de componentes y herramientas HTML, CSS y JS optimizados para dispositivos móviles para crear aplicaciones web nativas y progresivas altamente interactivas.", "logo": "http://ionicframework.com/img/ionic-logo-white.svg", "title": "Ionic", "url": "https://ionicframework.com/docs" }, "a4b": { - "desc": "Electron Platform for Angular.", + "desc": "Plataforma de Electron para Angular.", "logo": "", "title": "Electron", "url": "https://github.com/maximegris/angular-electron" }, "ab": { - "desc": "NativeScript is how you build cross-platform, native iOS and Android apps with Angular and TypeScript. Get 100% access to native APIs via JavaScript and reuse of packages from NPM, CocoaPods and Gradle. Open source and backed by Telerik.", + "desc": "NativeScript es la forma de crear aplicaciones nativas de iOS y Android multiplataforma con Angular y TypeScript. Obtenga acceso al 100% a las API nativas a través de JavaScript y reutilice paquetes de NPM, CocoaPods y Gradle. Código abierto y respaldado por Telerik.", "logo": "", "title": "NativeScript", "url": "https://docs.nativescript.org/angular/start/introduction" } } }, - "Data Libraries": { + "Librerías de datos": { "order": 3, "resources": { - "formly": { - "desc": "Formly is a dynamic (JSON powered) form library, built on top of Angular Reactive Forms.", - "title": "Formly", - "url": "https://formly.dev" - }, "rx-web": { - "desc": "RxWeb Reactive Form Validators provides all types of complex, conditional, cross field, and dynamic validation on validator-based reactive forms, model-based reactive forms, and template driven forms.", - "title": "RxWeb Reactive Form Validators", + "desc": "RxWeb Reactive Form Validators proporciona todo tipo de validación compleja, condicional, de campo cruzado y dinámica en formularios reactivos basados en validadores, formularios reactivos basados en modelos y formularios controlados por plantillas.", + "title": "Validadores de formularios reactivos RxWeb", "url": "https://www.rxweb.io" }, "-KLIzHDRfiB3d7W7vk-e": { - "desc": "Reactive Extensions for Angular", + "desc": "Extensiones reactivas para Angular", "title": "ngrx", "url": "https://ngrx.io/" }, "ngxs": { - "desc": "NGXS is a state management pattern + library for Angular. NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NgRx but reduces boilerplate by using modern TypeScript features such as classes and decorators.", + "desc": "NGXS es un patrón de gestión de estado + librería para Angular. NGXS se basa en el patrón CRS implementado popularmente en librerías como Redux y NgRx, pero reduce el texto estándar mediante el uso de características modernas de TypeScript, como clases y decoradores.", "title": "NGXS", "url": "https://ngxs.io/" }, "akita": { - "desc": "Akita is a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Store model.", + "desc": "Akita es un patrón de administración de estado, construido sobre RxJS, que toma la idea de múltiples almacenes de datos de Flux y las actualizaciones inmutables de Redux, junto con el concepto de transmisión de datos, para crear el modelo Observable Data Store.", "title": "Akita", "url": "https://netbasal.gitbook.io/akita/" }, "ab": { - "desc": "The official library for Firebase and Angular", + "desc": "La biblioteca oficial de Firebase y Angular", "logo": "", "title": "Angular Fire", - "url": "https://github.com/angular/angularfire2" + "url": "https://github.com/angular/angularfire" }, "ab2": { - "desc": "Use Angular and Meteor to build full-stack JavaScript apps for Mobile and Desktop.", + "desc": "Utilice Angular y Meteor para crear aplicaciones JavaScript de pila completa para dispositivos móviles y de escritorio.", "logo": "http://www.angular-meteor.com/images/logo.png", "title": "Meteor", "url": "https://github.com/urigo/angular-meteor" }, "ab3": { - "desc": "Apollo is a data stack for modern apps, built with GraphQL.", + "desc": "Apollo es una pila de datos para aplicaciones modernas, construida con GraphQL.", "logo": "http://docs.apollostack.com/logo/large.png", "title": "Apollo", "url": "https://www.apollographql.com/docs/angular/" }, "ngx-api-utils": { - "desc": "ngx-api-utils is a lean library of utilities and helpers to quickly integrate any HTTP API (REST, Ajax, and any other) with Angular.", + "desc": "ngx-api-utils es una biblioteca ajustada de utilidades y ayudantes para integrar rápidamente cualquier API HTTP (REST, Ajax y cualquier otra) con Angular.", "logo": "", "title": "ngx-api-utils", "url": "https://github.com/ngx-api-utils/ngx-api-utils" @@ -152,281 +147,274 @@ "order": 1, "resources": { "ab": { - "desc": "VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.", + "desc": "VS Code es una herramienta ligera y gratuita para editar y depurar aplicaciones web.", "logo": "", "title": "Visual Studio Code", "url": "http://code.visualstudio.com/" }, "ab2": { - "desc": "Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js", + "desc": "IDE ligero pero potente, perfectamente equipado para el desarrollo complejo del lado del cliente y el desarrollo del lado del servidor con Node.js", "logo": "", "title": "WebStorm", "url": "https://www.jetbrains.com/webstorm/" }, "ab3": { - "desc": "Capable and Ergonomic Java * IDE", + "desc": "Java capaz y ergonómico * IDE", "logo": "", "title": "IntelliJ IDEA", "url": "https://www.jetbrains.com/idea/" }, "angular-ide": { - "desc": "Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.", + "desc": "Construido ante todo para Angular. Configuración llave en mano para principiantes; poderoso para expertos.", "title": "Angular IDE by Webclipse", "url": "https://www.genuitec.com/products/angular-ide" }, "amexio-canvas": { - "desc": "Amexio Canvas is Drag and Drop Environment to create Fully Responsive Web and Smart Device HTML5/Angular Apps. Code will be auto generated and hot deployed by the Canvas for live testing. Out of the box 50+ Material Design Theme support. Commit your code to GitHub public or private repository.", + "desc": "Amexio Canvas es un entorno de arrastrar y soltar para crear aplicaciones web y de dispositivos inteligentes HTML5 / Angular totalmente sensibles El código se generará automáticamente y se implementará en caliente mediante Canvas para realizar pruebas en vivo. Soporte listo para usar 50+ Temas de Diseño Material. Confirme su código en el repositorio público o privado de GitHub.", "title": "Amexio Canvas Web Based Drag and Drop IDE by MetaMagic", "url": "https://amexio.tech/" } } }, - "Tooling": { + "Montaje": { "order": 2, "resources": { "a1": { - "desc": "A Google Chrome Dev Tools extension for debugging Angular applications.", + "desc": "Una extensión de Google Chrome Dev Tools para depurar aplicaciones angular.", "logo": "https://augury.angular.io/images/augury-logo.svg", "title": "Augury", "url": "http://augury.angular.io/" }, "b1": { - "desc": "Server-side Rendering for Angular apps.", + "desc": "Representación del lado del servidor para aplicaciones Angular.", "logo": "https://cloud.githubusercontent.com/assets/1016365/10639063/138338bc-7806-11e5-8057-d34c75f3cafc.png", "title": "Angular Universal", "url": "https://angular.io/guide/universal" }, "c1": { - "desc": "Lightweight development only Node.js® server", + "desc": "Servidor Node.js® de desarrollo ligero", "logo": "", "title": "Lite-server", "url": "https://github.com/johnpapa/lite-server" }, "cli": { - "desc": "The official Angular CLI makes it easy to create and develop applications from initial commit to production deployment. It already follows our best practices right out of the box!", + "desc": "La CLI oficial de Angular facilita la creación y el desarrollo de aplicaciones desde el compromiso inicial hasta la implementación de producción. ¡Ya sigue nuestras mejores prácticas desde el primer momento!", "title": "Angular CLI", "url": "https://cli.angular.io" }, "d1": { - "desc": "Static analysis for Angular projects.", + "desc": "Análisis estático para proyectos Angular.", "logo": "", "title": "Codelyzer", "url": "https://github.com/mgechev/codelyzer" }, "f1": { - "desc": "This tool generates dedicated documentation for Angular applications.", + "desc": "Esta herramienta genera documentación dedicada para aplicaciones Angular.", "logo": "", "title": "Compodoc", "url": "https://github.com/compodoc/compodoc" }, "angular-playground": { - "desc": "UI development environment for building, testing, and documenting Angular applications.", - "title": "Angular Playground", + "desc": "Entorno de desarrollo de la interfaz de usuario para crear, probar y documentar aplicaciones Angular.", + "title": "Patio de juegos Angular", "url": "http://www.angularplayground.it/" }, "nx": { - "desc": "Nx (Nrwl Extensions for Angular) is an open source toolkit built on top of Angular CLI to help enterprise teams develop Angular at scale.", + "desc": "Nx (Nrwl Extensions for Angular) es un kit de herramientas de código abierto construido sobre Angular CLI para ayudar a los equipos empresariales a desarrollar Angular a escala.", "title": "Nx", "logo": "https://nrwl.io/assets/nx-logo.png", "url": "https://nrwl.io/nx" }, "uijar": { - "desc": "A drop in module to automatically create a living style guide based on the test you write for your components.", + "desc": "Un módulo desplegable para crear automáticamente una guía de estilo viva basada en la prueba que escribe para sus componentes.", "logo": "", - "title": "UI-jar - Test Driven Style Guide Development", + "title": "UI-jar: desarrollo de guías de estilo basado en pruebas", "url": "https://github.com/ui-jar/ui-jar" }, "protactor": { - "desc": "The official end to end testing framework for Angular apps", + "desc": "El marco oficial de prueba de extremo a extremo para aplicaciones Angular", "logo": "", "title": "Protractor", "url": "https://protractor.angular.io/" - }, - "scully": { - "desc": "Scully (Jamstack Toolchain for Angular) makes building, testing, and deploying Jamstack apps extremely simple.", - "title": "Scully", - "logo": "https://raw.githubusercontent.com/scullyio/scully/main/assets/logos/PNG/Green/scullyio-logo-green.png", - "url": "https://scully.io" } } }, - "UI Components": { + "Componentes UI": { "order": 4, "resources": { "AngularUIToolkit": { - "desc": "Angular UI Toolkit: 115 professionally maintained UI components ranging from a robust grid to charts and more. Try for free & build Angular apps faster.", - "title": "Angular UI Toolkit", + "desc": "Kit de herramientas de interfaz de usuario angular: 115 componentes de interfaz de usuario mantenidos profesionalmente que van desde una cuadrícula robusta hasta gráficos y más. Pruébelo gratis y cree aplicaciones Angular más rápido.", + "title": "Kit de herramientas Angular UI", "url": "https://www.angular-ui-tools.com" }, "SenchaforAngular": { - "desc": "Build modern web apps faster with 115+ pre-built UI components. Try for free and download today.", - "title": "Sencha for Angular", + "desc": "Cree aplicaciones web modernas más rápido con más de 115 UI Componentes prediseñados. Pruébelo gratis y descárguelo hoy.", + "title": "Sencha para Angular", "url": "https://www.sencha.com/products/extangular/" }, "IgniteUIforAngular": { - "desc": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps.", - "title": "Ignite UI for Angular", + "desc": "Ignite UI para Angular es un kit de herramientas Angular sin dependencia para crear aplicaciones web modernas.", + "title": "Ignite UI para Angular", "url": "https://www.infragistics.com/products/ignite-ui-angular?utm_source=angular.io&utm_medium=Referral&utm_campaign=Angular" }, "DevExtreme": { - "desc": "50+ UI components including data grid, pivot grid, scheduler, charts, editors, maps and other multi-purpose controls for creating highly responsive web applications for touch devices and traditional desktops.", + "desc": "Más de 50 componentes UI que incluyen cuadrícula de datos, cuadrícula dinámica, programador, gráficos, editores, mapas y otros controles multipropósito para crear aplicaciones web altamente receptivas para dispositivos táctiles y escritorios tradicionales.", "title": "DevExtreme", "url": "https://js.devexpress.com/Overview/Angular/" }, "234237": { - "desc": "UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences", - "title": "Clarity Design System", + "desc": "Las pautas de UX, el marco HTML / CSS y los componentes Angular trabajan juntos para crear experiencias excepcionales", + "title": "Sistema de diseño de Clarity", "url": "https://vmware.github.io/clarity/" }, "-KMVB8P4TDfht8c0L1AE": { - "desc": "The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.", + "desc": "La versión de Angular de la biblioteca Bootstrap de Angular UI. Esta biblioteca se está construyendo desde cero en Typescript utilizando el marco CSS Bootstrap 4.", "title": "ng-bootstrap", "url": "https://ng-bootstrap.github.io/" }, "4ab": { - "desc": "Native Angular components & directives for Lightning Design System", + "desc": "Directivas y componentes Angular nativos para Lightning Design System", "logo": "http://ng-lightning.github.io/ng-lightning/img/shield.svg", "title": "ng-lightning", "url": "http://ng-lightning.github.io/ng-lightning/" }, "7ab": { - "desc": "UI components for hybrid mobile apps with bindings for both Angular & AngularJS.", + "desc": "Componentes UI para aplicaciones móviles híbridas con enlaces para Angular y AngularJS.", "title": "Onsen UI", "url": "https://onsen.io/v2/" }, "a2b": { - "desc": "PrimeNG is a collection of rich UI components for Angular", + "desc": "PrimeNG es una colección rica de componentes UI para Angular", "logo": "http://www.primefaces.org/primeng/showcase/resources/images/primeng.svg", "title": "Prime Faces", "url": "http://www.primefaces.org/primeng/" }, "a3b": { - "desc": "A professional grade library of Angular UI components written in TypeScript that includes our Data Grid, TreeView, Charts, Editors, DropDowns, DatePickers, and many more. Features include support for AOT compilation, Tree Shaking for high-performance, localization, and accessibility.", + "desc": "Una biblioteca de grado profesional de los Componentes UI de Angular escrita en TypeScript que incluye nuestro Data Grid, TreeView, Charts, Editors, DropDowns, DatePickers y muchos más. Las características incluyen soporte para la compilación AOT, Tree Shaking para alto rendimiento, localización y accesibilidad.", "logo": "", "title": "Kendo UI", "url": "http://www.telerik.com/kendo-angular-ui/" }, "a5b": { - "desc": "High-performance UI controls with the most complete Angular support available. Wijmo’s controls are all written in TypeScript and have zero dependencies. FlexGrid control includes full declarative markup, including cell templates.", + "desc": "Controles UI de Alto-Rendimiento con el soporte más completo para Angular. Wijmo’s controla todo lo que esta escrito en TypeScript y no tiene ninguna dependecia. El control FlexGrid incluye marcado declarativo completo, incluyendo plantillas de celda.", "logo": "http://wijmocdn.azureedge.net/wijmositeblob/wijmo-theme/logos/wijmo-55.png", "title": "Wijmo", "url": "http://wijmo.com/products/wijmo-5/" }, "a6b": { - "desc": "Material design inspired UI components for building great web apps. For mobile and desktop.", + "desc": "El diseño de materiales inspiró la interfaz de usuario de Componentes para crear excelentes aplicaciones web. Para dispositivos móviles y de escritorio.", "logo": "", "title": "Vaadin", "url": "https://vaadin.com/elements" }, "a7b": { - "desc": "Native Angular directives for Bootstrap", + "desc": "Directivas Angular nativas para Bootstrap", "logo": "", "title": "ngx-bootstrap", "url": "http://valor-software.com/ngx-bootstrap/#/" }, "ab": { - "desc": "Material Design components for Angular", + "desc": "Componentes de Material Design para Angular", "logo": "", "title": "Angular Material", "url": "https://material.angular.io/" }, "mcc": { - "desc": "Material components made by the community", + "desc": "Componentes Material fabricados por la comunidad", "logo": "", "title": "Material Community Components", "url": "https://github.com/tiaguinho/material-community-components" }, "mosaic": { - "desc": "Positive Technologies UI components based on Angular", + "desc": "Positive Technologies Componentes UI basada en Angular", "logo": "https://i.ibb.co/fQNPgv6/logo-png-200.png", - "title": "Mosaic - Angular UI Components", + "title": "Mosaic - Angular Componentes UI", "url": "https://github.com/positive-js/mosaic" }, "ngzorro": { - "desc": "A set of enterprise-class UI components based on Ant Design and Angular", - "title": "Ant Design of Angular (ng-zorro-antd)", + "desc": "Un conjunto de UI de Componentes de clase empresarial basada en Ant Design y Angular", + "title": "Ant Design de Angular (ng-zorro-antd)", "url": "https://ng.ant.design/docs/introduce/en" }, "ngzorromobile": { - "desc": "A set of enterprise-class mobile UI components based on Ant Design Mobile and Angular", - "title": "Ant Design Mobile of Angular (ng-zorro-antd-mobile)", + "title": "Ant Design Mobile de Angular (ng-zorro-antd-mobile)", "url": "http://ng.mobile.ant.design/#/docs/introduce/en" }, "aggrid": { - "desc": "A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.", + "desc": "Una cuadrícula de datos para Angular con características de estilo empresarial como clasificación, filtrado, renderizado personalizado, edición, agrupación, agregación y pivotación.", "title": "ag-Grid", "url": "https://www.ag-grid.com/best-angular-2-data-grid/" }, "angular-slickgrid": { - "desc": "Angular-SlickGrid is a wrapper of the lightning fast & customizable SlickGrid datagrid library with Bootstrap 3,4 themes", + "desc": "Angular-SlickGrid es un contenedor de la biblioteca de cuadrículas de datos SlickGrid, ultrarrápida y personalizable, con temas de Bootstrap 3,4", "title": "Angular-Slickgrid", "url": "https://github.com/ghiscoding/Angular-Slickgrid" }, "fancygrid": { - "desc": "Angular grid library with charts integration and server communication for Enterprise.", + "desc": "Biblioteca de cuadrícula Angular con integración de gráficos y comunicación con el servidor para empresas.", "title": "FancyGrid", "url": "https://fancygrid.com/docs/getting-started/angular" }, "ngx-smart-modal": { - "desc": "Angular smart, light and fast modal handler to manage modals and data everywhere.", + "desc": "Controlador modal Angular inteligente, ligero y rápido para administrar modales y datos en todas partes.", "title": "ngx-smart-modal", "url": "https://biig-io.github.io/ngx-smart-modal" }, "jqwidgets": { - "desc": "Angular UI Components including data grid, tree grid, pivot grid, scheduler, charts, editors and other multi-purpose components", + "desc": "Interfaz de usuario de Angular Componentes que incluye cuadrícula de datos, cuadrícula de árbol, cuadrícula dinámica, programador, gráficos, editores y otros componentes multipropósito", "title": "jQWidgets", "url": "https://www.jqwidgets.com/angular/" }, "amexio": { - "desc": "Amexio is a rich set of Angular components powered by HTML5 & CSS3 for Responsive Web Design and 80+ built-in Material Design Themes. Amexio has 3 Editions, Standard, Enterprise and Creative. Std Edition consists of basic UI Components which include Grid, Tabs, Form Inputs and so on. While Enterprise Edition consists of components like Calendar, Tree Tabs, Social Media Logins (Facebook, GitHub, Twitter and so on) and Creative Edition is focused building elegant and beautiful websites. With more than 200+ components/features. All the editions are open-sourced and free, based on Apache 2 License.", - "title": "Amexio - Angular Extensions", + "desc": "Amexio es un extenso conjunto de componentes Angular impulsados por HTML5 y CSS3 para diseño web receptivo y más de 80 temas de diseño de materiales integrados. Amexio tiene 3 ediciones, Standard, Enterprise y Creative. Std Edition consta de una interfaz de usuario básica de Componentes que incluye cuadrícula, pestañas, entradas de formulario, etc. Mientras que Enterprise Edition consta de componentes como Calendario, pestañas de árbol, inicios de sesión en redes sociales (Facebook, GitHub, Twitter, etc.) y Creative Edition se centra en la construcción de sitios web elegantes y hermosos. Con más de 200 componentes/características. Todas las ediciones son de código abierto y gratuitas, basadas en la licencia Apache 2.", + "title": "Amexio - Extensiones Angular", "url": "http://www.amexio.tech/", "logo": "http://www.amexio.org/amexio-logo.png" }, "bm": { - "desc": "A lightweight Material Design library for Angular, based upon Google's Material Components for the Web", + "desc": "Una biblioteca ligera de diseño de materiales para Angular, basada en los componentes de materiales de Google para la Web", "logo": "https://blox.src.zone/assets/bloxmaterial.03ecfe4fa0147a781487749dc1cc4580.svg", "title": "Blox Material", "url": "https://github.com/src-zone/material" }, "essentialjs2": { - "desc": "Essential JS 2 for Angular is a collection modern TypeScript based true Angular Components. It has support for Ahead Of Time (AOT) compilation and Tree-Shaking. All the components are developed from the ground up to be lightweight, responsive, modular and touch friendly.", + "desc": "Essential JS 2 para Angular es una colección de componentes Angular verdaderos basados en TypeScript modernos. Tiene soporte para la compilación Ahead Of Time (AOT) y Tree-Shaking. Todos los componentes se desarrollan desde cero para ser livianos, receptivos, modulares y fáciles de tocar.", "title": "Essential JS 2", "url": "https://www.syncfusion.com/products/angular-js2" }, "trulyui": { - "desc": "TrulyUI is an Angular UI Framework especially developed for Desktop Applications based on Web Components using the greatest technologies of the world.", + "desc": "TrulyUI es un marco de interfaz de usuario Angular especialmente desarrollado para aplicaciones de escritorio basadas en componentes web que utilizan las mejores tecnologías del mundo.", "title": "Truly UI", "url": "http://truly-ui.com" }, "ngsqui": { - "desc": "Simple Quality UI (SQ-UI) is a flexible and easily customizable UI-kit, aiming to provide maximum efficiency with as little overhead as possible. Driven by the idea that it should be strictly \"for developers by developers\", every new feature release includes functionalities demanded by the developers who are using it.", + "desc": "La interfaz de usuario de calidad simple (SQ-UI) es un kit de interfaz de usuario flexible y fácilmente personalizable, cuyo objetivo es proporcionar la máxima eficiencia con la menor sobrecarga posible. Impulsado por la idea de que debería ser estrictamente \" para desarrolladores por desarrolladores \", cada lanzamiento de nuevas funciones incluye funcionalidades exigidas por los desarrolladores que lo utilizan.", "logo": "https://sq-ui.github.io/ng-sq-ui/_media/sq-ui-logo.png", "title": "Simple Quality UI", "url": "https://sq-ui.github.io/ng-sq-ui/#/" }, "smart": { - "desc": "Web Components for Angular. Dependency-free Angular components for building modern and mobile-friendly web apps", - "title": "Smart Web Components", + "desc": "Componentes web para Angular. Componentes Angular sin dependencias para crear aplicaciones web modernas y aptas para dispositivos móviles", + "title": "Componentes web inteligentes", "url": "https://www.htmlelements.com/angular/" }, "AlyleUI": { - "desc": "Minimal Design, a set of components for Angular.", + "desc": "Minimal Design, un conjunto de componentes para Angular.", "title": "Alyle UI", "url": "https://alyle-ui.firebaseapp.com/" }, "nebular": { - "desc": "Theme System, UI Components, Auth and Security for your next Angular application.", + "desc": "Theme System, Componentes UI, Autenticación y seguridad para su próxima aplicación Angular.", "title": "Nebular", "url": "https://akveo.github.io/nebular/" }, "carbondesignsystem": { - "desc": "An Angular implementation of the Carbon Design System for IBM.", + "desc": "Una implementación Angular del Carbon Design System para IBM.", "title": "Carbon Components Angular", "url": "https://angular.carbondesignsystem.com/" }, "jigsaw": { - "desc": "Jigsaw provides a set of web components based on Angular. It is supporting the development of all applications of Big Data Product of ZTE (https://www.zte.com.cn).", + "desc": "Jigsaw proporciona un conjunto de componentes web basados en Angular. Está apoyando el desarrollo de todas las aplicaciones de Big Data Producto de ZTE (https://www.zte.com.cn).", "title": "Awade Jigsaw (Chinese)", "url": "https://jigsaw-zte.gitee.io" } @@ -434,295 +422,296 @@ } } }, - "Education": { + "Educación": { "order": 2, "subCategories": { - "Books": { + "Libros": { "order": 1, "resources": { "-KLIzGEp8Mh5W-FkiQnL": { - "desc": "Your quick, no-nonsense guide to building real-world apps with Angular", - "title": "Learning Angular - Second Edition", + "desc": "Tu guía rápida y sensata para crear aplicaciones del mundo real con Angular", + "title": "Aprendiendo Angular - Segunda edición", "url": "https://www.packtpub.com/web-development/learning-angular-second-edition" }, "3ab": { - "desc": "More than 15 books from O'Reilly about Angular", - "title": "O'Reilly Media", + "desc": "Más de 15 libros de O'Reilly sobre Angular", + "title": "Medios de comunicación O'Reilly", "url": "https://ssearch.oreilly.com/?q=angular" }, "a5b": { - "desc": "The in-depth, complete, and up-to-date book on Angular. Become an Angular expert today.", + "desc": "El libro en profundidad, completo y actualizado sobre Angular. Conviértete en un experto en Angular hoy.", "title": "ng-book", "url": "https://www.ng-book.com/2/" }, "a7b": { - "desc": "This ebook will help you getting the philosophy of the framework: what comes from 1.x, what has been introduced and why", - "title": "Becoming a Ninja with Angular", + "desc": "Este libro electrónico te ayudará a comprender la filosofía del marco: qué proviene de 1.x, qué se ha introducido y por qué", + "title": "Convertirse en un ninja con Angular", "url": "https://books.ninja-squad.com/angular" }, "ab": { - "desc": "More than 10 books from Packt Publishing about Angular", + "desc": "Más de 10 libros de Packt Publicados sobre Angular", "title": "Packt Publishing", "url": "https://www.packtpub.com/catalogsearch/result/?q=angular" }, "cnoring-rxjs-fundamentals": { - "desc": "A free book that covers all facets of working with Rxjs from your first Observable to how to make your code run at optimal speed with Schedulers.", + "desc": "Un libro gratuito que cubre todas las facetas del trabajo con Rxjs, desde tu primer Observable hasta cómo hacer que tu código se ejecute a una velocidad óptima con Schedulers.", "title": "RxJS Ultimate", "url": "https://chrisnoring.gitbooks.io/rxjs-5-ultimate/content/" }, "vsavkin-angular-router": { - "desc": "This book is a comprehensive guide to the Angular router written by its designer. The book explores the library in depth, including the mental model, design constraints, subtleties of the API.", + "desc": "Este libro es una guía completa del enrutador Angular escrita por su diseñador. El libro explora la biblioteca en profundidad, incluido el modelo mental, las limitaciones de diseño y las sutilezas de la API.", "title": "Angular Router", "url": "https://leanpub.com/router" }, "vsavkin-essential-angular": { - "desc": "The book is a short, but at the same time, fairly complete overview of the key aspects of Angular written by its core contributors Victor Savkin and Jeff Cross. The book will give you a strong foundation. It will help you put all the concepts into right places. So you will get a good understanding of why the framework is the way it is.", - "title": "Essential Angular", + "desc": "El libro es una descripción breve, pero al mismo tiempo bastante completa, de los aspectos clave de Angular escrita por sus colaboradores principales, Victor Savkin y Jeff Cross. El libro te dará una base sólida. Te ayudará a poner todos los conceptos en los lugares correctos. De este modo, comprenderás bien por qué el marco es como es.", + "title": "Angular Esencial", "url": "https://gumroad.com/l/essential_angular" }, "angular-buch": { - "desc": "The first German book about Angular. It gives you a detailed practical overview of the key concepts of the platform. In each chapter a sample application is built upon with a new Angular topic. All sources are available on GitHub.", + "desc": "El primer libro alemán sobre Angular. Te brinda una descripción práctica detallada de los conceptos clave de la plataforma. En cada capítulo se crea una aplicación de muestra con un nuevo tema de Angular. Todas las fuentes están disponibles en GitHub.", "logo": "https://angular-buch.com/assets/img/brand.svg", - "title": "Angular-Buch (German)", + "title": "Angular-Buch (Alemán)", "url": "https://angular-buch.com/" }, "wishtack-guide-angular": { - "desc": "The free, open-source and up-to-date Angular guide. This pragmatic guide is focused on best practices and will drive you from scratch to cloud.", + "desc": "La guía de Angular gratuita, de código abierto y actualizada. Esta guía pragmática se centra en las mejores prácticas y lo llevará de cero a la nube.", "logo": "https://raw.githubusercontent.com/wishtack/gitbook-guide-angular/master/.gitbook/assets/wishtack-logo-with-text.png", - "title": "The Angular Guide by Wishtack (Français)", + "title": "La guía de Angular de Wishtack (Francés)", "url": "https://guide-angular.wishtack.io/" }, "ab5": { - "desc": "How to build Angular applications using NGRX", + "desc": "Cómo construir aplicaciones Angular usando NGRX", "logo": "", - "title": "Architecting Angular Applications with NGRX", + "title": "Arquitectura de aplicaciones Angular con NGRX", "url": "https://www.packtpub.com/web-development/architecting-angular-applications-redux" }, "dwa": { - "desc": "Practical journey with Angular framework, ES6, TypeScript, webpack and Angular CLI.", - "title": "Developing with Angular", + "desc": "Viaje práctico con Angular framework, ES6, TypeScript, webpack y Angular CLI.", + "title": "Desarrollando con Angular", "url": "https://leanpub.com/developing-with-angular" } } }, - "Online Training": { + "Entrenamiento en linea": { "order": 3, "resources": { "angular-dyma": { - "desc": "Learn Angular and all its ecosystem (Material, Flex-layout, Ngrx and more) from scratch.", - "title": "Dyma (French)", + "desc": "Aprende Angular y todo su ecosistema (Material, Flex-layout, Ngrx y más) desde cero.", + "title": "Dyma (francés)", "url": "https://dyma.fr/angular" }, "-KLIBoTWXMiBcvG0dAM6": { - "desc": "This course introduces you to the essentials of this \"superheroic\" framework, including declarative templates, two-way data binding, and dependency injection.", - "title": "Angular: Essential Training", + "desc": "Este curso le presenta los conceptos básicos de este marco \"superheroico\", incluidas las plantillas declarativas, el enlace de datos bidireccional y la inyección de dependencias.", + "title": "Angular: entrenamiento esencial", "url": "https://www.lynda.com/AngularJS-tutorials/Angular-2-Essential-Training/540347-2.html" }, "-KLIzGq3CiFeoZUemVyE": { - "desc": "Learn the core concepts, play with the code, become a competent Angular developer", - "title": "Angular Concepts, Code and Collective Wisdom", + "desc": "Aprenda los conceptos básicos, juegue con el código, conviértase en un desarrollador Angular competente", + "title": "Conceptos Angular, código y sabiduría colectiva", "url": "https://www.udemy.com/angular-2-concepts-code-and-collective-wisdom/" }, "-KLIzHwg-glQLXni1hvL": { - "desc": "Spanish language Angular articles and information", + "desc": "Artículos e información de Angular en español", "title": "Academia Binaria (español)", "url": "http://academia-binaria.com/" }, "-KN3uNQvxifu26D6WKJW": { - "category": "Education", - "desc": "Create the future of web applications by taking Angular for a test drive.", - "subcategory": "Online Training", - "title": "CodeSchool: Accelerating Through Angular", + "category": "Educación", + "desc": "Cree el futuro de las aplicaciones web probando Angular.", + "subcategory": "Entrenamiento en linea", + "title": "CodeSchool: Acelerando a través de Angular", "url": "https://www.codeschool.com/courses/accelerating-through-angular-2" }, "angular-playbook": { - "desc": "Learn advanced Angular best practices for enterprise teams, created by Nrwl.io.", + "desc": "Aprenda las mejores prácticas avanzadas de Angular para equipos empresariales, creadas por Nrwl.io.", "logo": "https://nrwl.io/assets/logo_footer_2x.png", - "title": "Angular Enterprise Playbook", + "title": "Libro de estrategias de Angular Enterprise", "url": "https://angularplaybook.com" }, "a2b": { - "desc": "Hundreds of Angular courses for all skill levels", + "desc": "Cientos de cursos Angular para todos los niveles", "logo": "", "title": "Pluralsight", "url": "https://www.pluralsight.com/paths/angular" }, "ab3": { - "desc": "Angular courses hosted by Udemy", + "desc": "Cursos de Angular alojados por Udemy", "logo": "", "title": "Udemy", "url": "https://www.udemy.com/courses/search/?q=angular" }, "ab4": { - "desc": "Angular Fundamentals and advanced topics focused on Redux Style Angular Applications", + "desc": "Fundamentos de Angular y temas avanzados enfocados en Aplicaciones Angular de Estilo Redux", "logo": "", "title": "Egghead.io", "url": "https://egghead.io/browse/frameworks/angular" }, "ab5": { - "desc": "Build Web Apps with Angular - recorded video content", + "desc": "Cree aplicaciones web con Angular: contenido de video grabado", "logo": "", "title": "Frontend Masters", "url": "https://frontendmasters.com/courses/angular-core/" }, "angular-love": { - "desc": "Polish language Angular articles and information", - "title": "angular.love (Polski)", + "desc": "Artículos e información de Angular en polaco", + "title": "angular.love (Polaco)", "url": "http://www.angular.love/" }, "learn-angular-fr": { - "desc": "French language Angular content.", - "title": "Learn Angular (francais)", + + "desc": "Contenido de Angular en Lengua francesa.", + "title": "Aprende Angular (francés)", "url": "http://www.learn-angular.fr/" }, "upgrading-ajs": { - "desc": "The world's most comprehensive, step-by-step course on using best practices and avoiding pitfalls while migrating from AngularJS to Angular.", - "title": "Upgrading AngularJS", + "desc": "El curso paso a paso más completo del mundo sobre el uso de las mejores prácticas y cómo evitar errores al migrar de AngularJS a Angular.", + "title": "Actualización AngularJS", "url": "https://www.upgradingangularjs.com" }, "toddmotto-ultimateangular": { - "desc": "Online courses providing in-depth coverage of the Angular ecosystem, AngularJS, Angular and TypeScript, with functional code samples and a full-featured seed environment. Get a deep understanding of Angular and TypeScript from foundation to functional application, then move on to advanced topics with Todd Motto and collaborators.", + "desc": "Cursos en línea que brindan una cobertura en profundidad del ecosistema Angular, AngularJS, Angular y TypeScript, con muestras de código funcional y un entorno de semillas con todas las funciones. Obtenga una comprensión profunda de Angular y TypeScript desde la base hasta la aplicación funcional, luego pase a temas avanzados con Todd Motto y sus colaboradores.", "title": "Ultimate Angular", "url": "https://ultimateangular.com/" }, "willh-angular-zero": { - "desc": "Online video course in Chinese for newbies who need to learning from the scratch in Chinese. It's covering Angular, Angular CLI, TypeScript, VSCode, and some must known knowledge of Angular development.", - "title": "Angular in Action: Start From Scratch (正體中文)", + "desc": "Video curso en línea en chino para principiantes que necesitan aprender en chino desde cero. Cubre Angular, Angular CLI, TypeScript, VSCode, y algunos deben tener conocimiento del desarrollo Angular.", + "title": "Angular en acción: empezar desde cero (正體中文)", "url": "https://www.udemy.com/angular-zero/?couponCode=ANGULAR.IO" }, "angular-firebase": { - "desc": "Video lessons covering progressive web apps with Angular, Firebase, RxJS, and related APIs.", + "desc": "Lecciones en video que cubren aplicaciones web progresivas con Angular, Firebase, RxJS y API relacionadas.", "title": "AngularFirebase.com", "url": "https://angularfirebase.com/" }, "loiane-angulartraining": { - "desc": "Free Angular course in Portuguese.", - "title": "Loiane Training (Português)", + "desc": "Curso gratuito de Angular en portugués.", + "title": "Loiane Training (Portugués)", "url": "https://loiane.training/course/angular/" }, "web-dev-angular": { - "desc": "Build performant and progressive Angular applications.", + "desc": "Cree aplicaciones Angular progresivas y de alto rendimiento.", "title": "web.dev/angular", "url": "https://web.dev/angular" }, "mdb-angular-boilerplate": { - "desc": "Angular CRUD application starter with NgRx state management, Firebase backend and installation guide.", + "desc": "Iniciador de aplicaciones Angular CRUD con administración de estado NgRx, backend de Firebase y guía de instalación.", "title": "MDB Angular Boilerplate", "url": "https://github.com/mdbootstrap/Angular-Bootstrap-Boilerplate" }, "dotnettricks": { - "desc": "Online videos and training for Angular.", + "desc": "Vídeos online y formación para Angular.", "logo": "", "title": "DotNetTricks", "url": "https://www.dotnettricks.com/courses/angular" } } }, - "Workshops & Onsite Training": { + "Talleres y formación presencial": { "order": 2, "resources": { "webucator": { - "desc": "Customized in-person instructor-led Angular training for private groups and public online instructor-led Angular classes.", + "desc": "Capacitación en Angular personalizada en persona dirigida por un instructor para grupos privados y clases Angular públicas en línea dirigidas por un instructor.", "title": "Webucator", "url": "https://www.webucator.com/webdev-training/angular-training" }, "-acceleb": { - "desc": "Customized, Instructor-Led Angular Training", + "desc": "Entrenamiento Angular personalizado y dirigido por un instructor", "title": "Accelebrate", "url": "https://www.accelebrate.com/angular-training" }, "-KLIBoFWStce29UCwkvY": { - "desc": "Private Angular Training and Mentoring", + "desc": "Capacitación y tutoría privada de Angular", "title": "Chariot Solutions", "url": "http://chariotsolutions.com/course/angular2-workshop-fundamentals-architecture/" }, "-KLIBoN0p9be3kwC6-ga": { - "desc": "Angular Academy is a two day hands-on public course given in-person across Canada!", + "desc": "¡Angular Academy es un curso público práctico de dos días que se imparte en persona en todo Canadá!", "title": "Angular Academy (Canada)", "url": "http://www.angularacademy.ca" }, "at": { - "desc": "Angular Training teaches Angular on-site all over the world. Also provides consulting and mentoring.", + "desc": "Angular Training enseña Angular in situ en todo el mundo. También brinda consultoría y tutoría.", "title": "Angular Training", "url": "http://www.angulartraining.com" }, "-KLIBo_lm-WrK1Sjtt-2": { - "desc": "Basic and Advanced training across Europe in German", + "desc": "Formación básica y avanzada en toda Europa en alemán", "title": "TheCodeCampus (German)", "url": "https://www.thecodecampus.de/schulungen/angular" }, "-KLIzFhfGKi1xttqJ7Uh": { - "desc": "4 day in-depth Angular training in Israel", + "desc": "Formación en Angular en profundidad de 4 días en Israel", "title": "ng-course (Israel)", "url": "http://ng-course.org/" }, "-KLIzIcRoDq3TzCJWnYc": { - "desc": "Virtual and in-person training in Canada and the US", + "desc": "Capacitación virtual y presencial en Canadá y EE. UU.", "title": "Web Age Solutions", "url": "http://www.webagesolutions.com/courses/WA2533-angular-2-programming" }, "500tech": { - "desc": "Learn from 500Tech, an Angular consultancy in Israel. This course was built by an expert developer, who lives and breathes Angular, and has practical experience with real world large scale Angular apps.", + "desc": "Aprenda de 500Tech, una consultora de Angular en Israel. Este curso fue creado por un desarrollador experto, que vive y respira Angular, y tiene experiencia práctica con aplicaciones Angular a gran escala del mundo real.", "title": "Angular Hands-on Course (Israel)", "url": "http://angular2.courses.500tech.com/" }, "9ab": { - "desc": "OnSite Training From the Authors of \"Become A Ninja with Angular\"", + "desc": "Capacitación en el sitio de los autores de \"Conviértete en un ninja con Angular\"", "title": "Ninja Squad", "url": "http://ninja-squad.com/formations/formation-angular2" }, "a2b": { - "desc": "Angular Boot Camp covers introductory through advanced Angular topics. It includes extensive workshop sessions, with hands-on help from our experienced developer-trainers. We take developers or teams from the beginnings of Angular understanding through a working knowledge of all essential Angular features.", + "desc": "Angular Boot Camp cubre temas Angular desde la introducción hasta los avanzados. Incluye extensas sesiones de talleres, con la ayuda práctica de nuestros experimentados formadores-desarrolladores. Llevamos a los desarrolladores o equipos desde los inicios de la comprensión de Angular a través de un conocimiento práctico de todas las características esenciales de Angular.", "logo": "https://angularbootcamp.com/images/angular-boot-camp-logo.svg", "title": "Angular Boot Camp", "url": "https://angularbootcamp.com" }, "ab3": { - "desc": "Trainings & Code Reviews. We help people to get a deep understanding of different technologies through trainings and code reviews. Our services can be arranged online, making it possible to join in from anywhere in the world, or on-site to get the best experience possible.", + "desc": "Entrenamientos y revisiones de códigos. Ayudamos a las personas a obtener un conocimiento profundo de las diferentes tecnologías a través de capacitaciones y revisiones de código. Nuestros servicios se pueden organizar en línea, lo que hace posible unirse desde cualquier parte del mundo o en el sitio para obtener la mejor experiencia posible.", "logo": "", "title": "Thoughtram", "url": "http://thoughtram.io/" }, "jsru": { - "desc": "Complete Angular online course. Constantly updating. Real-time webinars with immediate feedback from the teacher.", + "desc": "Curso completo en línea de Angular. Actualización constante. Seminarios web en tiempo real con comentarios inmediatos del profesor.", "logo": "https://learn.javascript.ru/img/sitetoolbar__logo_ru.svg", "title": "Learn Javascript (Russian)", "url": "https://learn.javascript.ru/courses/angular" }, "zenika-angular": { - "desc": "Angular trainings delivered by Zenika (FRANCE)", - "title": "Angular Trainings (French)", + "desc": "Entrenamientos en Angular impartidos por Zenika (FRANCIA)", + "title": "Entrenamientos en Angular (francés)", "url": "https://training.zenika.com/fr/training/angular/description" }, "formationjs": { - "desc": "Angular onsite training in Paris (France). Monthly Angular workshops and custom onsite classes. We are focused on Angular, so we are always up to date.", - "title": "Formation JavaScript (French)", + "desc": "Formación en Angular presencial en París (Francia). Talleres Angular mensuales y clases presenciales personalizadas. Estamos enfocados en Angular, por lo que siempre estamos al día.", + "title": "Formation JavaScript (Frances)", "url": "https://formationjavascript.com/formation-angular/" }, "humancoders-angular": { - "desc": "Angular trainings delivered by Human Coders (France)", - "title": "Formation Angular (French)", + "desc": "Entrenamientos en Angular impartidos por Human Coders (France)", + "title": "Formation Angular (Frances)", "url": "https://www.humancoders.com/formations/angular" }, "wao": { - "desc": "Onsite Angular Training delivered by We Are One Sàrl in Switzerland", + "desc": "Formación en Angular impartida por We Are One Sàrl en Suiza", "logo": "https://weareone.ch/wordpress/wao-content/uploads/2014/12/logo_200_2x.png", "title": "We Are One Sàrl", "url": "https://weareone.ch/courses/angular/" }, "angular-schule": { - "desc": "Angular onsite training and public workshops in Germany from the authors of the German Angular book. We also regularly post articles and videos on our blog (in English and German language).", + "desc": "Talleres públicos y capacitación presencial de Angular en Alemania de los autores del libro German Angular. También publicamos regularmente artículos y videos en nuestro blog (en inglés y alemán).", "logo": "https://angular.schule/assets/img/brand.svg", "title": "Angular.Schule (German)", "url": "https://angular.schule/" }, "strbrw": { - "desc": "Angular and RxJS trainings, Code Reviews and consultancy. We help software engineers all over the world to create better web-applications...", + "desc": "Entrenamientos en Angular y RxJS, Revisiones de Código y consultoría. Ayudamos a los ingenieros de software de todo el mundo a crear mejores aplicaciones web ...", "title": "StrongBrew", "url": "https://strongbrew.io/" }, "angular.de": { - "desc": "Onsite Angular Training delivered by the greatest community in the german speaking area in Germany, Austria and Switzerland. We also regularly post articles and tutorials on our blog.", + "desc": "Capacitaciónes en Angular en el lugar impartida por la mayor comunidad en el área de habla alemana en Alemania, Austria y Suiza. También publicamos regularmente artículos y tutoriales en nuestro blog.", "logo": "https://angular.de/assets/img/angular-de-logo.svg", "title": "Angular.de (German)", "url": "https://angular.de/" From 0348f47f622516f9a2c82ab5226393294e9d26cf Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Tue, 6 Apr 2021 20:28:24 -0400 Subject: [PATCH 225/253] docs: fix presskit layout --- aio/content/marketing/presskit.html | 34 ++++++++++++++--------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/aio/content/marketing/presskit.html b/aio/content/marketing/presskit.html index ebc9bdd77250..842654c0a7b7 100644 --- a/aio/content/marketing/presskit.html +++ b/aio/content/marketing/presskit.html @@ -159,24 +159,24 @@
KIT DE DESARROLLO DE COMPONENTES (CDK)

-
- -
-
-
CLI
-
-
- Icono de el CLI (png) - Descargar -
-
- Icono de el CLI (svg) - Descargar -
-
+
+ +
+
+
CLI
+
+
+ Icono de el CLI (png) - Descargar +
+
+ Icono de el CLI (svg) - Descargar +
+
+

-

@@ -694,4 +694,4 @@
TÉRMINOS QUE UTILIZAMOS

- \ No newline at end of file + From eac35a64e192463b03b098cc3f943c646a281f45 Mon Sep 17 00:00:00 2001 From: JeMeister Date: Sun, 11 Apr 2021 22:40:01 -0600 Subject: [PATCH 226/253] docs: translate migration-solution-style-tsconfig.md (#327) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Andrés Villanueva --- .../migration-solution-style-tsconfig.en.md | 56 +++++++++++++++++++ .../migration-solution-style-tsconfig.md | 55 +++++++++--------- 2 files changed, 83 insertions(+), 28 deletions(-) create mode 100644 aio/content/guide/migration-solution-style-tsconfig.en.md diff --git a/aio/content/guide/migration-solution-style-tsconfig.en.md b/aio/content/guide/migration-solution-style-tsconfig.en.md new file mode 100644 index 000000000000..bdee2ca19daf --- /dev/null +++ b/aio/content/guide/migration-solution-style-tsconfig.en.md @@ -0,0 +1,56 @@ +# Solution-style `tsconfig.json` migration + +## What does this migration do? + +This migration adds support to existing projects for TypeScript's new ["solution-style" tsconfig feature](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig). + +Support is added by making two changes: + +1. Renaming the workspace-level `tsconfig.json` to `tsconfig.base.json`. +All project [TypeScript configuration files](guide/typescript-configuration) will extend from this base which contains the common options used throughout the workspace. + +2. Adding the solution `tsconfig.json` file at the root of the workspace. +This `tsconfig.json` file will only contain references to project-level TypeScript configuration files and is only used by editors/IDEs. + +As an example, the solution `tsconfig.json` for a new project is as follows: + +```json +// This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. +// It is not intended to be used to perform a compilation. +{ + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./e2e/tsconfig.json" + } + ] +} +``` + +## Why is this migration necessary? + +Solution-style `tsconfig.json` files provide an improved editing experience and fix several long-standing defects when editing files in an IDE. +IDEs that leverage the TypeScript language service (for example, [Visual Studio Code](https://code.visualstudio.com)), will only use TypeScript configuration files that are named `tsconfig.json`. +In complex projects, there may be more than one compilation unit and each of these units may have different settings and options. + +With the Angular CLI, a project will have application code that will target a browser. +It will also have unit tests that should not be included within the built application and that also need additional type information present (`jasmine` in this case). +Both parts of the project also share some but not all of the code within the project. +As a result, two separate TypeScript configuration files (`tsconfig.app.json` and `tsconfig.spec.json`) are needed to ensure that each part of the application is configured properly and that the right types are used for each part. +Also if web workers are used within a project, an additional tsconfig (`tsconfig.worker.json`) is needed. +Web workers use similar but incompatible types to the main browser application. +This requires the additional configuration file to ensure that the web worker files use the appropriate types and will build successfully. + +While the Angular build system knows about all of these TypeScript configuration files, an IDE using TypeScript's language service does not. +Because of this, an IDE will not be able to properly analyze the code from each part of the project and may generate false errors or make suggestions that are incorrect for certain files. +By leveraging the new solution-style tsconfig, the IDE can now be aware of the configuration of each part of a project. +This allows each file to be treated appropriately based on its tsconfig. +IDE features such as error/warning reporting and auto-suggestion will operate more effectively as well. + +The TypeScript 3.9 release [blog post](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig) also contains some additional information regarding this new feature. diff --git a/aio/content/guide/migration-solution-style-tsconfig.md b/aio/content/guide/migration-solution-style-tsconfig.md index 211ff5f98664..d7b01299637b 100644 --- a/aio/content/guide/migration-solution-style-tsconfig.md +++ b/aio/content/guide/migration-solution-style-tsconfig.md @@ -1,21 +1,20 @@ -# Solution-style `tsconfig.json` migration +# Migrar el estilo de solución `tsconfig.json` -## What does this migration do? +## ¿Qué hace esta migración? -This migration adds support to existing projects for TypeScript's new ["solution-style" tsconfig feature](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig). +Esta migración agrega soporte a proyectos existentes la nueva funcionalidad de TypeScript ["estilo de solución" tsconfig](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig). -Support is added by making two changes: +El soporte es agregado al realizar dos cambios: -1. Renaming the workspace-level `tsconfig.json` to `tsconfig.base.json`. -All project [TypeScript configuration files](guide/typescript-configuration) will extend from this base which contains the common options used throughout the workspace. +1. Renombrando el espacio de trabajo de `tsconfig.json` a `tsconfig.base.json`. Todos los [archivos de configuración de TypeScript](guide/typescript-configuration) se extenderán desde esta base que contiene las opciones comunes utilizadas en todo el espacio de trabajo. -2. Adding the solution `tsconfig.json` file at the root of the workspace. -This `tsconfig.json` file will only contain references to project-level TypeScript configuration files and is only used by editors/IDEs. +2. Agregando el archivo de solución `tsconfig.json` a la raíz del espacio de trabajo. Este archivo `tsconfig.json` solo contendrá referencias a archivos de configuración de TypeScript a nivel de proyecto y solo lo usarán editores/IDEs. + +Como ejemplo, la solución `tsconfig.json` para un nuevo proyecto es la siguiente: -As an example, the solution `tsconfig.json` for a new project is as follows: ```json -// This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. -// It is not intended to be used to perform a compilation. +// Este es un archivo "Estilo de Solución" tsconfig.json, y es usado por editores y servidores del lenguaje TypeScript para mejorar la experiencia de desarrollo. +// No está destinado para ser utilizado en la ejecución de una compilación { "files": [], "references": [ @@ -32,24 +31,24 @@ As an example, the solution `tsconfig.json` for a new project is as follows: } ``` -## Why is this migration necessary? +## ¿Por qué es necesaria esta migración? -Solution-style `tsconfig.json` files provide an improved editing experience and fix several long-standing defects when editing files in an IDE. -IDEs that leverage the TypeScript language service (for example, [Visual Studio Code](https://code.visualstudio.com)), will only use TypeScript configuration files that are named `tsconfig.json`. -In complex projects, there may be more than one compilation unit and each of these units may have different settings and options. +Los archivos de estilos de solución `tsconfig.json` brindan una experiencia de edición mejorada y corrigen varios defectos antiguos al editar archivos en un IDE. +Los IDEs que aprovechan el servicio de lenguaje TypeScript (por ejemplo, [Visual Studio Code](https://code.visualstudio.com)), solo usarán archivos de configuración de TypeScript que se denominan `tsconfig.json`. +En proyectos complejos, puede haber más de una unidad de compilación y cada una de estas unidades puede tener diferentes configuraciones y opciones. -With the Angular CLI, a project will have application code that will target a browser. -It will also have unit tests that should not be included within the built application and that also need additional type information present (`jasmine` in this case). -Both parts of the project also share some but not all of the code within the project. -As a result, two separate TypeScript configuration files (`tsconfig.app.json` and `tsconfig.spec.json`) are needed to ensure that each part of the application is configured properly and that the right types are used for each part. -Also if web workers are used within a project, an additional tsconfig (`tsconfig.worker.json`) is needed. -Web workers use similar but incompatible types to the main browser application. -This requires the additional configuration file to ensure that the web worker files use the appropriate types and will build successfully. +Con Angular CLI, un proyecto tendrá un código de la aplicación que tendrá como objetivo un navegador. +También tendrá pruebas unitarias que no deben incluirse dentro de la aplicación construida y que también necesitan información adicional presente (`jasmine` en este caso). +Ambas partes del proyecto también comparten parte del código dentro del proyecto, pero no todo. +Como resultado, se necesitan dos archivos de configuración TypeScript separados (`tsconfig.app.json` y `tsconfig.spec.json`) para garantizar que cada parte de la aplicación esté configurada correctamente y que se usen los tipos correctos para cada parte. +Además, si se utilizan web workers dentro de un proyecto, se necesita un tsconfig adicional (`tsconfig.worker.json`). +Los web workers utilizan tipos similares pero incompatibles con la aplicación del navegador principal. +Esto requiere el archivo de configuración adicional para garantizar que los archivos del web worker utilicen los tipos adecuados y se compilen correctamente. -While the Angular build system knows about all of these TypeScript configuration files, an IDE using TypeScript's language service does not. -Because of this, an IDE will not be able to properly analyze the code from each part of the project and may generate false errors or make suggestions that are incorrect for certain files. -By leveraging the new solution-style tsconfig, the IDE can now be aware of the configuration of each part of a project. -This allows each file to be treated appropriately based on its tsconfig. -IDE features such as error/warning reporting and auto-suggestion will operate more effectively as well. +Mientras que el sistema de compilación Angular conoce todos estos archivos de configuración de TypeScript, un IDE que usa el servicio de lenguaje de TypeScript no los conoce. +Debido a esto, un IDE no podrá analizar correctamente el código de cada parte del proyecto y puede generar errores falsos o hacer sugerencias incorrectas para ciertos archivos. +Al aprovechar el nuevo estilo de solución tsconfig, el IDE ahora puede conocer la configuración de cada parte de un proyecto. +Esto permite que cada archivo se trate de forma adecuada basado en su tsconfig. +Las funcionalidades del IDE, como informes de error/advertencia y las sugerencias automáticas, también funcionarán de manera más eficaz. -The TypeScript 3.9 release [blog post](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig) also contains some additional information regarding this new feature. +La [publición en el blog](https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#solution-style-tsconfig) de la versión 3.9 de TypeScript contiene también información adicional sobre esta nueva funcionalidad. From 7a183c9920e6b13cd44af311f0c51f863250514c Mon Sep 17 00:00:00 2001 From: Stalin Date: Tue, 27 Apr 2021 07:18:10 -0500 Subject: [PATCH 227/253] docs: translate-first-revision content\guide\binding-syntax.md (#328) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/binding-syntax.en.md | 318 +++++++++++++++++++++++++ aio/content/guide/binding-syntax.md | 196 +++++++-------- 2 files changed, 410 insertions(+), 104 deletions(-) create mode 100644 aio/content/guide/binding-syntax.en.md diff --git a/aio/content/guide/binding-syntax.en.md b/aio/content/guide/binding-syntax.en.md new file mode 100644 index 000000000000..0bd41cf77d7c --- /dev/null +++ b/aio/content/guide/binding-syntax.en.md @@ -0,0 +1,318 @@ + +# Binding syntax: an overview + +Data-binding is a mechanism for coordinating what users see, specifically +with application data values. +While you could push values to and pull values from HTML, +the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. +You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest. + +
+ +See the for a working example containing the code snippets in this guide. + +
+ +Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow: + +* From the _source-to-view_ +* From _view-to-source_ +* Two-way sequence: _view-to-source-to-view_ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Type + + Syntax + + Category +
+ Interpolation
+ Property
+ Attribute
+ Class
+ Style + + + + {{expression}} + [target]="expression" + bind-target="expression" + + + + One-way
from data source
to view target +
+ Event + + + (target)="statement" + on-target="statement" + + + One-way
from view target
to data source +
+ Two-way + + + [(target)]="expression" + bindon-target="expression" + + + Two-way +
+ +Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation, `[]` or `()`, +or preceded by a prefix: `bind-`, `on-`, `bindon-`. + +The target of a binding is the property or event inside the binding punctuation: `[]`, `()` or `[()]`. + +Every public member of a source directive is automatically available for binding. +You don't have to do anything special to access a directive member in a template expression or statement. + + +### Data-binding and HTML + +In the normal course of HTML development, you create a visual structure with HTML elements, and +you modify those elements by setting element attributes with string constants. + +```html +
Plain old HTML
+ + +``` + +With data-binding, you can control things like the state of a button: + + + +Notice that the binding is to the `disabled` property of the button's DOM element, +not the attribute. This applies to data-binding in general. Data-binding works with properties of DOM elements, components, and directives, not HTML attributes. + +{@a html-attribute-vs-dom-property} + +### HTML attribute vs. DOM property + +The distinction between an HTML attribute and a DOM property is key to understanding +how Angular binding works. Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes. + +* A few HTML attributes have 1:1 mapping to properties; for example, `id`. + +* Some HTML attributes don't have corresponding properties; for example, `aria-`. + + Some DOM properties don't have corresponding attributes; for example, `textContent`. + +It is important to remember that HTML attribute and the DOM property are different things, even when they have the same name. +In Angular, the only role of HTML attributes is to initialize element and directive state. + +**Template binding works with properties and events, not attributes.** + +When you write a data-binding, you're dealing exclusively with the DOM properties and events of the target object. + +
+ +This general rule can help you build a mental model of attributes and DOM properties: +Attributes initialize DOM properties and then they are done. +Property values can change; attribute values can't. + +There is one exception to this rule. +Attributes can be changed by `setAttribute()`, which re-initializes corresponding DOM properties. + +
+ +For more information, see the [MDN Interfaces documentation](https://developer.mozilla.org/en-US/docs/Web/API#Interfaces) which has API docs for all the standard DOM elements and their properties. +Comparing the [`

` attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td) attributes to the [`

` properties](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement) provides a helpful example for differentiation. +In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to `HTMLTableCellElement`. + + +#### Example 1: an `` + +When the browser renders ``, it creates a +corresponding DOM node with a `value` property initialized to "Sarah". + +```html + +``` + +When the user enters "Sally" into the ``, the DOM element `value` *property* becomes "Sally". +However, if you look at the HTML attribute `value` using `input.getAttribute('value')`, you can see that the *attribute* remains unchanged—it returns "Sarah". + +The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value. + +To see attributes versus DOM properties in a functioning app, see the especially for binding syntax. + +#### Example 2: a disabled button + +The `disabled` attribute is another example. A button's `disabled` +*property* is `false` by default so the button is enabled. + +When you add the `disabled` *attribute*, its presence alone +initializes the button's `disabled` *property* to `true` +so the button is disabled. + +```html + +``` + +Adding and removing the `disabled` *attribute* disables and enables the button. +However, the value of the *attribute* is irrelevant, +which is why you cannot enable a button by writing ``. + +To control the state of the button, set the `disabled` *property*, + +

+ +Though you could technically set the `[attr.disabled]` attribute binding, the values are different in that the property binding requires to a boolean value, while its corresponding attribute binding relies on whether the value is `null` or not. Consider the following: + +```html + + +``` + +Generally, use property binding over attribute binding as it is more intuitive (being a boolean value), has a shorter syntax, and is more performant. + +

+ + +To see the `disabled` button example in a functioning app, see the especially for binding syntax. This example shows you how to toggle the disabled property from the component. + +## Binding types and targets + +The **target of a data-binding** is something in the DOM. +Depending on the binding type, the target can be a property (element, component, or directive), +an event (element, component, or directive), or sometimes an attribute name. +The following table summarizes the targets for the different binding types. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ Type +	+ Target +	+ Examples +
+ Property +	+ Element property + Component property + Directive property +	+ `src`, `hero`, and `ngClass` in the following: + + +
+ Event +	+ Element event + Component event + Directive event +	+ `click`, `deleteRequest`, and `myClick` in the following: + + + +
+ Two-way +	+ Event and property +	+ +
+ Attribute +	+ Attribute + (the exception) +	+ +
+ Class +	+ `class` property +	+ +
+ Style +	+ `style` property +	+ +

+ diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md index 0bd41cf77d7c..22c51901e82e 100644 --- a/aio/content/guide/binding-syntax.md +++ b/aio/content/guide/binding-syntax.md @@ -1,23 +1,21 @@ -# Binding syntax: an overview +# Sintaxis de Enlace: una visión general -Data-binding is a mechanism for coordinating what users see, specifically -with application data values. -While you could push values to and pull values from HTML, -the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. -You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest. +El enlace de datos es un mecanismo utilizado para coordinar los valores de los datos que los usuarios visualizan en la aplicación. +Aunque puedas insertar y actualizar valores en el HTML, la aplicación es más fácil de escribir, leer y mantener si tu le dejas esas tareas al framework de enlace. +Por lo que simplemente debes declarar enlaces entre los datos del modelo y los elementos HTML y dejar al framework que haga el resto del trabajo.

-See the for a working example containing the code snippets in this guide. +Consulta la aplicación de muestra que es un ejemplo funcional que contiene los fragmentos de código utilizados en esta guía.

-Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow: +Angular proporciona muchas formas para manejar el enlace de datos. Los tipos de enlace se pueden agrupar en tres categorías que se distinguen de acuerdo a la dirección del flujo de datos: -* From the _source-to-view_ -* From _view-to-source_ -* Two-way sequence: _view-to-source-to-view_ +* Desde el _modelo-hacia-vista_ +* Desde la _vista-hacia-modelo_ +* Secuencia Bidireccional: _vista-hacia-modelo-hacia-vista_

{{node.title}}

- This website requires JavaScript. + Este sitio web requiere JavaScript.

How a reference variable gets its value

Advertisements

-- Counter Change Log --

Spy Directive

Introduction to the Angular Docs

You can sit with us!

Introduction to the Angular Docs

Introducción a la Documentación de Angular

You can sit with us!

Puedes sentarte con nosotros!

Introducción a la Documentación de Angular

Puedes sentarte con nosotros!

Styling precedence (highest to lowest)

{{title}}

BRAND NAMES

Angular

NOMBRES DE MARCAS

Angular

Example

Ejemplo

Example

Ejemplo

AngularJS

AngularJS

Examples

Ejemplos

Angular Material

Angular Material

AngularJS Material

Material de AngularJS

3rd Party Projects

Proyectos de terceros

Examples

Ejemplos

Examples

TERMS WE USE

TÉRMINOS QUE UTILIZAMOS

TERMS WE USE

LAZY LOADING

Bibliotecas

Librerías

AngularJS

Ejemplos

LOGO DE ANGULAR

LOGOTIPO DE UN COLOR

LOGOTIPO INVERSO DE UN COLOR

HTTP

i18n

Proyectos de terceros

KIT DE DESARROLLO DE COMPONENTES (CDK)

CLI

CLI

TÉRMINOS QUE UTILIZAMOS