angular-material2Aan de slag met hoekig materiaal2


Opmerkingen

Deze sectie geeft een overzicht van wat hoekig materiaal2 is en waarom een ontwikkelaar het zou willen gebruiken.

Het moet ook alle grote onderwerpen binnen hoekig materiaal2 vermelden en naar de gerelateerde onderwerpen verwijzen. Aangezien de documentatie voor hoekig materiaal2 nieuw is, moet u mogelijk eerste versies van die gerelateerde onderwerpen maken.

versies

Versie changelog Datum
2.0.0-beta.8 Koppeling 2017/07/06
2.0.0-beta.7 Koppeling 2017/06/19
2.0.0-beta.6 Koppeling 2017/05/25
2.0.0-beta.5 Koppeling 2017/05/13
2.0.0-beta.4 Koppeling 2017/05/12
2.0.0-beta.3 Koppeling 2017/04/07
2.0.0-beta.2 Koppeling 2017/02/15
2.0.0-beta.1 Koppeling 2016/12/23
2.0.0-beta.0 Koppeling 2016/12/22

Installatie en instellingen van master met Angular CLI

Dit voorbeeld zal zijn hoe te installeren vanuit master en zal ook @angular/cli .

  1. Maak een nieuw project met @angular/cli :

    ng new my-master-app
     

    Als u @angular/cli niet hebt geïnstalleerd, gebruikt u deze opdracht:

    npm install -g @angular/cli
     
  2. Installeren vanaf master :

    npm install --save @angular/animations
    npm install --save angular/material2-builds
    npm install --save angular/cdk-builds
     
  3. Volg dezelfde gids als hierboven.

Gedaan!

Installatie of configuratie met Angular CLI

In dit voorbeeld gebruiken we @angular/cli (laatste) en de nieuwste versie van @angular/material . U moet op zijn minst de basisprincipes van Angular 2/4 kennen voordat u verder gaat met de onderstaande stappen.

  1. Installeer hoekige materiaalmodule vanaf npm :

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

Dit is alleen van toepassing op versies 2.0.0-beta.3 en hoger.

Installeer de module @angular/animations :

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

Dit is alleen van toepassing op versies 2.0.0-beta.8 en hoger.

Installeer de @angular/cdk module:

npm install @angular/cdk --save
 
  1. Importeer in uw applicatiemodule de componenten die u gaat gebruiken:

    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 {}
     

U bent nu klaar om hoekig materiaal in uw componenten te gebruiken!

Opmerking: de documenten voor specifieke componenten komen binnenkort.

Thema, gebaarondersteuning en materiële pictogrammen instellen


Thema:

Een thema is vereist om materiaalcomponenten goed te laten werken binnen de applicatie.

Angular Material 2 biedt vier vooraf gebouwde thema's:

  • Deep Purple-amber
  • indigo-pink
  • pink-blauwgrijs
  • paars groen

Als u Angular CLI gebruikt , kunt u een van de vooraf gebouwde thema's in style.css importeren.

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

Thema kan ook worden toegevoegd met behulp van <link> in index.html .

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

HammerJS

Voeg HammerJS toe aan de applicatie via CDN of npm :

npm install --save hammerjs
 

Voeg in uw app.module.ts , meestal app.module.ts , de importverklaring toe:

import 'hammerjs';
 

Materiële pictogrammen:

Tenzij aangepaste pictogrammen worden verstrekt, verwacht Angular Material 2 <md-icon> materiaalpictogrammen.

In index.html toevoegen:

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

Alle modules samen verpakken

Je kunt ook eenvoudig alle hoekmodules die je gaat gebruiken in één module verpakken:

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 {}
 

Daarna importeert u eenvoudig uw module in de hoofdmodule van de toepassing:

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 {}