今天我們將建構專案開發環境,除了 Angular 之外,我們也將在專案中配置 json-server 這個套件,來模擬與後台的互動。
哈囉大閒人,妳在忙嗎?大閒人?
(你好像認為我們現在很閒,都在玩?死老百姓就是不懂我們的辛苦啊...)
那妳突然消失一晚上是怎麼了?我不是要展開 Angular 英雄之旅了嗎?
(所以我才到處去搜集英靈,看來有必要讓你知道,你現在的一舉一動都關係著人類存亡的命運。)
我是不太想吐槽啦,但我先確認一下,我不是只是在睡覺而已嗎?
(答!不是!附帶一問,你以為真的有人可以睡一星期不吃不喝嗎?)
聽著都不太合理,所以...我死了嗎?
(沒有。但如果這次的行動你失敗了,那全人類就滅亡了。)
這個聽著也不太合理,但畢竟我都可以睡這麼久了,人類滅亡好像也是有可能的,妳要不展開說說吧。
(每千年諸神就會召開一次人類滅亡會議...)
等等,妳不會是要說,如果諸神覺得人類太廢又邪惡就要滅亡人類吧。
(就是這樣喵。但現在,我們已經發動了諸神早安,所以會議目前暫時中止了。諸神早安是人與神一對一單挑,如果在 13 場對決中,人類取得了 7 勝,那就可以繼續存活千年。)
嗯...我是已經猜到妳找了哪些人類啦,但妳幹嘛來找我,我姓湯不姓葉...十個也打不了一個啊。
(答!除了人類英靈要對付神明之外,我們還需要工程師來打造英靈殿,強化英靈,否則現在的人類是不可能擊敗神的。)
這倒是挺合理的啦,但為什麼是找我,太奇怪了吧。
(因為我們也要證明:人類不是廢物。只要有心,人類也可以對神有幫助。你,是個廢物。)
這也是挺合理...等等,我現在龜懶趴火。
(少年啊——成為神話吧!)
我的腳怎麼不由自主地跑起來了,這個響起來的主題曲是怎麼回事啊~~~
〈所有動畫片頭會用到的梗〉Youtube 影片連結
首先,請參考保哥的〈Angular 12 開發環境說明〉,不論作業系統是 Windows 或 Mac OS X,這篇文章都手把手地帶我們完整地配置開發環境,當然也包括了 Angular CLI。
在編輯器方面,我選擇使用 Visual Studio Code,並強烈推薦安裝保哥的 Angular Extension Pack,能夠有效地幫助 Angular 專案的開發。
在想要生成專案資料夾的路徑下,使用 ng new { projectName }
就可以新增 { projectName } 專案資料夾:
ng new angular-tour-of-heroes
它會詢問你想要的配置,可以隨喜好選擇,我這邊是直接選擇預設值(Enter 鍵連發),包含:
此時,如果進入資料夾,輸入 ng serve
指令,就可以在本機上運行這個專案,目前看到畫面會是這樣:
現在我們將在 Angular 專案中使用 JSON-server 來模擬與後端的互動行為(增刪改查資料)。
npm install json-server --save
{
"/api": {
"target": "http://localhost:3000/",
"secure": false,
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
}
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angular-tour-of-heroes:build:production"
},
"development": {
"browserTarget": "angular-tour-of-heroes:build:development",
"proxyConfig": "src/proxy.config.json"
}
},
"defaultConfiguration": "development"
},
"api"
:"scripts": {
"ng": "ng",
"start": "ng serve",
(前略)
"api": "json-server db.json --no-core=true --watch db.json"
},
npm run api
就會產生 db.json 檔案,這就是用來儲存 mock 資料的地方,之後我們都是對它進行增刪改查。當自動產生這個檔案時,裡面預設會有下列資料:{
"posts": [
{
"id": 1,
"title": "json-server",
"author": "typicode"
}
],
"comments": [
{
"id": 1,
"body": "some comment",
"postId": 1
}
],
"profile": {
"name": "typicode"
}
}
將這些資料刪掉後,換成下面這樣:
{
"heros": [
{
"id": 1,
"name": "呂布奉先"
},
{
"id": 2,
"name": "亞當"
},
{
"id": 3,
"name": "佐佐木小次郎"
},
{
"id": 4,
"name": "開膛手傑克"
},
{
"id": 5,
"name": "雷電為右衛門"
},
{
"id": 6,
"name": "始皇帝"
},
{
"id": 7,
"name": "列奧尼達王"
},
{
"id": 8,
"name": "尼古拉·特斯拉"
},
{
"id": 9,
"name": "沖田總司"
},
{
"id": 10,
"name": "格里戈里·拉斯普丁"
},
{
"id": 11,
"name": "米歇爾·諾斯特拉達穆斯"
},
{
"id": 12,
"name": "席摩·海赫"
},
{
"id": 13,
"name": "坂田金時"
}
]
}
這樣,弒神 13 人就隨時供我們驅策啦。別問這個名單怎麼開出來的,很可怕。
現在我們的 Angular 專案環境已建立起來並加上模擬的後台了,日後起專案時就要開兩個 terminal,一個輸入 npm run api
來跑 mock db,另外一個就是 ng serve
來跑 Angular 專案。