# Web企業運算_Week7_許家維
## 學習清單
* Angular 工具與環境建置練習
* 期中個人履歷網站使用技術
* Grid / Flex
* Jquery smooth scrolling
* Skrollr.js in Parallax Scrolling
* 文字 : google font
* icon : font-awesome
* media query for rwd
* 技術文章 : https://ithelp.ithome.com.tw/users/20090728/ironman/1600
* 本篇連結 : https://hackmd.io/lKXj9tzhTZiHcOs0e1juMA?both
## Code
* 利用臺北市政府資料開放平台的臺北捷運列車到站站名資料
* 資料處理後格式，新增一個名為 station-list.const.ts 的檔案，然後在裡面加上以下程式碼
```
export const stationList = [
{
'Station' : '三重國小站',
'Destination' : '南勢角站',
'UpdateTime' : '2018-10-15T22:14:41.557'
},
{
'Station' : '士林站',
'Destination' : '大安站',
'UpdateTime' : '2018-10-15T22:14:35.497'
},
{
'Station' : '士林站',
'Destination' : '淡水站',
'UpdateTime' : '2018-10-15T22:14:25.34'
},
{
'Station' : '大安森林公園站',
'Destination' : '大安站',
'UpdateTime' : '2018-10-15T22:14:25.34'
},
{
'Station' : '大坪林站',
'Destination' : '松山站',
'UpdateTime' : '2018-10-15T22:14:52.737'
}
];
```
* ```import { stationList } from './station-list.const';``` : 在app-component.ts 中，import 此檔案資料
* 將此資料改名為list供後續使用
```
export class AppComponent {
list = stationList;
}
```
* HTML 設置
```
<table>
<thead>
<tr>
<th></th>
<th>列車進入月台車站之站名</th>
<th>行駛目的地</th>
<th>資料更新日期</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of list;index as i">
<td>{{i+1}}</td>
<td>{{ item.Station }}</td>
<td>{{ item.Destination }}</td>
<td>{{ item.UpdateTime }}</td>
</tr>
</tbody>
</table>
```
* 成果圖
## 成果
* 使用Angular前，必須先安裝Node.js
* P.S 這裡要注意Node與Angular的版本相容性，否則會無法使用Angular喔!
* 於終端機輸入 ```node -v``` 可找到自己目前的Node版本
* 安裝 Angular CLI : ```npm install -g @angular/cli```
* Angular CLI : Angular 的命令列工具
* ```ng new ng-app``` : 建立一資料夾ng-app並安裝angular內檔案
* 中間會要你選擇使用哪種類的css預處理器(css,sass..etc)，若使用css直接按enter即可
* ```cd ng-app``` : 移動到此資料夾內
* ```ng serve --open``` : 此時，系統會
1. 啟動本地端的 Web-Server，令我們能夠在 localhost:4200 上看到我們的頁面。
1. 將我們目前所開發的程式碼（已儲存的）編譯、打包後，讓 localhost:4200 載入
1. 當我們儲存我們的程式碼之後，會自動重複 2. 所敘述之事項，並自動令瀏覽器重新載入，不用我們自己手動刷新。
2. ```--open``` : 瀏覽器會自動開啟頁面，若沒有輸入此參數必須手動打開
3. ```--port``` : 改變port，預設為4200
* 開啟完成嚕!
### **Angular 檔案結構說明**
* **.editorconfig** - 幫助開發人員在不同的編輯器和 IDE 之間更容易定義與維護一致的編碼樣式。
* **.git** - Git 版本控制用的資料夾。
* **.gitignore** - Git 版本控制用的忽略設定檔。
* **angular.json** - Angular CLI 的設定檔。
* **node_modules/** - 此專案所有依賴的套件經由使用 npm install 安裝後，都會擺放到這裡。
* **package-lock.json** - 這個檔案是當我們使用 npm install 安裝套件時所產生的文件，用以記錄當前實際安裝的套件的來源與版號。
* **package.json** - 這個檔案是用來定義我們這一包東西是什麼的說明文件，
* **README.md** - 這個檔案是這個專案的說明文件，採用 Markdown 的語法。
* **src/** - 主要在開發的所有程式碼都會放在這裡。
* **tsconfig.json** - 這個檔案是 TypeScript 編譯時看的編譯設定檔。
* **tslint.json** - 這個檔案是 TSLint 的設定檔。TSLint 是 TypeScript 的格式驗證工具，它可以檢查你寫出來的 TypeScript 的格式是不是具有可讀性、可維護性和功能性錯誤。
### **/src 重要結構說明**
* **app/** - 整個網頁應用程式的 Module、Component、Service 等等都放在這。
* **assets/** - 靜態資源放置處，如圖片。
* **browserslist** - 檔案內其實有說明，大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴，**如果要支援 IE 9-11，記得要取消此檔案最後一行的註解**。
* **environments/** - 環境變數設定檔放置處。
* **favicon.ico** - 瀏覽器的網址列、書籤、頁籤上都會用到的小 icon 圖檔。
* **index.html** - 整個網頁應用程式的首頁與根頁面，也是 SPA 唯一的那一頁。
* **karma.conf.js** - Karma 的設定檔。Karma 是一套單元測試工具。
* **main.ts** - Angular CLI 在編譯與打包的時候，把這支檔案裡的程式，當做整個網頁應用程式的主要程式進入點。一般也是不會去動到這裡的程式碼。
* **polyfills.ts** - 載入 Angular 的程式之前，會預先載入的程式。裡面也有一些是如果需要支援較低版本的瀏覽器時，需要取消註解的程式。
* **styles.css** - 整個網頁應用程式共用的樣式設定檔。
### **Angular 基礎元件**
* ```{{}}``` : 插值表達式，將要綁定的資料變數放在 {{ }} 裡面，Angular 就知道在這裡要將變數裡的資料放進去。
* ```*ngFor``` : Angular的語法糖，遍歷並顯示出陣列內的所有元素
* ```*ngIf``` : Angular的語法糖，若符合條件即顯示出
## 心得
本周初步探討了Angular的環境建置與基本的ngIf、ngFor等用法。
Angular是一門基礎學習曲線較高的程式，由於之前有略為接觸Vue的基本用法、資料綁定等等。目前教到的部分還能夠掌握。
這次因為期中作業的緣故，尚未把整個Angular的操作文件看過一次，接下來我會利用瑣碎時間，快速地瀏覽過Angular的官方文件。
近期由於在找實習，發現Angular、React等常常出現在需求或加分部分，所以我知道這個部分必須好好下工夫，至少要有個基本概念。
關於期中的個人履歷網站，除了完全使用Grid + Flex切版外，我也加入了以前學過的一些概念，像是jquery的smooth scrolling、利用skrollr.js實現基本的視差滾動等等。以前上課總是照著老師做，這次我把以前的所學盡量融合進專案中，不僅能夠重新複習一次，更能加深自己的熟悉度，讓自己越寫越順手。
Sign in with Wallet
Connect another wallet