Meilleures pratiques pour accéder aux variables TS dans les modèles HTML dans les applications angulaires et la gestion des ressources statiques

Cet article explore le mécanisme d'accès à des variables de modèle HTML à partir de composants de typeScript en angulaire, et se concentre sur la résolution des erreurs de construction qui peuvent être causées par l'utilisation directement des variables TS lors du référencement des ressources statiques dans HTML. L'article expliquera la méthode recommandée d'angulaires pour gérer les ressources statiques, c'est-à-dire pour utiliser l'index.html comme point d'entrée et utiliser des chemins relatifs pour désigner les ressources dans le répertoire des actifs pour assurer l'exactitude et l'efficacité de l'application pendant la construction et le déploiement.

Comprendre la liaison des variables TS et des modèles HTML dans Angular

Dans les applications angulaires, l'interaction des données entre le fichier TypeScript du composant (.ts) et son modèle HTML (.html) correspondant est l'un des mécanismes de base. Les développeurs affichent ou lient généralement les valeurs de variables dans les composants TS aux attributs des éléments HTML par expression d'interpolation {{variableName}} ou la liaison de propriété [Property] = "variablename".

Par exemple, déclarez et initialisez une variable hôte dans le frontage.component.ts:

 import {composant, onInit} de '@ angular / core';

@Composant({
  Sélecteur: «App-front-Layout»,
  templateUrl: './front-layout.component.html',
  StyleUrls: ['./front-layout.component.css']
})
Export Class FrontlayOutComponent implémente onInit {
  hôte: string; // exactement le type est la chaîne
  constructeur () {}

  ngoninit (): void {
    this.host = "http: // localhost: 4200";
  }
}

Essayez ensuite de référencer par expression d'interpolation dans Front-Layout.Component.html:

 
<link rel="Stylesheet" href="'%7B%7Bhost%7D%7D'%20/%20actifs%20/%20front%20/%20css%20/%20bootstrap.min.css">

Bien que {{host}} soit remplacé par http: // localhost: 4200 à l'exécution, Angular CLI effectuera une analyse statique du modèle lors de la construction de l'application. Pour l'attribut HREF de la balise et l'attribut SRC de la balise , le CLI essaie d'analyser ces chemins pour vérifier que la ressource référencée existe et l'optimise. Lorsque le chemin contient des variables de modèle (telles que '{{host}}' / actifs / ...), la CLI ne peut pas déterminer son chemin statique final à l'étape de compilation, donc une erreur comme NG2008: n'a pas pu trouver de fichier de feuille de style ... est lancée. Cela montre que le système de construction d'Angular ne peut pas reconnaître des chemins dynamiques tels que les références de ressources statiques.

Meilleures pratiques pour la gestion des ressources statiques angulaires

La meilleure pratique pour les applications angulaires est de placer leshets Global CSS et les bibliothèques JavaScript (telles que Bootstrap, jQuery) dans le répertoire SRC / Assets et les référencer via le fichier d'entrée unique de l'application index.html.

1. Le rôle d'index.html : index.html est l'entrée de la page unique de l'application angulaire. Lorsque le navigateur charge l'application angulaire, la première chose qui est chargée est ce fichier. Toutes les bibliothèques Global CSS et JS qui doivent être chargées avant le début de l'application doivent être introduites ici.

2. Répertoire SRC / Assets : Src / Assets est un répertoire de ressources statique configuré par la CLI angulaire par défaut. Les fichiers placés dans ce répertoire sont copiés dans le répertoire de sortie final (généralement le dossier DIST) lorsqu'ils sont construits et sont accessibles via l'URL par rapport au chemin racine de l'application.

3. Référence du chemin relatif : lors de la référence aux ressources dans le répertoire des actifs dans index.html, le chemin par rapport à index.html doit être utilisé. Par exemple, si Bootstrap.min.css est situé dans SRC / Assets / Front / CSS /, il doit être référencé dans index.html comme ./assets/front/css/bootstrap.min.css.

Exemple de code: pratique correcte

Selon les meilleures pratiques ci-dessus, nous devons supprimer les références CSS et JavaScript externes du modèle de composant et les transférer sur index.html.

