Angular a évolué au fil des ans et de nouvelles fonctionnalités intéressantes ont été constamment ajoutées à chaque version. L'une des améliorations concerne la conception des matériaux, qui inclut de nouveaux composants. Ce tutoriel examinera le matériau angulaire et la manière de l'intégrer à des projets angulaires 6..
Material Design est un langage de conception pour les applications Web et mobiles développé par Google en 2014. Material Design permet aux développeurs de personnaliser leur interface utilisateur tout en conservant une interface graphique attrayante avec laquelle les utilisateurs sont à l'aise. Avec Material Design, vous obtenez un format bien organisé et la possibilité d'exprimer votre marque et votre style..
Pour un exemple de conception matérielle, consultez Houzz, une application de conception domiciliaire qui a remporté les Google Play Awards en 2016. Cette application utilise Matériau conception pour intégrer ses nombreuses fonctionnalités dans l'immobilier limité d'appareils mobiles. Cela procure une bonne expérience à l'utilisateur en lui permettant de visualiser et de naviguer dans l'application sans se sentir dépassé. C'est vraiment l'une des meilleures applications de conception de matériaux.
Ce message ne concerne pas Material Design, nous n'entrerons donc pas dans tous les détails. Si vous voulez en savoir plus, il y a un excellent tutoriel sur le Material Design sur le blog Envato.
Matériau angulaire consiste en une suite de composants angulaires pré-construits. Contrairement à Bootstrap, qui vous donne des composants que vous pouvez styler comme vous le souhaitez, Angular Material s'efforce de fournir une expérience utilisateur améliorée et cohérente. En même temps, il vous permet de contrôler le comportement de différents composants..
Tout comme Angular, Angular Material a beaucoup évolué depuis sa publication initiale, avec de grandes améliorations et corrections de bugs..
Afin d’ajouter un matériau angulaire à un projet, nous utiliserons le ng ajouter
commande utilisée pour ajouter de nouvelles fonctionnalités aux projets angulaires. Cette commande se trouve être une nouvelle fonctionnalité dans Angular 6, et est aussi simple que:
ng add @ angular / material
Cette commande ajoutera la bibliothèque à un projet existant et introduira le thème CSS dans angular.json. Il ajoutera également des scripts dans index.html et mettre à jour le AppModule
.
Une autre caractéristique de Angular 6 est ng mise à jour
, qui met à jour les dépendances npm quand une nouvelle version est publiée. Il met également à jour votre code RxJS et votre code de conception de matériau pour tirer parti des nouvelles API..
Le matériau angulaire comprend plusieurs composants de conception qui appartiennent aux catégories suivantes:
Vous pouvez générer les composants de démarrage à l'aide du ng mise à jour
commander. Certains des schémas disponibles via cette commande sont:
Ces schémas peuvent facilement être installés avec le ng générer
commande comme suit:
ng génère @ angular / material: table_matériel --nom
: génère un composant qui affiche des données avec une table de donnéesng génère @ angular / material: material-nav --name
: génère un composant avec une navigation latérale et une barre d'outilsng génère @ angular / material: material-dashboard --name
: génère un composant contenant une liste de cartes dynamique.
Pour commencer, vous aurez besoin de CLI angulaire. Si vous n’avez pas installé Angular CLI, installez-le simplement en lançant la commande suivante.
npm install -g @ angular / cli
Ensuite, nous devrons initialiser un nouveau projet angulaire. Pour ce faire, lancez la commande suivante, où Matériau
est le nom de notre projet angulaire.
ng nouveau Material-ng
Cette commande crée plusieurs fichiers de modèle angulaire pour votre projet et installe les dépendances de démarrage nécessaires..
Allez dans le répertoire de votre projet et ajoutez Angular Material à votre projet.
cd MaterialApp ng add @ angular / material
Ensuite, nous ajouterons des composants communs à de nombreuses applications, telles que la navigation..
Pour ajouter une barre de navigation, tapez simplement:
ng génère @ angular / material: material-nav --name myNav
Cette commande ajoute un composant de navigation latérale et de tiroir repliable. Vous devriez obtenir le résultat suivant, qui contient quatre fichiers générés pour nous, à savoir: my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, et my-nav.component.ts.
CREATE src / app / my-nav / my-nav.component.css (129 octets) CREATE src / app / mon-nav / mon-nav.component.html (958 octets) CREATE src / app / mon-nav / mon -nav.component.spec.ts (699 octets) CREATE src / app / my-nav / mon-nav.component.ts (580 octets) UPDATE src / app / app.module.ts (795 octets)
Ouvert my-nav.component.html et vous devriez voir tout le code HTML pour la navigation qui a été généré pour nous.
Menu Lien 1 lien 2 lien 3 Matériau
Par défaut, un projet Starter Angular servira la page par défaut, mais nous voulons pouvoir voir la magie de Material Design! Pour utiliser notre composant de navigation généré dans Material Design, ouvrez app.component.html et remplacez tout le code par:
Maintenant, lorsque vous exécutez l'application, vous verrez la barre de navigation.
Vous remarquerez également que le composant de navigation que nous avons ajouté a été importé dans le module principal, comme indiqué:
# app.module.ts import BrowserModule from '@ angular / platform-browser'; importer NgModule de '@ angular / core'; importer AppComponent depuis './app.component'; importer BrowserAnimationsModule depuis '@ angular / platform-browser / animations'; importer MyNavComponent de './my-nav/my-nav.component'; importer LayoutModule de '@ angular / cdk / layout'; import MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule de '@ angular / material'; @NgModule (declarations: [AppComponent, MyNavComponent], importations: [BrowserModule, BrowserAnimationsModule, LayoutModule, MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule]
Dans my-nav.component.html, apportons également quelques modifications aux listes de menus:
Accueil Contrôles de formulaire Boutons et indicateurs de navigation Navigation Popups et modaux Tableau de données
Maintenant, vous pouvez démarrer le serveur de développement en lançant:
ng server -open
Le résultat devrait ressembler à ceci:
Comme vous pouvez le constater, Angular Material constitue un moyen simple de rendre votre application opérationnelle. Avec seulement quelques commandes et quelques lignes de code, nous avons pu incorporer Material Design dans notre application Angular.!
Visitez notre dépôt GitHub pour obtenir le code source complet de cet exemple d'application..
J'espère que ce tutoriel vous a aidé à comprendre comment utiliser la puissance de Material Design dans votre application pour une interface utilisateur de premier ordre. Pour plus d'informations sur Material Design in Angular 6, consultez la documentation officielle qui contient des modèles prêts à l'emploi. C'est un endroit formidable pour apprendre Angular. Vous pouvez également consulter nos tutoriels et cours angulaires ici sur Envato Tuts+!