angular-material2angular-material入门2


备注

本节概述了angular-material2是什么,以及开发人员可能想要使用它的原因。

它还应该提到angular-material2中的任何大型主题,并链接到相关主题。由于angular-material2的文档是新的,您可能需要创建这些相关主题的初始版本。

版本

更新日志日期
2.0.0 beta.8 链接 2017年7月6日
2.0.0 beta.7 链接 2017年6月19日
2.0.0 beta.6 链接 2017年5月25日
2.0.0 beta.5 链接 2017年5月13日
2.0.0 beta.4 链接 2017年5月12日
2.0.0 beta.3 链接 2017年4月7日
2.0.0 beta.2 链接 2017年2月15日
2.0.0 beta.1 链接 2016年12月23日
2.0.0 beta.0 链接 2016年12月22日

使用Angular CLI从master安装和设置

这个例子将是如何从master安装,也将使用@angular/cli

  1. 使用@angular/cli 一个新项目:

    ng new my-master-app
     

    如果尚未安装@angular/cli ,请使用以下命令:

    npm install -g @angular/cli
     
  2. master 安装:

    npm install --save @angular/animations
    npm install --save angular/material2-builds
    npm install --save angular/cdk-builds
     
  3. 按照上面的相同指南。

完成!

使用Angular CLI进行安装或设置

在这个例子中,我们将使用@angular/cli (最新)和@angular/material 的最新版本。在继续执行以下步骤之前,您至少应该了解Angular 2/4的基础知识。

  1. npm 安装角度材料模块:

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

这仅适用于版本2.0.0-beta.3 及更高版本。

安装@angular/animations 模块:

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

这仅适用于版本2.0.0-beta.8 及更高版本。

安装@angular/cdk 模块:

npm install @angular/cdk --save
 
  1. 在您的应用程序模块中导入您要使用的组件:

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

您现在可以在组件中使用Angular Material了!

注意:特定组件的文档即将推出。

设置主题,手势支持和材料图标


主题:

材料组件需要一个主题才能在应用程序中正常工作。

Angular Material 2提供了四个预建主题:

  • deeppurple琥珀色
  • 靛蓝粉
  • 粉色bluegrey
  • 紫色,绿色

如果您使用的是Angular CLI ,则可以在style.css 导入其中一个预构建的主题。

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

也可以使用index.html <link> 添加主题。

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

HammerJS

通过CDNnpm 将HammerJS添加到应用npm

npm install --save hammerjs
 

在根模块中,通常是app.module.ts ,添加import语句:

import 'hammerjs';
 

材料图标:

除非提供自定义图标,否则Angular Material 2 <md-icon> 需要材质图标。

index.html 添加:

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

将所有模块包装在一起

您还可以轻松地将所有要使用的角度模块包装到一个模块中:

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

之后,只需将模块导入应用程序主模块:

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