第 2 天诸神早安晨之美｜建立 Angular 专案、使用 JSON-server

今天我们将建构专案开发环境，除了 Angular 之外，我们也将在专案中配置 json-server 这个套件，来模拟与後台的互动。

004

哈罗大闲人，你在忙吗？大闲人？

（你好像认为我们现在很闲，都在玩？死老百姓就是不懂我们的辛苦啊...）

那你突然消失一晚上是怎麽了？我不是要展开 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 键连发），包含：

Would you like to add Angular routing? No // 是否要配置路由机制，这里我们之後会手动配置。
Which stylesheet format would you like to use? CSS // 基本上我们不会写样式，怎麽选都可以。

此时，如果进入资料夹，输入 ng serve 指令，就可以在本机上运行这个专案，目前看到画面会是这样：

使用 JSON-server

现在我们将在 Angular 专案中使用 JSON-server 来模拟与後端的互动行为（增删改查资料）。

让我们进入专案目录并且安装 JSON-server：

npm install json-server --save

到 src 资料夹下新增 proxy.config.json 档案：

{
    "/api": {
        "target": "http://localhost:3000/",
        "secure": false,
        "changeOrigin": true,
        "pathRewrite": { "^/api" : "" }
    }
}

将其配置到 angular.json 档案中（新增"proxyConfig"）：

"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"
},

配置 package.json 中的 scripts 指令 "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 专案。