angular-material2Démarrer avec angular-material2


Remarques

Cette section fournit une vue d'ensemble de ce qu'est un matériau angulaire2 et pourquoi un développeur peut vouloir l'utiliser.

Il convient également de mentionner tous les sujets importants dans angular-material2, et de les relier aux sujets connexes. La documentation de angular-material2 étant nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.

Versions

Version Changelog Rendez-vous amoureux
2.0.0-beta.8 Lien 2017-07-06
2.0.0-beta.7 Lien 2017-06-19
2.0.0-beta.6 Lien 2017-05-25
2.0.0-beta.5 Lien 2017-05-13
2.0.0-beta.4 Lien 2017-05-12
2.0.0-beta.3 Lien 2017-04-07
2.0.0-beta.2 Lien 2017-02-15
2.0.0-beta.1 Lien 2016-12-23
2.0.0-beta.0 Lien 2016-12-22

Installation et configuration à partir de master avec Angular CLI

Cet exemple expliquera comment installer à partir de master et utilisera également @angular/cli .

  1. Faire un nouveau projet avec @angular/cli :

    ng new my-master-app
     

    Si vous n'avez pas installé @angular/cli , utilisez cette commande:

    npm install -g @angular/cli
     
  2. Installer depuis le master :

    npm install --save @angular/animations
    npm install --save angular/material2-builds
    npm install --save angular/cdk-builds
     
  3. Suivez le même guide que ci-dessus.

Terminé!

Installation ou configuration avec CLI angulaire

Dans cet exemple, nous utiliserons @angular/cli (latest) et la dernière version de @angular/material . Vous devez au moins connaître les bases de l'angulaire 2/4 avant de poursuivre les étapes ci-dessous.

  1. Installer le module de matériau angulaire à partir de npm :

    npm install @angular/material --save
     
2.0.0-beta.3

Cela s'applique uniquement aux versions 2.0.0-beta.3 et supérieures.

Installez le module @angular/animations :

npm install @angular/animations --save
 
2.0.0-beta.8

Cela s'applique uniquement aux versions 2.0.0-beta.8 et supérieures.

Installez le module @angular/cdk :

npm install @angular/cdk --save
 
  1. Dans votre module d'application, importez les composants que vous allez utiliser:

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
    
    import { AppComponent } from './app.component';
    
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    
    @NgModule({
         imports: [
             BrowserAnimationsModule,
             MdButtonModule,
             MdSnackBarModule,
             MdSidenavModule,
             CommonModule,
             // This is optional unless you want to have routing in your app
             // RouterModule.forRoot([
             //     { path: '', component: HomeView, pathMatch: 'full'}
             // ])
         ],
         declarations: [ AppComponent ],
         boostrap: [ AppComponent ]
    })
    export class AppModule {}
     

Vous êtes maintenant prêt à utiliser Angular Material dans vos composants!

Note: Les documents pour des composants spécifiques seront bientôt disponibles.

Définir des icônes de thème, de support gestuel et de matériel


Thème:

Un thème est requis pour que les composants matériels fonctionnent correctement dans l'application.

Le matériau angulaire 2 fournit quatre thèmes pré-construits:

  • deeppurple-amber
  • rose indigo
  • rose-bleu-gris
  • Violet vert

Si vous utilisez Angular CLI , vous pouvez importer l'un des thèmes style.css dans style.css .

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

Le thème peut également être ajouté en utilisant <link> dans index.html .

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
 

HammerJS

Ajoutez HammerJS à l'application via CDN ou npm :

npm install --save hammerjs
 

Dans votre module racine, généralement app.module.ts , ajoutez l'instruction import:

import 'hammerjs';
 

Icônes matérielles:

Sauf si des icônes personnalisées sont fournies, le matériau angulaire 2 <md-icon> attend des icônes de matériau.

Dans index.html ajoutez:

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

Envelopper tous les modules ensemble

Vous pouvez également facilement envelopper tous les modules angulaires, que vous allez utiliser, dans un seul module:

import { NgModule } from '@angular/core';
import { MdButtonModule, MdSnackBarModule, MdSidenavModule } from '@angular/material';
 
@NgModule({
    imports: [
        BrowserAnimationsModule,
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ],
    exports: [
        MdButtonModule,
        MdSnackBarModule,
        MdSidenavModule
    ]
})
export class MaterialWrapperModule {}
 

Après cela, importez simplement votre module dans le module principal de l'application:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { MaterialWrapperModule } from './material-wrapper.module.ts';
import { AppComponent } from './app.component';


@NgModule({
    imports: [
        BrowserAnimationsModule, 
        MaterialWrapperModule,
        CommonModule,
        // This is optional, use it when you would like routing in your app
        // RouterModule.forRoot([
        //     { path: '', component: HomeView, pathMatch: 'full'}
        // ])
    ],
    declarations: [ AppComponent],
    bootstrap: [ AppComponent ]
})
export class AppModule {}