Une brève discussion sur la façon d'introduire une bibliothèque d'interface utilisateur tierce (Angular Material) dans les projets Angular

Cet article vous présentera comment introduire une bibliothèque d'interface utilisateur tierce (Angular Material) dans le projet Angular. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Environnement :

• CLI angulaire : 11.0.6
• Angulaire : 11.0.7
• Nœud : 12.18.3
• npm : 6.14.6
• IDE : VSCode

1. bibliothèque

Développement angulaire, à moins que vous n'ayez qu'une ou deux pages simples, l'introduction d'une bibliothèque d'interface utilisateur tierce est essentielle. Quant à la bibliothèque à utiliser, vous devez prendre en compte de nombreux aspects. [Recommandations de tutoriel associées : "tutoriel angulaire"]

Par exemple :

• Popularité

• État de mise à jour de la version (si les mises à jour anuglar peuvent être suivies, si les bugs sont corrigés dans le temps)

• Style d'interface utilisateur, s'il est adapté au projet

• Facilité de démarrage

• Exhaustivité de la documentation

Il existe de nombreuses bibliothèques de classes disponibles pour Angular sur le marché, qui peuvent être sélectionnées en fonction des conditions du projet et de l'entreprise. Répertoriez brièvement les bibliothèques facultatives de l'interface utilisateur.

• Angular Material : bibliothèque d'interface utilisateur officielle angulaire. https://material.angular.io/

• clarity : Un framework étranger relativement populaire, https://clarity.design/.

• NG-ZORRO : Version angulaire d'Alibaba Ant Design. https://ng.ant.design/docs/introduce/en

• Element Angular : Le très populaire élément basé sur Vue en Chine a également une version angulaire. https://element-angular.faas.ele.me/

• Kendo UI. Beaucoup sont très puissants, mais ils sont payants. https://www.telerik.com/kendo-angular-ui

2. Matériau angulaire

2.1. .Avantages et inconvénients

2.1.1 Avantages

• Composant d'interface utilisateur officiel
• La mise en œuvre matérielle la plus standard.
• Suivez la progression de la mise à jour des composants de base d'Angular
• Prend officiellement en charge les mises à niveau simultanées avec Angular

2.1.2 Inconvénients

<.>

Pas autant de composants que les autres frameworks, mais fondamentalement suffisant
• Le style ne ressemble pas particulièrement aux frameworks domestiques

2.2 Introduction au. project

1. Exécutez la commande suivante dans le répertoire racine :

ng add @angular/material

2. Importez dans le module auquel appartient la page, ou dans app.module.ts. .

// import MatSliderModule
import { MatSliderModule } from '@angular/material/slider';

…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

3. Résumé

• Les composants tiers ont leurs propres avantages et inconvénients

• Selon l'entreprise, en fonction des besoins du projet, choisissez

• La mise à niveau d'Angular Material est plus facile et officiellement prise en charge.

Pour plus de connaissances liées à la programmation, veuillez visiter :

Vidéo de programmation ! !

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!