[Day25] Angular 的 Module 与 Component

昨天我们建立了一个新的 Angular 专案，然後跑了一下内建的范例程序，今天我们要来动手加入一些自己的东西。

Angular 的模组化框架

在加入之前，我们先来聊聊 Angular 的模组化结构，以下节录 Angular 官网的说明

Angular 应用是模组化的，它拥有自己的模组化系统，称作 NgModule。 一个 NgModule 就是一个容器，用於存放一些内聚的程序码块，这些程序码块专注於某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些元件、服务提供者或其它程序码档案，其作用域由包含它们的 NgModule 定义。 它还可以汇入一些由其它模组中汇出的功能，并汇出一些指定的功能供其它 NgModule 使用。

唔...官方的文件总是定义严谨，笔者自己觉得没有很好读，这边提供一个自己的理解给邦友们参考：Angular 的模组叫做 NgModule，里面包含了一些功能相关的程序，而且我们可以在这个 NgModule 中引用别的 NgModule 替我们做事，也可以把我们的 NgModule 汇出让人使用。以 .NET 的架构来类比，有点（真的只是有点）像是 namespace。

上面提到的「一些功能相关的程序」，通常指三种 Angular 最常用的类别（class）

• Component（元件）- 构成我们页面的基本单位，我们会把复杂的页面拆分成多个 Component，再像组积木一样用 Component 组合成完整的页面。
• Pipe（管道）- 用来转换资料格式，例如把物件用 json 格式输出、变换大小写等等。
• Directive（指令）- 用来给 DOM 物件添加特殊的属性或动态改变 HTML 结构

虽然我们可以自由的建立自己的 Component、Pipe 与 Directive，但是因为篇幅的关系，本系列只会介绍如何建立自订的 Component，Pipe 与 Directive 则只会使用 Angular 内建的。

Angular Module, NgModule

每一个 Angular app 都至少要有一个「根模组（root module）」，通常就是 app.module.ts，我们的 app 会以此为基点，从这边长出各个 component 然後组成我们的页面。现在，我们先来看一下自动产生的 app.module.ts，这个档案共分三个部分

• Imports 最上面的部分，就是我们
• @NgModule() 装饰器（decorator）用来跟 Angular 说这个 class 是一个 NgModule，请用 NgModule 的方式来对待这个 class。这个装饰器中有几个属性：
  • declarations – 这个模组中宣告、实作的类别。这里的 AppComponent 就是我们的主页 Component，Day24 跑出来的页面就是它。
  • import – 从这边引用别的模组到我们的 app，BrowserModule 帮我们处理跟浏览器有关的事物，AppRoutingModule 帮我们处理这个 app 的路由规则，以及如何从路由选出 Component 来使用。
  • providers – 把我们 app 所需的依赖放在这边，让 Angular 帮我们注入
  • bootstrap – 启动类别，目前就是我们的 AppComponent
• export class AppModule 汇出我们的 module，这样别人才能引用我们正在做的模组

Angular Component

一个 NgModule 中可以包含一个或多个 Component，我们的模组可以根据路由或者 HTML 上的标签决定要使用那些 Component 来构成页面。

一个 Angular Component 会包含四个主要的「元素」（「元件」这个词被官方抢走实在好麻烦QQ）

• component.html – 架构这个 Component 页面骨干的 HTML
• component.ts – 负责这个 Component 逻辑处理，使用 TypeScript 撰写程序。
• component.spec.ts – Component 的测试规格，本系列不会涉及测试，所以这个档案可以忽略或删除
• component.css – 专属这个 Component 的 CSS style 档案

我们直接来看看自动产生的 src/app/ 资料夹下有关 AppComponent Component 的档案

• app.component.html – 目前是一大堆的 css + 静态 html，用简单暴力的方法呈现我们的页面。里面只有一行 <router-outlet></router-outlet> 比较需要注意，这一对标签指示 Angular 在这里嵌入被路由（routing）选中的 Component，目前我们还没加入路由，暂时先把东西都塞在 AppComponent，过几天再来介绍 Angular 的路由。
• app.component.ts – class 里面目前只有一行程序设定这个 Component 的 title，将来我们的处理逻辑会写在这个 class 里。目前比较需要注意的是 @Component() 装饰器告诉 Angular 这个 class 是一个 Component，而这个装饰器里有三个属性：
  • selector – 我们在其他 Component 的 HTML 档中如何用标签选中这个 Component 并渲染。
  • templateUrl - 要到哪里去找 HTML 档案，预设是同个资料夹中的 "元件名称.component.html"
  • styleUrls - 要到哪里去找专属这个 Component 的 CSS 档案，预设是同个资料夹中的 "元件名称.component.css"
• app.component.css - 专属这个 Component 的 CSS 档案，其实可以把 app.component.html 里的 CSS 搬到这边。

我们的 AppComponent 的 selector 预设是 "app-root"。index.html 的 body中只有一行 ，而这一行匹配到 AppComponent 的 selector，所以 Angular 就会把 AppComponent 渲染到 index.html 中。

建立一个新的 Component

现在，我们就来建立一个新的 Component 吧。建立 Component 要使用 Angular CLI 指令
ng g c Component名称 # g = generate, c = component

不过，如果我们有装保哥的扩充包就更简单了，直接在 VS Code 左侧的档案浏览器，对 src/app 资料夹点右键，选 Angular: Generate a component，然後根据跳出来的选项做选择就好了

接着我们来测试一下，到 app.component.html 里，在 main div 之内、 highlight card 之前，根据我们 Component 的 selector 插入标签

然後在命令提示自元输入 ng serve -o 再次编译并执行我们的程序，就能看到我们的 Component 被渲染到主页中了！（虽然他只有一行字XD）

现在我们只有一个自订 Component ，而且只有一行字，明天，我们将要替我们的 Component 添加一些元素，并介绍 Angular 的系结（binding）功能。