Day 11：想要快速产出元件及范本，就用 Angular CLI 吧！（一）

快速产生 Angular 元件

要在 Angular 专案中快速产生元件，首先要先打开 VS Code 的终端机面板，并输入以下指令：

ng generate component page1

前面的 ng generate component 是使用 Angular CLI 产生元件的语法，後面的 page1 则是元件的档案名称。

元件建立完成後，可以看到终端机面板显示了一些资讯，CREATE（建立）了四支档案，及 UPDATE（更新）了一个档案。

如上图所示，新建的四个档案，就是包含在 src/app/page1 这个路径的 page1 元件里，同时更新了 app.module.ts 的内容。

而 page1 元件里的档案简单说明如下：

• 1. page1.component.ts：里头的选取器名称，预设就是 app-page1，而 Component 的 class（类别）名称，预设就叫 Page1Component，同时也可以看到相对应的 HTML Template 及 CSS 档案。
     
• 2. page1.component.html：Page1Component 对应的 HTML 档案，Template 预设的内容十分单纯。
     
• 3. page1.component.css：Page1Component 对应的 CSS 档案，预设内容是空的，针对 page1.component.html 设定的 CSS 样式，可以写在这个档案里。
• 4. page1.component.spec.ts：这是一个单元测试的档案，需要测试时才有机会用到。
     

以上就是一个 Component 被建立起来时，预设会产生的四个档案。

接着，我们来看刚才建立元件时，被修改的 app.module.ts 档案。

Angular Module 的主要功能是用来把这个模组相关的元件，封装在一起，所以我们刚才建立了一个元件，此时就要把元件注册到应用程序最上层的 Module，也就是 AppModule 里面来。

所以你从上图可以看到，Page1Component 已经被自动注册进来了，而 Page1Component 因为负责显示资料，所以预设会被放进 declarations 这个属性底下。

而要汇入 Page1Component 到 Module 里，当然也需要有 import 的语法，这个部分 Angular CLI 也帮我们自动完成了！

其他建立 Angular 元件的方法

我们刚才在终端机面板使用指令建立了 Angular 的元件，然而还有其他做法也可以达成同样目的。

• 简化的指令：我们可以把刚才的指令：

ng generate component page1

简化成如下的指令：

ng g c page1

同样可以建立一个元件，而且需要打的指令更少！

• 使用滑鼠右键：我们可以对着专案中的 app 资料夹点击右键，然後选取选单中的 Angular: Generate a component。
  

此时在画面上方出现一个 input，让你可以输入元件的名称。

接着，我选择 Default component 并按下 enter 键。

再选择 Confirm 并按下 enter 键。

就会建立出跟刚才使用指令结果相同的元件了。

如何删除 Angular 元件

由於 Angular CLI 的强大威力，我们可以很轻易的建立元件，但如果我们出於某些原因，想要删除已建立的元件，又该怎麽做呢？

此时，Angular CLI 就无法帮上忙了，只能自己手动删除，首先我们在要删除的元件资料夹上点击右键，如下图中的 pageDemo，并在选单中选择删除。

确认删除後，pageDemo 的资料夹就会从专案中消失。

我们刚才有提过，使用 Angular CLI 建立元件的时候，除了新增元件相关的档案，也会一并更新 app.module.ts，所以我们还必须到 app.module.ts 里去删掉被移除元件的相关内容，如下图红框处。

因为 AppModule 已经找不到被我们移除的 pageDemo 元件了，所以在画面上，也可以看到红色的错误线条提示，因此，只要把 pageDemo 元件相关的程序码拿掉，就不会再喷错了！

本篇，我们了解到如何建立及删除 Angular 的元件，下一篇我们要把 Angular 元件呈现到画面上~