Angular Material簡介(一)

 

Angular Material簡介(一)

 

大綱：

Ø   介紹

Ø   基本門檻

Ø   Material Design

Ø   環境安裝

Ø   Hello World！

 

Ø   介紹

Angular Material 是 Angular 的官方套件，涵蓋包括表格、日曆、選單在內的大量常用套件件。質量更是沒話說，用官方開發組的話就是：

 

Our goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

 

我們的目標是構建一組基於 Angular 和 TypeScript 的高質量 UI 套件，它會遵循 Material Design 規範。這些組件還示範了如何遵循最佳實踐來編寫 Angular 代碼。

 

What do we mean by "high-quality"?

“高質量” 是什麼意思？

 

Internationalized and accessible so that all users can use them.

支持國際化和可訪問性，以便所有用戶（包括殘疾人）都能使用它們。

 

Straightforward APIs that don't confuse developers.

簡明的 API，不讓開發人員困惑。

 

Behave as expected across a wide variety of use-cases without bugs.

在很多不同的用例下都能如預期般工作，不出 BUG。

 

Behavior is well-tested with both unit and integration tests.

用單元測試和集成測試保證其行為是已測試的。

 

Customizable within the bounds of the Material Design specification.

在 Material Design 規範的框架內進行定製。

 

Performance cost is minimized.

儘可能減小性能開銷。

 

Code is clean and well-documented to serve as an example for Angular devs.

代碼乾淨、文檔齊全，給 Angular 開發者們提供一個樣板。

 

Ø   基本門檻

n   了解Angular的MVVM架構

n   能使用Angular CLI建立專案並開發

n   知道如何建立、設計、共用一個component

n   理解IOC & DIC(控制反轉 & 依賴注入)

n   懂得模組化&OOP(物件化導向程式設計)

n   能設定 router 完成 SPA 程式

 

Ø   Material Design

Google 推出 Material Design, 想要為用戶創造視覺語言，讓用戶能夠習慣 + 一眼就懂的操作、使用模式.(統一使用者的體驗)

目標：創造一種視覺語言，遵循創新技術和科學的可能性，組合出良好設計的經典原則。

註：簡單說，就是 Android 或 Mobile web 製作上，建議都要使用這套標準，使用者才能夠一看就懂.

 

Ø   環境安裝

1.    開啟cmd

2.    建立工作資料夾

u  md AngularMaterial_TPU

3.    進入工作資料夾

u  cd AngularMaterial_TPU

4.    建立專案

u  ng new EagleWeb --routing --style=scss

5.    進入專案目錄

u  Cd EagleWeb

6.    安裝 @angular/material 和 @angular/cdk

u  npm install --save @angular/material @angular/cdk

7.    安裝 @angular/animations

如果希望能在頁面上看到這些動畫效果，需要安裝 @angular/animations

u  npm install --save @angular/animations

8.    開啟Visulal Studio Code，並開啟EagleWeb這個專案，然後找到AppModule。然後在 imports 裡面加入 BrowserAnimationsModule。

雖然動畫效果會讓畫面更加豐富，但也有可能會有效能問題，且不是每個人都喜歡那麼多的特效，想要取消特效的話，可以改加入 NoopAnimationsModule。

 

9.    關於 @angular/animations 的支援度

@angular/animations 使用了 WebAnimation API，但不是所有瀏覽器都有支援，如果你希望盡可能讓所有瀏覽器都支援，可以安裝 web-animations.js 套件。

  u  npm install --save web-animations-js 

接著打開 src/pollyills.ts 檔案，找到 import 'web-animations-js' 這一行，並且把它取消註解掉，如果找不到這一行，也可以直接手動加入就好。

10.  加入 theme 設定

Angular Material 包含了 4 種內建的樣式，在 @angular/material/prebuilt-themes/，可以找到這 4 個 css 檔。

把這個 theme 的 css 加到 styles.css 中。(任選一個)

11.  手勢支援

如果是要開發支援行動裝置的網頁，就需要在程式中載入 HammerJS。

u  npm install --save hammerjs

安裝完 HammerJS 後，還需要在程式中載入，我們可以直接在程式的進入點 src/main.ts 中加入

import 'hammerjs';

 

12.  加入 Material Icons

最簡單的方式，就是直接在 index.html 中加入相關 Icon Font 的 CDN：

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

 

13.  匯入想要顯示的元件模組

在要使用的 Module 中匯入 MatXXXModule

Ex:匯入 button

 

Ø   Hello World！

環境弄完後，來寫一個基本的Hello World！ 頁面吧。
開啟app.component.html，寫下

但我們用的是Angular Material，所以再寫下

然後在cmd，輸入：

1.    ng server

開啟瀏覽器(建議使用Chrome)來看看二者的長相

Angular的預設網址為http://localhost:4200

按下【Hello World by Angular Material！】會有灰底的特效。

 

      現在弄完了環境，也寫了第一個Hello World！ 頁面，後續會再介紹其他套件。