Angular2入门系列(三)————组件

发布时间:2019-07-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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便会在此标签中插入组件中指定的模版。
    
    组件的详细介绍请见下一章节。。。

脚本宝典总结

以上是脚本宝典为你收集整理的Angular2入门系列(三)————组件全部内容,希望文章能够帮你解决Angular2入门系列(三)————组件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。