platformBrowserDynamic().bootstrapModule(AppModule);Bootstraps the app, using the root component from the specified NgModule.
Carga la app, usando el componente ra铆z del NgModule especificado.
@NgModule({ declarations: ..., imports: ...,
exports: ..., providers: ..., bootstrap: ...})
class MyModule {}Defines a module that contains components, directives, pipes, and providers.
+Define un m贸dulo que contiene componentes, directivas, pipes y proveedores.
declarations: [MyRedComponent, MyBlueComponent, MyDatePipe]List of components, directives, and pipes that belong to this module.
+Lista de componentes, directivas y pipes que pertenecen a este m贸dulo.
imports: [BrowserModule, SomeOtherModule]List of modules to import into this module. Everything from the imported modules
-is available to declarations of this module.
Lista de m贸dulos para importar en este m贸dulo. Todo, desde los m贸dulos importados,
+est谩 disponible para las declaraciones (declarations) de este m贸dulo.
exports: [MyRedComponent, MyDatePipe]List of components, directives, and pipes visible to modules that import this module.
+Lista de componentes, directivas y pipes visibles a los m贸dulos que importan este m贸dulo.
providers: [MyService, { provide: ... }]List of dependency injection providers visible both to the contents of this module and to importers of this module.
+Lista de proveedores de inyecci贸n de dependencias visibles tanto para los contenidos de este m贸dulo como para los importadores de este m贸dulo.
entryComponents: [SomeComponent, OtherComponent]List of components not referenced in any reachable template, for example dynamically created from code.
Lista de componentes no referenciados en cualquier plantilla accesible, por ejemplo, creada din谩micamente a partir de c贸digo.
bootstrap: [MyAppComponent]List of components to bootstrap when this module is bootstrapped.
+Lista de componentes a empaquetar cuando este m贸dulo se inicia.
| Template syntax | +Sintaxis de plantilla | ||
|---|---|---|---|
<input [value]="firstName"> |
-Binds property | Vincula la propiedad |
|
<div [attr.role]="myAriaRole"> |
-Binds attribute | Vincula el atributo |
|
<div [class.extra-sparkle]="isDelightful"> |
-Binds the presence of the CSS class | Vincula la presencia de la clase CSS |
|
<div [style.width.px]="mySize"> |
-Binds style property | Vincula la propiedad de estilo |
|
<button (click)="readRainbow($event)"> |
-Calls method | Llama al m茅todo |
|
<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]="'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: | Establece el two-way data binding. Equivalente a: |
|
<video #movieplayer ...> |
-Creates a local variable | Crea una variable local |
|
<p *myUnless="myExpression">...</p> |
-The | El s铆mbolo |
|
<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> |
-Transforms the current value of expression | Transforma el valor actual de la expresi贸n |
|
<p>Employer: {{employer?.companyName}}</p> |
-The safe navigation operator ( | El operador de navegaci贸n seguro ( |
|
<svg:rect x="0" y="0" width="100" height="100"/> |
-An SVG snippet template needs an | Una plantilla de fragmento SVG necesita un prefijo |
|
<svg> |
-An | Un elemento ra铆z |
| Built-in directives | +Directivas incorporadas |
|
|---|---|---|
<section *ngIf="showSection"> |
-Removes or recreates a portion of the DOM tree based on the | Elimina o recrea una parte del 谩rbol DOM basado en la expresi贸n |
<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"> |
-Conditionally swaps the contents of the div by selecting one of the embedded templates based on the current value of | Intercambia condicionalmente el contenido del div seleccionando una de las plantillas incrustadas en funci贸n del valor actual de |
<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. +Te permite asignar estilos a un elemento HTML usando CSS. Puedes usar CSS directamente, como en el primer ejemplo, o puedes llamar a un m茅todo desde el componente. |
| Forms | +Formularios |
|
|---|---|---|
<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 |
|
|---|---|---|
@Component({...}) |
-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({...}) |
-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({...}) |
-Declares that a class is a pipe and provides metadata about the pipe. + | Declara que una clase es una pipe y proporciona metadatos sobre la pipe. |
@Injectable() |
-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 |
|
|---|---|---|
selector: '.cool-button:not(a)' |
-Specifies a CSS selector that identifies this directive within a template. Supported selectors include | Especifica un selector CSS que identifica esta directiva dentro de una plantilla. Los selectores compatibles incluyen 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 extiende @Directive,
+entonces la configuraci贸n de @Directive se aplica tambi茅n a los componentes
|
|
|---|---|---|---|
moduleId: module.id |
-If set, the | Si est谩 presente, el |
|
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}}' |
-Inline template or external template URL of the component's view. + | template: 'Hola {{name}}' |
+Plantilla en l铆nea o URL de plantilla externa de la vista del componente. |
styles: ['.primary {color: red}'] |
-List of inline CSS styles or external stylesheet URLs for styling the component鈥檚 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. |
|
|---|---|---|
@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:
|
@Output() myEvent = new EventEmitter(); |
-Declares an output property that fires events that you can subscribe to with an event binding (example: | Declara una propiedad de salida (output) que dispara eventos a los que puedes suscribirse con un enlace de evento (event binding) (ejemplo: |
@HostBinding('class.valid') isValid; |
-Binds a host element property (here, the CSS class | Vincula una propiedad del elemento anfitri贸n (aqu铆, la clase CSS |
@HostListener('click', ['$event']) onClick(e) {...} |
-Subscribes to a host element event ( | Se suscribe a un evento del elemento anfitri贸n ( |
@ContentChild(myPredicate) myChildComponent; |
-Binds the first result of the component content query ( | Vincula el primer resultado de la consulta de contenido del componente ( |
@ContentChildren(myPredicate) myChildComponents; |
-Binds the results of the component content query ( | Vincula los resultados de la consulta de contenido del componente ( |
@ViewChild(myPredicate) myChildComponent; |
-Binds the first result of the component view query ( | Vincula el primer resultado de la consulta de vista del componente ( |
@ViewChildren(myPredicate) myChildComponents; |
-Binds the results of the component view query ( | Vincula los resultados de la consulta de vista del componente ( |
| 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 | Se llama despu茅s del constructor, inicializando propiedades de entrada (input), y la primera llamada a |
|
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 | Se llama despu茅s de |
|
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 | Se llama despu茅s de |
|
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 | Establece o sobre-escribe el proveedor para |
{ provide: MyService, useFactory: myFactory } |
-Sets or overrides the provider for | Establece o sobre-escribe el proveedor para |
{ provide: MyValue, useValue: 41 } |
-Sets or overrides the provider for | Establece o sobre-escribe el proveedor para |
| Routing and navigation | +Enrutamiento y navegaci贸n |
|
|---|---|---|
const routes: 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. |
|
-Marks the location to load the component of the active route. + | Marca la ubicaci贸n para cargar el componente de la ruta activa. |
|
-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 | 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 |
<a [routerLink]="[ '/path' ]" routerLinkActive="active"> |
-The provided classes are added to the element when the | Las clases proporcionadas se agregan al elemento cuando el |
class CanActivateGuard implements CanActivate { |
-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> { |
-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 { |
-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> { |
-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 { |
-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. |
Aprenda una forma de crear aplicaciones con Angular y reutilice su c贸digo y habilidades para crear aplicaciones para cualquier objetivo de implementaci贸n. Para web, web m贸vil, m贸vil nativo y escritorio nativo. +
Aprende una forma de crear aplicaciones con Angular y reutiliza tu c贸digo y habilidades para crear aplicaciones para cualquier objetivo de implementaci贸n. Para web, web m贸vil, m贸vil nativo y escritorio nativo.
Logre la m谩xima velocidad posible en la Plataforma Web hoy y avance, a trav茅s de Web Workers y renderizado del lado del servidor.
+Logra la m谩xima velocidad posible en la Plataforma Web hoy y avance, a trav茅s de Web Workers y renderizado del lado del servidor.
Angular te permite controlar la escalabilidad. Satisface requerimientos enormes de datos construyendo modelos en RxJS, Immutable.js o alg煤n otro.
Cree funciones r谩pidamente con plantillas simples y declarativas. Extienda el lenguaje de plantilla con sus propios componentes y use una amplia gama de componentes existentes. Obtenga ayuda inmediata y comentarios espec铆ficos de Angular con casi todos los IDE y editores. Todo esto se une para que pueda concentrarse en crear aplicaciones incre铆bles en lugar de intentar que el c贸digo funcione. +
Crea funciones r谩pidamente con plantillas simples y declarativas. Extiende el lenguaje de plantilla con tus propios componentes y usa una amplia gama de componentes existentes. Obt茅n ayuda inmediata y comentarios espec铆ficos de Angular con casi todos los IDE y editores. Todo esto se une para que puedas concentrarte en crear aplicaciones incre铆bles en lugar de intentar que el c贸digo funcione.
Explore las capacidades de Angular con una aplicaci贸n de muestra preparada. No se requiere configuraci贸n. +
Explora las capacidades de Angular con una aplicaci贸n de muestra preparada. No se requiere configuraci贸n.