Angular Material & Hello World

時間  2019-11-17
標籤 angular material hello world 欄目 AngularJS 简体版
原文   原文鏈接

文章首發於公衆號：Plus技術棧css

前言

Angular Material(下稱Material)的組件樣式至少是能夠知足通常的我的開發需求(我真是毫無設計天賦)，也是Angular官方推薦的組件。咱們經過用這個UI庫來快速實現本身的idea。html

在上節中咱們安裝了Angular，並新建了一個簡單工程。這節中咱們將會將Material導入工程中，簡單寫一個HelloWorld的例子，並講解Angular模塊中的declarations、imports、providers以及bootstrap等概念。前端

環境安裝

Material簡單說來就是一個庫，於後端來講，不管是Java中的import、C++中的#include仍是Python中的import，都是爲了導入第三方庫。那麼在前端，也是須要導入UI庫的，導入的UI庫包含了代碼邏輯(controller)與視圖界面(view)。node

參考Quick Start安裝typescript

簡單說來有4步：shell

Step1加入工程依賴npm

假設我已經經過ng new的命令建立了一個工程hello-world。進入到該工程中，執行npm install命令。json

cd hello-world
npm install --save @angular/material @angular/cdk @angular/animations
複製代碼

使用-save選項將會把後面的三個依賴加入到hello-world/package.json文件中的dependencies屬性下。bootstrap

Step2 導入動畫模塊後端

step1中雖然已經加入了第三方依賴並install安裝到了node_modules中，但實際上咱們尚未執行import操做，將其導入到代碼中。

在咱們工程的根模塊hello-world/src/app/app.module.ts文件中導入瀏覽器動畫模塊

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

@NgModule({
  ...
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})
export class AppModule { }
複製代碼

Step3 導入組件模塊

在hello-world/src/app目錄下新建一個material.module.ts文件。並寫下以下代碼：

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

@NgModule({
    exports: [
        MatButtonModule,
    ]
})
export class MaterialModule {}
複製代碼

這個文件中咱們導入了兩個包：NgModule以及MatButtonModule，在第四行中的@NgModule用來標註緊跟着的MaterialModule類是一個module類，咱們定義這個類，專門用來管理Material相關的模塊導入，經過exports關鍵字，全部import過該MaterialModule的模塊的做用範圍了組件均可以直接使用exports出來的模塊。

MatMaterialModule是Angular Material中的按鈕組件，從@angular/material中導入。咱們將會在根模塊app.module.ts文件中import這個Material模塊，這樣這個應用均可以使用Angular Material的組件了。

而後在根模塊app.module.ts中導入MaterialModule:

import { MaterialModule } from './material.module'

@NgModule({
  ...
  imports: [
    MaterialModule
  ],
  ...
})
export class AppModule { }
複製代碼

Step4 添加主題

在hello-world/src/style.css文件中引入主題的選擇：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
複製代碼

官方提供了4種主題，咱們能夠經過替換最後的xxx.css來進行選擇：

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

在每一種主題下，Angular Material都給咱們搭配的按鈕的一些配色。咱們能夠在官網的右上角切換主題。咱們也能夠自定義主題，具體參考它的guide，雖然我挺喜歡折騰的，但這個仍是......不細說了。

Step5 手勢支持

這個主要是指當你把鼠標移到按鈕上面的懸浮提示的組件樣式。(和css樣式中的hover的區別可能在於這個進行了擴展？)

首先仍是用npm，安裝hammers，並加入到package.json的依賴中去:

npm install --save hammerjs
複製代碼

而後在hello-world/src/main.ts文件中引入

import 'hammerjs';
複製代碼

Step6 Icon依賴

Angular Material也有本身的一套icon庫，裏面還挺豐富的。咱們修改hello-world/src/index.html便可引入。

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

index.html文件是Angular工程的頁面入口，這個文件的body長這樣：

<body>
  <app-root></app-root>
</body>
複製代碼

app-root指的就是在src/app/app.component.ts中定義的'app-root'。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
複製代碼

在angular中，咱們想複用一個組件，就能夠根據這個組件的selector值，直接引用過來，這個後面具體再說。

