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便会在此标签中插入组件中指定的模版。
    
    组件的详细介绍请见下一章节。。。
    原文作者:白狼巡抚
    原文地址: https://segmentfault.com/a/1190000009256786
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