Angular背后的指导思想之一就是组件化。
如果我们想教浏览器认识一些新标签，该怎么办呢？比如我们想要一个
这就是组件化背后的基本思想：我们要教浏览器认识一些拥有自定义功能的新标签。
1、创建第一个组件。
写完该组件之后，就能在HTML文档中使用它了，就像这样：
要使用angular-cli来创建新组件，可以使用generate（生成）命令。
要生成hello-world组件，我们需要运行下列命令：
ng generate component hello-world
最基本的组件包括两部分：
(1) Component注解
(2) 组件定义类
2、组件分析
hello-world.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
注意，TypeScript文件的后缀是.ts而不是.js。问题在于浏览器并不知道该如何解释TypeScript文件。为了解决这个问题，ng serve命令会自动把.ts文件编译为.js
文件。
2.1、导入依赖
import语句定义了我们写代码时要用到的那些模块。这里我们导入了两样东西：Component和OnInit。
我们从"@angular/core"模块中导入了组件（importComponent）。"@angular/core"部分告诉程序到哪里查找所需的这些依赖。这个例子中，我们告诉编译器："@angular/core"定义并导出了两个JavaScript/TypeScript对象，名字分别是Component和OnInit。
同样，我们还从这个模块中导入了OnInit（import OnInit）。稍后你就会知道，OnInit能帮我们在组件的初始化阶段运行某些代码。
注意这个import语句的结构是import { things } from wherever格式。我们把{ things }这部分的写法叫作解构。解构是由ES6和TypeScript提供的一项特性。
2.2、Component注解
导入依赖后，我们还要声明该组件。
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
注解其实是让编译器为代码添加功能的途径之一，我们可以把注解看作添加到代码上的元数据。当在HelloWorld类上使用@Component时，就把HelloWorld“装饰”（decorate）成了一个Component。
@Component({
selector: 'app-hello-world'
// ... more here
})
这里的selector属性用来指出该组件将使用哪个DOM元素。如果模板中有
2.3、用 templateUrl添加模板
在这个组件中，我们把templateUrl指定为./helloworld.component.html。这意味着我们将从与该组件同目录的hello-world.component.html文件中加载模板。
hello-world.component.html
hello-world works!
这里定义了一个p标签，其中包含了一些简单的文本。当Angular加载该组件时，就会读取此文件的内容作为组件的模板。
2.4、添加template
我们有两种定义模板的方式：使用@Component对象中的template属性；指定templateUrl属性。
我们可以通过传入template选项来为@Component添加一个模板：
@Component({
selector: 'app-hello-world',
template: `
hello-world works inline!
`
})
注意，我们在反引号中（...）定义了template字符串。这是ES6中的一个新特性（而且很棒），允许使用多行字符串。使用反引号定义多行字符串，可以让我们更轻松地把模板放到代码文件中。
2.5、用 styleUrls添加 CSS 样式
注意styleUrls属性：
styleUrls: ['./hello-world.component.css']
这段代码的意思是，我们要使用hello-world.component.css文件中的CSS作为该组件的样式。Angular使用一项叫作样式封装（style-encapsulation）的技术，它意味着在特定组件中指定的样式只会应用于该组件本身。
注意，该属性与template有个不同点：它接收一个数组型参数。这是因为我们可以为同一个组件加载多个样式表。
2.6、加载组件
我们为HelloWorldComponent配置了app-hello-world选择器，所以要在模板中使用
app.component.html
{{title}}
页面显示如下：
![[angular2 笔记] No.1 制作 Component及分析_第1张图片](http://img.e-com-net.com/image/info10/2055f6b845114090bea73cf44b43fed9.jpg)