♾ 💃🏼 👯 10 fonctionnalités angulaires utiles que vous avez manquées 🧑🏽‍🤝‍🧑🏽 🍺 👩🏽‍🌾

Si vous écrivez régulièrement des applications en angulaire et y avez passé plus de cent heures, vous connaissez probablement ces fonctions. Mais, bien sûr, lisez :)

Avant de passer aux fonctions d'Angular, il convient de mentionner un outil très utile. Bit (Github) permet de travailler facilement sur des composants angulaires et de les partager. Je le recommande sincèrement pour maintenir une interface cohérente, accélérer le développement et minimiser le nombre d'erreurs dans le code.

Exemple: chargeurs circulaires pour Angular avec bit.dev

1. Titre

La balise de titre est un élément HTML qui définit le titre d'une page Web. Les titres apparaissent sur la page des résultats de la recherche (SERP) sous la forme d'un titre cliquable pour le résultat. Ils sont très importants pour la convivialité, le référencement et la promotion sociale. les réseaux.

Les applications angulaires tirent le titre de la balise ... dans index.html. Par défaut, la transition entre les composants dans Angular ne modifie pas cet en-tête.

Saviez-vous qu'un titre peut être défini séparément de chaque composant?

Angular a un service de titre enangulaire/ platform-browser. Vous pouvez facilement l'intégrer dans d'autres composants et utiliser la méthode setTitle pour remplacer le titre.

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

Lorsque vous accédez à LoginComponent dans l'application, le titre de la fenêtre du navigateur devient «Login».

La même chose peut être effectuée dans n'importe quel composant et, en conséquence, lorsque vous naviguez dans l'application, le titre change, répondant aux actions de l'utilisateur.

2. Meta

Les méta balises angulaires d'application sont également extraites du fichier index.html. Et pour les définir à partir de composants, le service Meta deangulaire/ platform-browser.

Et encore une fois: l'utilisation de balises META est utile en termes de référencement et de promotion de page dans les réseaux sociaux. réseaux, ils contiennent des informations sur une page Web que les moteurs de recherche utilisent pour classer et afficher correctement dans les résultats de recherche.

Pour utiliser le composant meta tag, importez Meta depuisangulaire/ platform-browser et intégrer dans le composant souhaité.

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 peut désormais s'afficher correctement sur Twitter, Facebook, etc. Affichage simultané de descriptions, de titres et d'images sous une forme correcte et lisible.
Avez-vous entendu parler de cela aussi? Alors, voici quelque chose de plus intéressant.

3. Remplacement de l'interpolation de motif

L'interpolateur standard dans les modèles est {{}}. Si vous entrez une variable entre {{et}}, sa valeur sera affichée dans le DOM final.

Savez-vous qu'il est possible de remplacer les délimiteurs d'encapsulation standard sur n'importe quel caractère? C'est simple. Il vous suffit de spécifier de nouvelles valeurs dans la propriété d'interpolation dans le décorateur de composants.

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

L'interpolation utilisée dans le modèle AppComponent est devenue (()) et {{}} ne fonctionne plus.

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

Dans le navigateur, vous verrez que la chaîne «dataVar» s'affichera à la place de ((données)).

4. Emplacement

Nous pouvons obtenir l'URL actuelle de la page ouverte dans le navigateur en utilisant le service de localisation. Selon la LocationStrategy utilisée, la localisation sera stockée soit par le chemin dans l'URL (/ exemple / page /), soit par la partie de l'URL après la livre (# test / page /).

Avec Emplacement, nous pouvons accéder à l'URL, avancer dans l'histoire, revenir en arrière, modifier l'URL actuelle ou remplacer l'élément supérieur de l'histoire.

Le service de localisation de CommonModule vous aidera ici.

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. Document

Parfois, vous devez obtenir un modèle de document afin d'effectuer des opérations DOM directement à partir d'une application angulaire.

Le DOCUMENT sert uniquement cet objectif. DOCUMENT est un jeton DI représentant le contexte de rendu principal. Dans un navigateur, il s'agit d'un document DOM. Il fournit des opérations DOM indépendamment de l'exécution.

