angular json-server angular material

如何開始我的第一個angular應用程式(一) - 介紹angular及相關套件的使用

邱祈竣 2019/12/05 12:54:24
141

在學習時總會覺得找到的文章或教學太過精細,雖然學得很多但不知道該怎麼串在一起。

因此本文章將從介紹angular及相關套件的使用開始,一步一步的說明如何用angular實作一個簡單的購物車頁面。並在完成後用augury分析元件狀態及方法。以此分享自己在學習angular上的一些心得。

 

 

1.  使用套件

           使用套件說明

在實際的使用場景中,angular接收server傳來的API資料並進行處理後顯現在瀏覽器上。並添加UI元件與使用者互動。

為了模擬這個情況,將使用json-server發送APIangular使用Angular Material美化頁面。

 

2.  Angular

2.1   Angular有何不同

l   採用 TypeScript 以物件導向開發網頁應用程式,幫助Java 開發人員快速上手。

l   元件模組化架構,能夠更快理解程式碼結構,降低維護成本。

l   清晰的專案架構與可維護性。

2.2   Angular架構

         

Angular 是一個用 HTML TypeScript 建構客戶端應用的平台與框架。它將核心功能和可選功能作為一組 TypeScript Library進行實現。

l   Metadata:會告訴angular這是一個組件或指令。

l   Components: angular最主要的部份,整個angular都是由Component組成

l   Binding: 管理改變畫面的變化,使用binding的方法,angular會檢查數據如果變了,就會針對綁定的部份做變化。當Template接受到事件時就會呼叫componentcomponent執行完畢後會再回傳給Template

l   Modules: Component的集合,最主要的用途就是把這個Module會用到的元件都封裝在一起。

l   Directives: 分為結構指令或屬性指令。結構型指令修改dom的結構、屬性型指令改變一個元素的外觀或行為。

l   Services: 實作一些共用的功能。

                 

換個角度說

1. 當要對某個部分的畫面進行變動時,只要找到component對該頁面的CSSJSHTML改變即可。

2. 當要對DOM進行操作時就加入Directives

3. 若是重複的事情很多就放在serviceComponent共用。

2.3   安裝

2.3.1 安裝angular cli

開啟終端/控制台視窗,輸入指令npm install -g @angular/cli

Angular cli是一個命令列介面工具,可用於產生Angular的檔案範本。

2.3.2  建立angular project

執行 CLI 指令 ng new 並提供名稱作為參數:ng new anuglarDemo

該指令會提示要把哪些屬性包含在初始應用中。(如下圖)

                

2.3.3 啟動

輸入cd tpDemo 切換至剛剛建立好的angular project,輸入指令:ng serve

啟動angular後即可在localhost:4200看到預設的起始頁面。

          

 

Angular專案新增完成後可以看到以下目錄,

主要的檔案及資料夾為appangular.jsonpackage.json

 

2.3.4 備註

使用指令

備註

項次

功能

指令

1

安裝angular cli

npm install -g @angular/cli

 

2

建立angular專案

ng new angularDemo

ng new (專案名稱)

 

3

啟動angular專案

ng serve

 

 

 

3.  json-server

3.1   簡介

套板時總是會遇到後端還未開發好API,使得前端無法取得資料。此時json-server可以模擬restful api傳出資料給anuglar,讓angular可以模擬取得的資料需要進行的操作。

json-server提供HTTP Method供大家使用,如GETPOSTPUTPATCHDELETEOPTIONS

3.2   安裝json-server

指令 npm i -g json-server

3.3   啟動

指令 json-server --watch db.json

--watch代表監聽 db.json

若找不到該檔案,json-server會直接協助建立db.json

如果要把模擬的檔案另外放置,也可以載入外部json的資料。

指令 json-server http://test/db

 

3.4   備註

使用指令

備註

項次

功能

指令

1

安裝json-server

npm i -g json-server

 

2

啟動json-server

json-server --watch db.json

 

3

載入外部來源

json-server http://test/db

 

可添加參數

 

4

--watch

監聽db.json變化

 

5

--delay 500

模擬較慢的回應時間

延遲500ms

6

--ro

僅提供get方法

 

7

--id name

變更預設”id”的名稱

 

8

--routes

網址路由

 

 

 

4. Angular Material

4.1   關於Material Design

Material Design是由Google推出的設計標準,讓使用者從元件的配色、陰影到特效都有一定的規則可循,透過這些標準設計出清楚明確且容易使用的元件。

4.2  關於Angular Material

由於Material Design只是一種設計的規則並未進行實作。因此Google為自家的angular推出了一套使用AngularTypeScript並符合material Design標準的UI元件

4.3 安裝

指令ng add @angular/material

執行後會提示選擇樣式、是否增加HammerJS(手勢支援)及動畫效果。

                

4.4 測試

moduleimport組件告知angular,之後就可在html內使用material標籤

                

重新啟動angular後就可看到新增加的slider

                

                  完成以上的安裝之後就可以準備開始進行購物車的實作了。

4.5   備註

使用指令

備註

項次

功能

指令

1

安裝Angular Material

ng add @angular/material

 

 

5.  備註

5.1   參考資源

名稱

位址

備註

The Will Will Web

https://blog.miniasp.com/

 

Json-server

https://github.com/typicode/json-server

 

初探 JSON Server

https://tpu.thinkpower.com.tw/tpu/articleDetails/1327

 

Angular Material

https://material.angular.io/

 

 

 

 

 

 

5.2   範例檔案

名稱

bitbucket位址

備註

範例程式

https://ElonChiu@bitbucket.org/ElonChiu/tpangulardemo.git

 

 

邱祈竣