Bắt đầu với Angular Material 2
Angular Material 2 mang các thành phần Material Design vào ứng dụng Angular 2+. Mục tiêu của dự án là xây dựng đầy đủ các thành phần để dễ dàng xây dựng các giao diện Material Design cho thiết bị di động và máy tính để bàn.
Bản phát hành mới nhất của Angular Material phụ thuộc vào Angular 4+
Đây là cách bắt đầu với Angular Material 2:
1. npm cài đặt angle-material & hammerjs
Trước tiên, cài đặt Angular Material, Angular animations và Hammer.js trong dự án của bạn bằng các lệnh sau:
- npm install --save @angular/material @angular/animations @angular/cdk
- npm install --save hammerjs
Hammer.js là phần phụ thuộc tùy chọn và giúp hỗ trợ cảm ứng cho một số thành phần.
2. angle-cli.json
Nếu bạn quyết định sử dụng Hammer.js và cho rằng bạn đã bắt đầu dự án của bạn với Angular CLI , hãy sửa đổi file angle-cli.json của bạn để thêm thư viện Hammer.js. Tìm mảng Json * “scripts” * và thêm đường dẫn sau cho hammer.js:
"scripts": [ "../node_modules/hammerjs/hammer.min.js" ], Bạn có thể cần khởi động lại server local của bạn để các thay đổi đối với angle-cli.json có hiệu lực.
3. Mô-đun vật liệu tùy chỉnh
Trước Angular Material 2 Beta 3, có một MaterialModule global có thể được nhập trong module ứng dụng để cung cấp các thành phần. Nhược điểm của nó là rung cây không đủ hiệu quả để loại bỏ tất cả các mã không sử dụng.
MaterialModule do đó đã không được dùng nữa để ủng hộ việc xác định module vật liệu tùy chỉnh dành riêng cho dự án, nơi bạn chỉ nhập và xuất các thành phần cần thiết. Đây là module của ta có thể trông như thế nào:
import { NgModule } from '@angular/core'; import { MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule } from '@angular/material'; @NgModule({ imports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ], exports: [ MatButtonModule, MatMenuModule, MatToolbarModule, MatIconModule, MatCardModule ] }) export class MaterialModule {} Sau đó, bạn sẽ nhập module này vào module ứng dụng root .
4. Thêm Angular Material vào module ứng dụng của bạn
Nhập MaterialModule và thêm nó vào mục nhập của bạn. Bạn cũng cần nhập những thứ cần thiết cho hoạt ảnh trong module của bạn . Mô-đun ứng dụng của bạn (ví dụ: app.module.ts ) sẽ trông giống như sau:
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 { } 5. Nhập chủ đề tạo sẵn và các biểu tượng Vật liệu
Có một số chủ đề được tạo sẵn được cài đặt tự động với Angular Material. Chúng cài đặt màu sắc và kiểu dáng cơ bản. Các chủ đề có sẵn là: màu chàm-hồng , deeppurple-hổ phách , màu tím-xanh lá cây và màu hồng-bluegrey .
Để nhập một chủ đề, bạn có thể thêm thông tin như thế này vào file styles.css global của bạn :
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; Bạn cũng có thể có quyền truy cập vào các biểu tượng Material Design và sử dụng các biểu tượng được đặt tên với thành phần <mat-icon> . Để nhập chúng vào dự án của bạn, bạn có thể thêm phần này vào phần đầu của tệp index.html root của dự án:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 6. Angular Material đã sẵn sàng!
Bây giờ nó đã sẵn sàng để bạn bắt đầu sử dụng các thành phần Angular Material có sẵn trong các mẫu của bạn. Dưới đây là ví dụ về một số đánh dấu cho mẫu của một ứng dụng mẫu:
<div> <mat-toolbar color="primary"> <span><mat-icon>mood</mat-icon></span> <span>Yay, Material in Angular 2!</span> <button mat-icon-button [mat-menu-trigger-for]="menu"> <mat-icon>more_vert</mat-icon> </button> </mat-toolbar> <mat-menu x-position="before" #menu="matMenu"> <button mat-menu-item>Option 1</button> <button mat-menu-item>Option 2</button> </mat-menu> <mat-card> <button mat-button>All</button> <button mat-raised-button>Of</button> <button mat-raised-button color="primary">The</button> <button mat-raised-button color="accent">Buttons</button> </mat-card> <span class="done"> <button mat-fab> <mat-icon>check circle</mat-icon> </button> </span> </div> Và ta chỉ thêm CSS sau đây vào global styles.css :
body { margin: 0; font-family: Roboto, sans-serif; } mat-card { max-width: 80%; margin: 2em auto; text-align: center; } mat-toolbar-row { justify-content: space-between; } Và đây là giao diện của ứng dụng mẫu của ta :
Học nhiều hơn nữa
Dưới đây là một số bài đăng khác để giúp bạn bắt đầu:
Tài nguyên & liên kết
- Dự án Angular Material 2: Trang web , Github repo .
- Ứng dụng đơn giản Angular Material 2 này: Bản demo ứng dụng , Github repo .
- This Talk from Kara Erickson: Talk trên Youtube , Github repo .
Các tin liên quan
