[Day24] 第一个 Angular App

好的，今天开始我们就要用牛刀来杀鸡。首先第一件事当然就是先准备牛刀，不过这个牛刀整支都在 npm 上，所以拿牛刀之前我们还需要先装 Node.js。请直接透过传送门下载并安装 Node.js，已经有 Node.js 的话只要是 12.14.x 或 14.15.x 或最新版本就好。

装完 Node.js 之後，我们就可以透过 npm 来装 Angular CLI 了，直接输入 npm 指令
npm install -g @angular/cli

第一次装可能会久一点，装完之後我们就可以使在命令提示字元（command line）使用 Angular 的命令，首先我们来来检查一下版本
ng version

装完之後，我们要来装写 Angular 程序的 IDE，笔者选择 VS Code，因为装完一些扩充功能（Extension）之後，开发体验极佳，而且不只能写 Angular，任何主流语言只要下载对应的扩充套件，全都可以写。请直接开传送门下载安装。

再来就把命令提示字元跳到一个顺眼的资料夹，然後建立一个新的 Angular 专案
cd D:/ironman
ng new ironman-frontend

建立新专案的时候，Angular CLI 会问我们几个问题：

接着，就等 Angular 帮我们把必要的 npm 套件装好，装好之後，让命令提示字元进入刚刚建立的专案资料夹，然後用 VSCode 把 Angular 专案打开。
cd ./ironman-frontend
code .

请注意 VS Code 的指令（code）後面有一个点（.）

接着，我们要让 VS Code 飞起来。在左侧的功能列点一下扩充功能的按钮，然後蒐寻保哥的 Angular Extension Pack。保哥的扩充包整合了非常多好用的功能，是目前写 Angular 最好用的扩充功能整合包，没有之一！

前置作业终於都告一段落了！现在，我们就直接来执行我们的 Angular App 吧！在命令提示字元输入
ng serve -o
让 Angular CLI 帮我们编译并执行我们的 app， -o 参数可以自动打开浏览器并连到我们的 app。

VS Code 按 Ctrl + ` 也能叫出 power shell 或 git bash 命令列，也能在这边操作 ng 指令，但是三不五时就会当掉，所以笔者还是建议另外开一个命令提示字元，专门跑 ng serve

Tada~~~~ 一个预设的 Angular 页面就好了~~~

我们来简单看一下左侧档案浏览器中的 Angular 的专案架构，不过由於 Angular 框架非常完整，本系列文没有办法完整的涵盖所有东西，所以这边只会挑本系列会用到的部分做说明，其他像是单元测试、相依套件（package.json）设定等等，请邦友另外再搜寻更专业的文章来学习。

./node_modules – 我们这个专案所依赖的 npm 模组们
./src/app – 自动产生的主页模组，里面包含这个模组必须的档案，将来我们也会在这个资料夹里面建立新的元件（component）
- app.module.ts – 主页模组的类别，管理模组的 import, export
- app-routing.module.ts – app.module.ts 的路由模组，管理 app.module.ts 的路由
- app.component.html – 主页元件（component）的 HTML 骨架
- app.component.ts – 主页元件的逻辑处理
- app. component.css – 主页元件的 css
  （此时我们的模组只有一个 "app"元件（component），我们将在明天介绍 Angular 的元件）
./src/index.html – Angular App 的「实体」档案。Angular App 只会有一个简单的 index.html 实体，之後全部用编译好的 JavaScript 操作 DOM 物件来完成整个网页的运作。
./src/style.css 全域的 css 档案

今天结束之前，笔者来分享几个非常实用的 VS Code 快捷键（有些需要安装保哥的 Extension Pack）

明天，我们会继续介绍 Angular 的 Module 与 Component