Front-Layout.Component.ts (restez inchangé ou supprimez les variables hôtes inutiles que si elle n'est utilisée que pour les chemins de ressource statiques)

 import {composant, onInit} de '@ angular / core';

@Composant({
  Sélecteur: «App-front-Layout»,
  templateUrl: './front-layout.component.html',
  StyleUrls: ['./front-layout.component.css']
})
Export Class FrontlayOutComponent implémente onInit {
  // Si la variable hôte est uniquement utilisée pour les chemins de ressource statique, il peut être supprimé.
  // S'il a d'autres utilisations (telles que l'URL de base de l'API), elle peut être conservée.
  // hôte: chaîne; 

  constructeur () {}

  ngoninit (): void {
    // this.host = "http: // localhost: 4200"; // n'a plus besoin de le définir pour les ressources statiques}
}

Front-Layout.Component.html (supprimez toutes les références CSS / JS externes)

 
 et <script> Tags -> de tous les CS et JS externes
<! - Ils doivent être référencés dans index.html ->

<div class = "main-wrapper">
    <router-outlet> </ router-outlet>
</script>

index.html (introduire correctement les ressources statiques mondiales)

Déplacez vos fichiers CSS et JS globaux vers le répertoire SRC / Assets / Front / (par exemple, SRC / Assets / Front / CSS / bootstrap.min.css), et référencez-le dans index.html comme suit:

 

<adal>
  <meta charset="utf-8">
  <title> Votre application angulaire 
  <base href="/"> 
  <meta name="Viewport" content="width = Device-width, initial-scale = 1">
  <link rel="icon" type="image / x-icon" href="favicon.ico">

  
  <link rel="Stylesheet" href="./%20actifs%20/%20front%20/%20css%20/%20bootstrap.min.css">
  <link rel="stylesheet" href="./%20actifs%20/%20front%20/%20plugins%20/%20select2%20/%20css%20/%20select2.min.css">
 head>
</title>
  <app-root>  

   pour optimiser les performances de chargement->
  <script src="./%20actifs%20/%20front%20/%20js%20/%20jQuery-3.6.0.min.js"> </ script>
  <! - Autres scripts mondiaux qui peuvent être nécessaires ->

</script></app-root></adal>

Choses à noter

• Analyse statique au moment de la construction : Encore une fois, la CLI angulaire effectuera une analyse statique strict des références de ressources statiques dans les modèles lors de la construction. Toutes les références qui ne peuvent pas être analysées en tant que chemins statiques valides au moment de la compilation (tels que HREF ou SRC contenant des variables de modèle) entraîneront une erreur de construction.
• base href : la balise dans index.html est cruciale. Il définit le chemin sous-jacent vers toutes les URL relatives de l'application, qui est essentielle à la fois pour le routage angulaire et le chargement correct des ressources statiques.
• Image ou arrière-plan dynamique : si vous avez besoin de lier dynamiquement le style d'image d'arrière-plan de l'attribut SRC ou de l'élément de l'image à l'intérieur du composant, vous pouvez utiliser la liaison de l'attribut (par exemple [src] = "imageUrl" ou [style.backgroundMage] = "'URL (' dynamicpath ')'"). Dans ce cas, les variables TS sont valides car ces propriétés sont analysées au moment de l'exécution du navigateur, plutôt que la validation du chemin statique à la construction angulaire.
• Configuration des actifs dans angular.json : Dans le fichier angular.json, l'architecture.build.options.actions de la configuration vous permet de personnaliser les fichiers ou les dossiers doivent être copiés dans le répertoire de sortie pendant le processus de construction. Par défaut, Src / Actifs sont inclus.

Résumer

Dans les applications angulaires, afin de gérer correctement et efficacement les ressources statiques (telles que les bibliothèques Global CSS et JavaScript), la meilleure pratique consiste à les placer dans le répertoire SRC / Assets et à les référence à l'aide de chemins relatifs via le fichier d'entrée de l'application index.html. Évitez d'utiliser des variables de typeScript pour construire dynamiquement des chemins de ressources statiques dans les modèles HTML des composants, en particulier dans les attributs HREF ou SRC des balises et , car cela va entrer en conflit avec le mécanisme d'analyse statique du temps de construction de la CLI angulaire et de la plomb pour créer des erreurs. Comprendre le processus de construction d'Angular et le rôle de l'index.html est la pierre angulaire de la construction d'applications robustes et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!