Get best of the week

10 funciones angulares útiles que te perdiste


Si escribe aplicaciones regularmente en Angular y ha dedicado más de cien horas a ello, lo más probable es que conozca estas funciones. Pero, sin embargo, para estar seguro, lea :)

Antes de pasar a las funciones de Angular, vale la pena mencionar una herramienta muy útil. Bit (Github) facilita trabajar juntos en componentes angulares y compartirlos. Lo recomiendo sinceramente para mantener una interfaz consistente, acelerar el desarrollo y minimizar la cantidad de errores en el código.


Ejemplo: cargadores circulares para Angular con bit.dev


1. Título


La etiqueta de título es un elemento HTML que define el título de una página web. Los encabezados aparecen en la página de resultados de búsqueda (SERP) como un título en el que se puede hacer clic para el resultado. Son muy importantes para la usabilidad, SEO y promoción social. redes.

Las aplicaciones angulares toman el título de la etiqueta ... en index.html. Por defecto, la transición entre componentes en Angular no cambia este encabezado.

¿Sabía que se puede establecer un título por separado de cada componente?

Angular tiene un servicio de Título enangular/ plataforma-navegador. Puede incrustarlo fácilmente en otros componentes y usar el método setTitle para anular el título.

import { Title } from "@angular/platform-browser"@Component({
   ...
})
export class LoginComponent implements OnInit {
   constructor(private title: Title) {}    ngOnInit() {
       title.setTitle("Login")
   }
}

Al navegar al LoginComponent en la aplicación, el título de la ventana del navegador cambiará a "Iniciar sesión".

Lo mismo se puede hacer en cualquier componente y, en consecuencia, a medida que navega dentro de la aplicación, el título cambiará, respondiendo a las acciones del usuario.

2. Meta


Las metaetiquetas de aplicación angular también se toman del archivo index.html. Y para establecerlos desde componentes, el servicio Meta deangular/ plataforma-navegador.

Y de nuevo: el uso de metaetiquetas es útil en términos de SEO y promoción de páginas en redes sociales. redes, contienen información sobre una página web que los motores de búsqueda utilizan para clasificar y mostrar correctamente en los resultados de búsqueda.

Para usar el componente metaetiqueta, importe Meta desdeangular/ platform-browser e incrustar en el componente deseado.

import { Meta } from "@angular/platform-browser"@Component({
    ...
})
export class BlogComponent implements OnInit {
    constructor(private meta: Meta) {}    ngOnInit() {
        meta.updateTag({name: "title", content: ""})
        meta.updateTag({name: "description", content: "Lorem ipsum dolor"})
        meta.updateTag({name: "image", content: "./assets/blog-image.jpg"})
        meta.updateTag({name: "site", content: "My Site"})
    }
}

BlogComponent ahora puede mostrarse correctamente en Twitter, Facebook, etc. Al mismo tiempo, muestra descripciones, encabezados e imágenes en la forma correcta y legible.
¿Has oído hablar de esto también? Entonces aquí hay algo más interesante.

3. Anulación de la interpolación de patrones


El interpolador estándar en patrones es {{}}. Si ingresa una variable entre {{y}}, su valor se mostrará en el DOM final.

¿Sabe que es posible anular los delimitadores de encapsulación estándar en cualquier carácter? Es simple. Solo necesita especificar nuevos valores en la propiedad de interpolación en el decorador de componentes.

@Component({
   interpolation: ["((","))"]
})
export class AppComponent {}

La interpolación utilizada en la plantilla AppComponent ha cambiado a (()) y {{}} ya no funciona.

@Component({
   template: `
       <div>
           ((data))
       </div>
   `,
   interpolation: ["((","))"]
})
export class AppComponent {
   data: any = "dataVar"
}

En el navegador, verá que la cadena "dataVar" se mostrará en lugar de ((datos)).

4. Ubicación


Podemos obtener la URL actual de la página abierta en el navegador utilizando el servicio de ubicación. Dependiendo de qué LocationStrategy se utilice, la ubicación se almacenará por la ruta en la URL (/ ejemplo / página /) o por la parte de la URL después de la libra (# prueba / página /).

Con Ubicación, podemos ir a la URL, avanzar en la historia, retroceder, cambiar la URL actual o reemplazar el elemento principal de la historia.

El servicio de ubicación de CommonModule ayudará aquí.

import { Location } from "@angular/common"@Component({
   ...
})
export class AppComponent {
   constructor(private location: Location) {}    navigateTo(url) {
       this.location.go(url)
   }    goBack() {
       location.back()
   }    goForward() {
       location.forward()
   }
}


5. Documento


A veces necesita obtener un modelo de documento para realizar operaciones DOM directamente desde una aplicación angular.

DOCUMENTO solo sirve para este propósito. DOCUMENT es un token DI que representa el contexto de representación principal. En un navegador, este es un documento DOM. Proporciona operaciones DOM independientemente del tiempo de ejecución.

Nota: es posible que el documento no esté disponible en el contexto de la aplicación si los contextos de aplicación y representación no coinciden (por ejemplo, al iniciar la aplicación en Web Worker).

Digamos que tenemos algún tipo de elemento HTML:

<canvas id="canvas"></canvas>


Para obtener un elemento HTMLE de lienzo, implemente DOCUMENTO:

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}
}