Remarque: Le document peut ne pas être disponible dans le contexte d'application si les contextes d'application et de rendu ne correspondent pas (par exemple, lors du démarrage de l'application dans Web Worker).

Disons que nous avons une sorte d'élément HTML:

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

Pour obtenir un HTMLElement de canevas, implémentez DOCUMENT:

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

Obtenez le canevas HTMLElement à l'aide de getElementById ()

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

Attention: utilisez le DOCUMENT avec précaution! Interagir avec le DOM est directement dangereux et augmente le risque de XSS.

6. Décorateur @Attribut

Fondamentalement, dans une application angulaire, ils utilisent les décorateurs de composants, de modules et de directives.

Cependant, il existe également un décorateur d'attributs qui vous permet de passer une chaîne statique sans surcharge de performance inutile, en contournant la vérification des modifications.

Les valeurs de décorateur d'attribut ne sont vérifiées qu'une seule fois. Utilisé comme un décorateurContribution:

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

7. HttpInterceptor

HttpInterceptor est une fonctionnalité très puissante d'Angular qui vous permet d'intercepter des requêtes HttpRequest et de les traiter.

La plupart des intercepteurs convertissent la demande sortante avant de la transmettre à l'intercepteur suivant de la chaîne en appelant next.handle (transformerReq).

Dans de rares cas, les intercepteurs peuvent traiter complètement la demande eux-mêmes et ne pas déléguer le reste de la chaîne. Ce comportement est autorisé.

Le HttpInterceptor est le plus souvent utilisé dans:

Authentification
Mise en cache
Faux backend
Transformation d'URL
Subversion d'en-tête

Pour utiliser cet intercepteur, vous devez créer un service et implémenter l'interface HttpInterceptor.

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

Insérez-le dans le module principal:

@NgModule({
   ...
   providers: [
       {
           provide: HTTP_INTERCEPTORS,
           useClass: MockBackendInterceptor,
           multi: true
       }
   ]
   ...
})
export class AppModule {}

8. AppInitializer

Parfois, lors du lancement d'une application Angular, il est nécessaire d'initialiser un morceau de code particulier. Par exemple, chargez les paramètres, chargez le cache, chargez toutes les configurations ou effectuez des vérifications. Le jeton AppInitialzer est créé spécialement pour cela.
APP_INITIALIZER: fonction exécutée immédiatement au lancement de l'application.
Supposons que nous devons exécuter une fonction runSettings lors du démarrage d'une application angulaire:

function runSettingsOnInit() {
   ...
}

Pour ce faire, passons au module principal AppModule et ajoutons-le à la section des fournisseurs de décorateurs NgModule:

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

9. Écouteur Bootstrap

Par analogie avec AppInitialzer, Angular a une fonction qui vous permet de suivre le chargement d'un composant. Il s'agit de APP_BOOTSTRAP_LISTENER.

Tous les rappels renvoyés par ce jeton seront appelés pour chaque composant téléchargeable.

Vous pouvez utiliser cette fonctionnalité pour suivre le démarrage des composants dans de nombreux cas. Par exemple, le module Router l'utilise pour détruire et créer des composants basés sur la navigation d'itinéraire.

Pour utiliser APP_BOOTSTRAP_LISTENER, vous devez l'ajouter à la section des fournisseurs de l'AppModule avec une fonction de rappel:

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

10. NgPlural

La pluralisation est un casse-tête pour les programmeurs. La tâche de l'ajustement grammatical des formes de mots en fonction de l'utilisation du singulier / pluriel se pose constamment. Certains sites utilisent simplement les terminaisons pour cela. Par exemple:

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

Autrement dit, le lecteur lui-même doit comprendre quel nombre est impliqué :)

Angular suggère de résoudre ce problème d'une manière plus civilisée, en utilisant la directive NgPlural.

NgPlural ajoute ou supprime des sous-branches DOM en fonction d'une valeur numérique. Pour la pluralisation, c'est ce dont vous avez besoin.

Pour utiliser cette directive, vous devez définir l'attribut [ngPlural] sur le conteneur d'élément en tant qu'expression de commutateur. Les éléments internes avec l'attribut [ngPluralCase] seront affichés en fonction des conditions spécifiées:

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

Vous pouvez maintenant jeter «(s)». La directive NgPlural aidera à dériver la forme de mot correcte en fonction de la signification. Total:

// if 1 component
1 component removed

// if 5 components
5 components removed

10 fonctionnalités angulaires utiles que vous avez manquées