還有一種比較簡單的方式，在工程目錄下直接執行ng add @angular/material加入Angular Material

模塊解析

前面比較難理解的多是爲了引入Material本身的MatButtonModule組件時，將其加入到了export中。這裏咱們說一下Angular中的模塊，各位同窗能夠對照着app.module.ts文件看一下。

Angular中的模塊是一個帶有 @NgModule() 裝飾器的類。@NgModule() 裝飾器是一個函數，它接受一個元數據對象，該對象的屬性用來描述這個模塊。其中最重要的屬性以下:

  • declarations: 可聲明對象表，把屬於該模塊的組件，定義在這個屬性中。
  • imports: 導入表，本模塊的組件依賴的東西，都import進來，這樣declare在聲明表的組件均可以找到這些依賴
  • exports: 導出表，其餘模塊要用到本模塊的組件，咱們將其導出，供其餘模塊使用
  • providers: 本模塊向屬於本模塊的組件提供一些服務的建立器，由於Angular中有依賴注入，當咱們建立了一個服務時，必須在想要注入這個服務的對應模塊的providers屬性裏寫上它，以便於建立注入。
  • bootstrap: 應用的主視圖，稱爲根組件。它是應用中全部其它視圖的宿主。只有根模塊才應該設置這個 bootstrap 屬性

全部，在咱們如今這個工程中，一共有兩個模塊：根模塊，Material管理模塊。

當咱們在根模塊import了Material管理模塊後，該Material模塊中export出來的組件均可以讓屬於根模塊的組件使用。

Hello World

咱們實現以下效果：

整個app目錄以下:

app/
├── app-routing.module.ts
├── app.component.css
├── app.component.html
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── hello-world.html
└── material.module.ts
複製代碼

material.module.ts

首先在material.module.ts文件中引入Angular Material的按鈕組件和彈出框組件：

  • MatButtonModule
  • MatDialogModule
import { NgModule } from '@angular/core';
import { MatButtonModule,
        MatDialogModule } from '@angular/material';

@NgModule({
    exports: [
        MatButtonModule,
        MatDialogModule
    ]
})
export class MaterialModule {}
複製代碼

app.module.ts

引入MaterialModule。在這個例子中，咱們在點擊按鈕後會出現一個彈出框，這個彈出框也是一個動態組件，動態組件須要在declarations和entryComponents中聲明:

import { MaterialModule } from './material.module'
@NgModule({
  declarations: [
    AppComponent,
    HelloWorldDialogComponent
  ],
  entryComponents: [HelloWorldDialogComponent],
  imports: [
    MaterialModule
  ],
  ...
})
export class AppModule { }
複製代碼

app.component.html

咱們在html中只用的了一個button，並指定它爲Angular Material中的raised-button(關於Angular的button後面會提到)。指定點擊事件爲openDialog()。

<button mat-raised-button (click)="openDialog()">Hello World</button>
複製代碼

app.component.ts && hello-world.html

在ts文件中，咱們聲明瞭兩個component，其中HelloWorldDialogComponent爲動態的彈框組件，接受一個字符串參數。當咱們點擊頁面上的button以後，觸發openDialog()方法，傳遞一個'Hello World!'字符串過去，顯示在動態組件的html中。

import { Component, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'hello-world';

  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(HelloWorldDialogComponent, {
      data: 'Hello World!'
    });
  }
}

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.html',
})
export class HelloWorldDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}
複製代碼

在動態組件中咱們指定了templateUrl是當前目錄下的hello-world.html文件。

<h1 mat-dialog-title>Angular</h1>
<div mat-dialog-content>
    {{data}}
</div>
複製代碼

除了以上寫法外，咱們還能夠直接用TAB鍵上的符號書寫html模版，不用再新建一個文件了。

@Component({
  selector: 'hello-world',
  templateUrl: `
    <h1 mat-dialog-title>Angular</h1>
    <div mat-dialog-content>
    {{data}}
    </div>
    		`,
})
export class HelloWorldDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}
複製代碼

To Be Continue

本節主要寫的是如何搭環境，以及Angular的模塊的一些理解。後面將詳細介紹Angular Material中的組件的使用。有問題的同窗歡迎留言交流.

源碼見：專題簡介

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程