Obtenga el lienzo HTMLElement usando getElementById ()

@Component({})
export class CanvasElement {
   constructor(@Inject(DOCUMENT) _doc: Document) {}    renderCanvas() {
       this._doc.getElementById("canvas")
   }
}


Advertencia: ¡use el DOCUMENTO con cuidado! Interactuar con el DOM es directamente peligroso y aumenta el riesgo de XSS.

6. Decorador @ atributo


Básicamente, en una aplicación angular, utilizan los decoradores de componentes, módulos y directivas.

Sin embargo, también hay un decorador de atributos que le permite pasar una cadena estática sin una sobrecarga de rendimiento innecesaria, sin pasar por la verificación de cambio.

Los valores del decorador de atributos se verifican solo una vez. Usado como un decoradorEntrada:

@Component({
   ...
})
export class BlogComponent {
   constructor(@Attribute("type") private type: string ) {}
}


7. HttpInterceptor


HttpInterceptor es una característica muy poderosa en Angular que le permite interceptar solicitudes HttpRequest y procesarlas.

La mayoría de los interceptores convierten la solicitud de salida antes de pasarla al siguiente interceptor de la cadena, llamando a next.handle (transformReq).

En casos excepcionales, los interceptores pueden procesar completamente la solicitud ellos mismos y no delegar más el resto de la cadena. Este comportamiento está permitido.

El HttpInterceptor se usa con mayor frecuencia en:

  • Autenticación
  • Almacenamiento en caché
  • Backend falso
  • Transformación de URL
  • Subversion de encabezado

Para usar este interceptor, debe crear un servicio e implementar la interfaz HttpInterceptor.

@Injectable()
export class MockBackendInterceptor implements HttpInterceptor {
   constructor() {}    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       ...
   }
}

Insértelo en el módulo principal:
@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}


8. AppInitializer


A veces, al iniciar una aplicación Angular, es necesario inicializar un fragmento de código en particular. Por ejemplo, cargar configuraciones, cargar caché, cargar cualquier configuración o realizar comprobaciones. El token AppInitialzer se crea específicamente para esto.
APP_INITIALIZER: función ejecutada inmediatamente al iniciar la aplicación.
Supongamos que necesitamos ejecutar alguna función runSettings al iniciar una aplicación angular:

function runSettingsOnInit() {
   ...
}

Para hacer esto, pasemos al módulo principal de AppModule y agréguelo a la sección de proveedores de decoradores de NgModule:

@NgModule({
   providers: [
       { provide: APP_INITIALIZER, useFactory: runSettingsOnInit }
   ]
})

9. Escucha de Bootstrap


Por analogía con AppInitialzer, Angular tiene una función que le permite rastrear la carga de un componente. Esta es APP_BOOTSTRAP_LISTENER.

Todas las devoluciones de llamada devueltas por este token se llamarán para cada componente descargable.

Puede usar esta función para rastrear el arranque de componentes en muchos casos. Por ejemplo, el módulo Router lo usa para destruir y crear componentes basados ​​en la navegación de ruta.

Para usar APP_BOOTSTRAP_LISTENER, debe agregarlo a la sección de proveedores en el AppModule con una función de devolución de llamada:

@NgModule({
   {
       provide: APP_BOOTSTRAP_LISTENER, multi: true,
       useExisting: runOnBootstrap
   }
   ...
})
export class AppModule {}


10. NgPlural


La pluralización es un dolor de cabeza para los programadores. La tarea de ajuste gramatical de las formas de las palabras dependiendo del uso del singular / plural surge constantemente. Algunos sitios simplemente usan los finales para esto. Por ejemplo:

1 component(s) removed
3 component(s) removed

Es decir, el lector mismo debe comprender qué número está implicado :)

Angular sugiere resolver este problema de una manera más civilizada, utilizando la directiva NgPlural.

NgPlural agrega o elimina subramas DOM basadas en un valor numérico. Para la pluralización, esto es lo que necesitas.

Para usar esta directiva, debe establecer el atributo [ngPlural] en el contenedor del elemento como una expresión de cambio. Los elementos internos con el atributo [ngPluralCase] ​​se mostrarán según las condiciones especificadas:

<p [ngPlural]="components">
   <ng-template ngPluralCase="=1">1 component removed</ng-template>   
   <ng-template ngPluralCase=">1">{{components}} components removed </ng-template>   
</p>


Ahora puede tirar "(s)". La directiva NgPlural ayudará a derivar la forma correcta de la palabra según el significado. Total:

// if 1 component
1 component removed

// if 5 components
5 components removed


Source: https://habr.com/ru/post/undefined/

More articles:


All Articles