Création d'UIS avec des composants de conception de matériaux angulaires

Ce tutoriel présente la conception de matériaux angulaires et vous guide en créant une application angulaire simple avec une interface utilisateur matérielle. Tirer parti des vitesses de composants prédéfinies et crée des applications d'apparence professionnelle.

Concepts clés:

• Le matériau angulaire fournit un ensemble complet de composants d'interface utilisateur adhérant aux principes de conception des matériaux.
• Les conditions préalables incluent Node.js (6.9.0), NPM (3) et le CLI angulaire
• L'installation consiste à utiliser le NPM pour ajouter du matériau angulaire et ses dépendances. Le thème du thème est réalisé en important un thème pré-construit ou en créant un personnal.
• Les composants sont importés modulaire dans vos modules angulaires.
• Le tutoriel montre à l'aide de boutons, de cartes, de tables et de formulaires.
• Les fonctionnalités avancées comme les gestes (via HammerJS) et les animations (via @angular/animations) améliorent l'expérience utilisateur.

Qu'est-ce que la conception du matériau?

La conception des matériaux est un langage de conception pour créer des expériences numériques sur toutes les plateformes. Il fournit des principes et des directives pour l'interactivité, le mouvement et les composants, rationalisant le processus de conception. Les composants matériels offrent une modularité, un thème et une personnalisation.

Présentation du matériau angulaire:

Le matériau angulaire implémente la conception du matériau pour angulaire. Il comprend des composants pour:

• Formulaires (entrées, sélections, cases à cocher, sélecteurs de date)
• Navigation (menus, barres latérales, barres d'outils)
• Disposition (grilles, cartes, onglets, listes)
• boutons, indicateurs, fenêtres contextuelles, modales et tables de données.

Configuration de votre environnement de développement:

Assurez-vous que Node.js (6.9.0) et NPM (3) sont installés. Installez la CLI angulaire:

npm install -g @angular/cli

Créez un nouveau projet angulaire:

ng new angularmaterialdemo

Générer des composants:

ng g component login
ng g component CustomerList
ng g component CustomerCreate

Configurer le routage dans src/app/app.module.ts:

// ... imports ...
import { RouterModule, Routes } from '@angular/router';
// ...

const appRoutes: Routes = [
  { path: 'customer-list', component: CustomerListComponent },
  { path: 'customer-create', component: CustomerCreateComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/login', pathMatch: 'full' },
];

// ... @NgModule ...
imports: [
  // ... other imports ...
  RouterModule.forRoot(appRoutes)
],
// ...

Installation du matériau angulaire:

Installez le matériau angulaire et ses dépendances:

npm install --save @angular/material @angular/cdk @angular/animations hammerjs

Importer des Hammerjs dans src/main.ts:

import 'hammerjs';

Ajoutez un thème à styles.css:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Ajouter des icônes de matériau à index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

import BrowserAnimationsModule dans src/app/app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// ... @NgModule ...
imports: [
  // ... other imports ...
  BrowserAnimationsModule
],
// ...

Création d'un module de matériau:

Créer src/app/material.module.ts:

import { NgModule } from '@angular/core';
import { MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule, MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule, MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule, MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule } from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule,
    MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule,
    MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule
  ],
  exports: [
    MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule,
    MatTableModule, MatToolbarModule, MatIconModule, MatDialogModule, MatSnackBarModule,
    MatDatepickerModule, MatNativeDateModule, MatRadioModule, MatSelectModule, MatSliderModule,
    MatDividerModule, MatTabsModule, MatCheckboxModule, MatProgressSpinnerModule
  ]
})
export class MyMaterialModule { }

import MyMaterialModule dans src/app/app.module.ts.

Construire l'interface utilisateur:

(La construction détaillée de l'interface utilisateur pour app.component.html, login.component.html, customer-list.component.html et customer-create.component.html est trop étendue pour inclure ici. La réponse originale fournit ce détail. La réponse originale fournit des exemples complets d'utilisation de divers composants de matériaux angulaires dans ces composants, y compris la gestion des erreurs avec des dialogues modaux et des notifications de snackbar.

Conclusion:

Ce tutoriel fournit une base pour construire des applications angulaires avec une interface utilisateur de conception de matériaux. La modularité et les caractéristiques étendues du matériau angulaire améliorent considérablement l'efficacité de développement et créent des applications visuellement attrayantes et conviviales. N'oubliez pas de consulter la documentation officielle du matériel angulaire pour plus de détails et d'options de composants.

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!