使用Angular 4来运用材料设计

2 年 ago
文, 翔
3 minutes

我想在Angular 4中应用材料设计来创建应用程序，但是由于遇到了一些困难，所以我决定记录下正确的操作步骤。

Screen Shot 2017-09-26 at 11.06.27 AM.png

我迷上了一种方法 (wǒ mí le yī

由于我是Angular的初学者，所以不知从何开始，依照书中所写的，我在quick-start的存储库的基础上添加了material design的npm。然而，由于出现了版本问题，我试图确保版本一致，还因为库的版本不同而导致目录不同，在systems.config.js中添加了库等等，尝试了许多方法，但404错误无法解决，经过数个小时的奋斗后，我决定放弃，然后就去睡了。

行之有效的方法

然而，问题在于它是基于”quick-start”的，所以减少复杂性似乎能够成功（特别是对于初学者来说，他们不能立即学习很多东西）。现在我将分享一种有效的方法。

基本上是在 Resource 的角落写下的方法的混合体。

安装 Angular CLI

安装Angular CLI。

npm install -g @angular/cli

生成 Material Design 的模板

根据Angular 4 Material教程，我们可以使用Angular4中的Material Design模板。为了避免依赖库的问题，我们选择使用简便的方式。

ng new ng4-material

添加npm上的Material Design库

我們將添加材料設計庫來增強我們的設計。重點是，必須先添加cdk才能正常運作。

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

我会将hammer.js也加入进去。md-slide-toggle、md-slider和mdTooltip依赖于hammer.js，所以最好也加进去。

$ npm install --save hammerjs

然后，将其添加到 src/main.ts 中。

import 'hammerjs';

将库嵌入

我将添加安装了的npm库。

样式的添加

在src/style.css中添加您喜欢的样式。还可以加入图标，就像这样。body之后是可选的，但前两行是重点。获取图标和导入导入的Material Design主题。

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

body {
    margin: 0;
    font-family: Roboto, sans-serif;
  }

  md-card {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
  }

  md-toolbar-row {
    justify-content: space-between;
  }

  .done {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
  }

索引.html

即使不特意去做任何事情，不过我正在导入图标。（可能是不必要的）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ng4Material</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
</body>
</html>

材料的添加

我将所有与 Material 相关的导入都整合到 material.module.ts 文件中进行保存。

import { NgModule } from '@angular/core';

import {
  MdButtonModule,
  MdMenuModule,
  MdToolbarModule,
  MdIconModule,
  MdCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MdButtonModule,
    MdMenuModule,
    MdToolbarModule,
    MdIconModule,
    MdCardModule
  ],
  exports: [
    MdButtonModule,
    MdMenuModule,
    MdToolbarModule,
    MdIconModule,
    MdCardModule
  ]
})
export class MaterialModule {}

app.module.ts -> 应用模块.ts

正在导入先前的Material Design。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html 组件的 HTML 代码

接下来，只需使用Material Design来创建加载的html。

<div>
  <md-toolbar color="primary">
    <span><md-icon>mood</md-icon></span>

    <span>Muscke Hack</span>

    <button md-icon-button [md-menu-trigger-for]="menu">
      <md-icon>more_vert</md-icon>
    </button>
  </md-toolbar>
  <md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item>Option 1</button>
    <button md-menu-item>Option 2</button>
  </md-menu>

  <md-card>
    <button md-button>All</button>
    <button md-raised-button>Of</button>
    <button md-raised-button color="primary">The</button>
    <button md-raised-button color="accent">Buttons</button>
  </md-card>

  <span class="done">
    <button md-fab>
      <md-icon>check circle</md-icon>
    </button>
  </span>
</div>

剩下的就是执行

npm start

总结

使用ng4-material模版让我非常容易地完成了。看起来使用quick-start模版的话可能会遇到一些问题。实际上，我本来想基于quick-start模版，因为它提供了各种测试和环境，但现在看来，可能更容易的是基于ng4-material模版并加入测试。

果然，解决依赖问题是需要时间的，所以我觉得最好使用不涉及这个问题的模板。好了，终于可以开始编码了。

资源

    • Angular CLI

 

    • Angular 4 Material Tutorial

 

    • material2/guides/getting-started.md

 

    Getting Started With Angular Material 2
✖
广告
将在 10 秒后关闭
bannerAds