讲完前面几张比较偏向原理与不常使用到的章节後，从这章节开始会介绍比较实际运用的东西。

就像在 Day1 所提到的，Angular app 是由无数个大大小小的 Component 所组合而成的，也可以说 Angular app 的基本单位就是 Component，所以 Component 在 Angular 中是非常重要的观念，每个 Component 都包含着：

• 一个 HTML Template，用於将 Component 的内容显示在 UI 上。
• 一个 TypeScript 的 Class
• 一个 selector，用於定义这个 Component 如何在别的 Component 中被使用。
• 一个 CSS style 的档案，用於决定这个 Component 在 UI 上呈现的样式。

Create a component

在介绍什麽是 Component 之前，最重要的就是先创建一个 Component 出来，最简单的方法就是使用 Angular CLI 来自动创建，当然你也可以手动新增档案然後把所有需要的讯息补上（很麻烦的...）。

要自动化创造一个新的 Component，首先要在终端机中输入 Angular CLI Command

ng generate component <component-name>
ng g c <component-name>

在默认情况下，会自动创建出：

• 以 component-name 所命名的资料夹
• 一个 component file, .component.ts
• 一个 HTML Template file, .component.html
• 一个 CSS file, .component.css
• 一个测试规范文件, .component.spec.ts

Specifying a component's CSS selector

每一个 Component 都需要一个 CSS Selector，这个 selector 会让 Angular 知道他应该要在哪里找到讯息并将他实例化，简单来说可以把它当成这个 Component 在 Angular 的身份证号码，当 Angular 在 HTML 中发现这个身份证号码後，他就会知道该去哪里把这个 Component 给实例化。

举个例子，如果今天有一个 component 叫做 hello-world.component.ts，他的 selector 叫 app-hello-world，所以每当 Angular 在任何一个 HTML Template 中出现时，他就知道要去把 hello-world.component.ts 这个 Component 给实例化。

@Component({
  selector: 'app-hello-world',
})

Defining a component's template

在了解 Angular 是如何透过 selector 找到对应的 Component 并将他实例化後，接下来介绍的是

Template，他其实就是一个 HTML，它告诉 Angular 要把这个 Component 如何呈现在 UI 上，可以通过两种方法定义 Template，第一种是引用外部文件，第二种是直接将你的 HTML 写在 Component 中。

• 引用外部文件

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
})

• 直接写 HTML 在 Component 中

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello World!</h1>',
})

除了使用 ( ' ' ) 包裹着 HTML Tag 之外，也可以使用反引号 ( ` ) 一次输入多个 Tag

@Component({
  selector: 'app-hello-world',
  template: `
		<h1>Hello World!</h1>
		<p>This template definition spans multiple lines.</p>
	`,
})

两种方法都可以设定你的 HTML Template，但是要注意，如果使用外部文件的话是使用 templateUrl，而直接填入 HTML Tag 则是使用 template。

Declaring a component's styles

有了身份证号码有了画面接下来就要让画面多一点美感，这时候就需要使用 CSS 来美化我们的 UI，和 Template 一样可以透过两种方式声明 CSS，第一是引用外部文件，第二是直接写在 Component 中。

• 引用外部文件

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
	styleUrls: [ './hello-world.component.css' ]
})

• 直接写在 Component 中

@Component({
  selector: 'app-hello-world',
  template: '<h1>Hello World!</h1>',
	styles: [ 'h1 { font-weight: normal; }' ]
})

Style 与 Template 一样，如果是引用外部文件是使用 styleUrls，而直接写在 Component 中是使用 styles 。

结论

本章节比较轻松一点，介绍了如何创建一个新的 Component，并了解一个 component 是由哪些元素组成，并且这些元素是代表什麽，下一篇我们会介绍 Component 的 Lifecycle，是在开发 Angular App 中非常常使用到的观念，那我们就下篇再见吧。

Reference

• Angular.io