Angular2入门系列（三）————组件

Angular2入门系列（三）————组件

1. 概述

组件（component）是构成Angular应用的基础和核心，它是用来包装特定的功能，应用程序的有序运行依赖于组件之间的协同工作。

2. 模块化介绍

在node.js中，模块就是一个文件，引入一个文件就是简单地通过requir('filePath')引入，其中filePath是文件名称或路径。在Angular2项目中我们没有采用这种规范，我们使用es6提供的引入模块的方式，这和node.js比较相似，通过import {someClassName} from 'filePath'这种方式来引入一个模块。
在早期的模块化工具中，多数只是针对javascript文件 部分做了处理，比如requirJs，而缺少对css，html等文件进行管理的工具。后来逐渐形成按模块划分的概念，对比传统的按资源目录划分，从逻辑的意义上来说似乎更加合理，让模块更为独立，方便维护。
按资源划分
|———————project
|  |————————css
|  |————————js
|  |————————images
|  |————————template
|  |————————index.html

按模块划分
|————————project
|  |————————shop
|  |  |————————shop.component.js
|  |  |————————shop.html
|  |  |————————shop.css
|  |————————user
|  |  |————————user.component.js
|  |  |————————user.html
|  |  |————————user.css
|  |————————index.html

通过将.js .css .html 文件按逻辑模块划分后，使得逻辑结构更加清晰，这样逐步便形成了组件的概念。我们可以这样理解，前端中的组件就是一堆为了实现同一业务逻辑的代码文件的组合。

3. Angular组件

学习Angular的组件，首先要知道怎么创建它。创建组件很简单，Angular提供了最方便的办法。创建Angular组件可以通过以下三个步骤：
1.从@angular/core中引入component装饰器。
2.建立一个普通的类，并用@Component装饰它。
3.在@Component中，设置selector自定义标签和template模版。

import { Component } from '@angular/core';

@Component({
  selector: 'contact-item',
  template: `
      <div>
          <p>张三</p>
          <p>13800000000</p>
      </div>
  `
})
export class ContactItemComponent {}
    
    以上代母创建了一个最简单的Angular组件，只需要在html中添加<contact-item>自定义标签，Angular便会在此标签中插入组件中指定的模版。
    
    组件的详细介绍请见下一章节。。。

猜你喜欢