###### tags: `107級專題`

# 前端開發工程

## Angular

### Angular Material 介紹
[Learning Angular Material](https://www.youtube.com/watch?v=jUfEn032IL8)

### 在 Angular 專案中加入 Bootstrap CSS framework

[Unit 18 在 Angular 中使用 Bootstrap CSS framework 及對話框](https://hychen39.github.io/angular/2021/03/23/u18_bootstrap_modal_dialog.html)

Ref: [How to Add Bootstrap to an Angular Project](https://medium.com/@yudizsolutions/https-medium-com-yudizsolutions-how-to-add-bootstrap-to-an-angular-project-ab592cd87842)

### 要選擇圖片檔案後, 在 Browser 預覽; 之後再傳到後端

- [Image Upload in Angular with Preview & Progress](https://fiyazhasan.me/angular-file-upload-using-asp-net-core/)

- [Angular Image Upload Made Easy](https://academind.com/tutorials/angular-image-upload-made-easy/)

使用的 BLOB and File API 中的`File` interface, `FileReader` object

[File interface](https://developer.mozilla.org/zh-TW/docs/Web/API/File)

[FileReader object](https://developer.mozilla.org/zh-TW/docs/Web/API/FileReader)

### How to Read Local JSON file in Angular

- [3 Methods for Reading Local JSON Files in Angular 7/8](https://www.techiediaries.com/angular-local-json-files/)
- [How to Read Local JSON file in Angular](https://jsonworld.com/demo/how-to-read-local-json-file-in-angular)

## UI/UX 設計

[使用者介面設計講義 @ 使用者介面設計筆記](http://jinjin.mepopedia.com/~jinjin/ui/ui-01.html)

### 要做 Page Header 上的導覽列 (Bootstrap)

[Bootstrap Navbar](https://getbootstrap.com/docs/5.0/components/navbar/)

### 彈跳式對話框 (Bootstrap)

[Bootstrap Modal](https://getbootstrap.com/docs/5.0/components/modal/)

[Unit 18 在 Angular 中使用 Bootstrap CSS framework 及對話框](https://hychen39.github.io/angular/2021/03/23/u18_bootstrap_modal_dialog.html)

### 圖片輪播 (Bootstrap)

[Bootstrap Carousel](https://getbootstrap.com/docs/5.0/components/carousel/)

### 圖片佔位(placeholder)

[Placeholder.com](https://placeholder.com/)


## Web Javascript

### Browser 讀取本地端檔案

[Read files in JavaScript](https://web.dev/read-files/)

## Bootstrap 4 指令快速參考

[Bootstrap 4 Cheat Sheet @ hackertheme](https://hackerthemes.com/bootstrap-cheatsheet/)

[Bootstrap 4 All Classes List](https://bootstrapcreative.com/resources/bootstrap-4-css-classes-index/)

https://websitesetup.org/bootstrap-cheat-sheet/