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

denson 发布于2019-08-20 16:13 / 2300人阅读

摘要：入门系列三组件概述组件是构成应用的基础和核心，它是用来包装特定的功能，应用程序的有序运行依赖于组件之间的协同工作。在早期的模块化工具中，多数只是针对文件部分做了处理，比如，而缺少对，等文件进行管理的工具。组件的详细介绍请见下一章节。。。

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: `
      
          张三
          13800000000
      
  `
})
export class ContactItemComponent {}
    
    以上代母创建了一个最简单的Angular组件，只需要在html中添加自定义标签，Angular便会在此标签中插入组件中指定的模版。
    
    组件的详细介绍请见下一章节。。。

云服务器 GPU云服务器系列三入门系列课程深度学习入门系列课程 spark入门实战系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82793.html

2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

lily_wang 2019-06-27 16:28 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

chengjianhua 2019-08-29 12:35 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

Anonymous1 2019-08-20 16:31 评论0 收藏0
2017年2月份前端资源分享

平日学习接触过的网站积累，以每月的形式发布。2017年以前看这个网址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用扩展JavaScript语法记录 - 掉坑初期工具汉字拼音转换...

dreamtecher 2019-08-01 16:51 评论0 收藏0