資訊專(zhuān)欄INFORMATION COLUMN
摘要：入門(mén)系列三組件概述組件是構(gòu)成應(yīng)用的基礎(chǔ)和核心，它是用來(lái)包裝特定的功能，應(yīng)用程序的有序運(yùn)行依賴(lài)于組件之間的協(xié)同工作。在早期的模塊化工具中，多數(shù)只是針對(duì)文件部分做了處理，比如，而缺少對(duì)，等文件進(jìn)行管理的工具。組件的詳細(xì)介紹請(qǐng)見(jiàn)下一章節(jié)。。。
Angular2入門(mén)系列（三）————組件
1. 概述
組件（component）是構(gòu)成Angular應(yīng)用的基礎(chǔ)和核心，它是用來(lái)包裝特定的功能，應(yīng)用程序的有序運(yùn)行依賴(lài)于組件之間的協(xié)同工作。
2. 模塊化介紹
在node.js中，模塊就是一個(gè)文件，引入一個(gè)文件就是簡(jiǎn)單地通過(guò)requir("filePath")引入，其中filePath是文件名稱(chēng)或路徑。在Angular2項(xiàng)目中我們沒(méi)有采用這種規(guī)范，我們使用es6提供的引入模塊的方式，這和node.js比較相似，通過(guò)import {someClassName} from "filePath"這種方式來(lái)引入一個(gè)模塊。
在早期的模塊化工具中，多數(shù)只是針對(duì)javascript文件 部分做了處理，比如requirJs，而缺少對(duì)css，html等文件進(jìn)行管理的工具。后來(lái)逐漸形成按模塊劃分的概念，對(duì)比傳統(tǒng)的按資源目錄劃分，從邏輯的意義上來(lái)說(shuō)似乎更加合理，讓模塊更為獨(dú)立，方便維護(hù)。
按資源劃分
|———————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
通過(guò)將.js .css .html 文件按邏輯模塊劃分后，使得邏輯結(jié)構(gòu)更加清晰，這樣逐步便形成了組件的概念。我們可以這樣理解，前端中的組件就是一堆為了實(shí)現(xiàn)同一業(yè)務(wù)邏輯的代碼文件的組合。
3. Angular組件
學(xué)習(xí)Angular的組件，首先要知道怎么創(chuàng)建它。創(chuàng)建組件很簡(jiǎn)單，Angular提供了最方便的辦法。創(chuàng)建Angular組件可以通過(guò)以下三個(gè)步驟： 1.從@angular/core中引入component裝飾器。 2.建立一個(gè)普通的類(lèi)，并用@Component裝飾它。 3.在@Component中，設(shè)置selector自定義標(biāo)簽和template模版。
import { Component } from "@angular/core";
@Component({
selector: "contact-item",
template: `
張三
13800000000
`
})
export class ContactItemComponent {}
以上代母創(chuàng)建了一個(gè)最簡(jiǎn)單的Angular組件，只需要在html中添加自定義標(biāo)簽，Angular便會(huì)在此標(biāo)簽中插入組件中指定的模版。
組件的詳細(xì)介紹請(qǐng)見(jiàn)下一章節(jié)。。。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82793.html
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
平日學(xué)習(xí)接觸過(guò)的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫(kù)|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語(yǔ)法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...
閱讀 2699·2021-11-22 12:05
閱讀 3588·2021-10-14 09:42
閱讀 1821·2021-07-28 00:15
閱讀 2119·2019-08-30 11:08
閱讀 1627·2019-08-29 17:31
閱讀 1056·2019-08-29 16:42
閱讀 2471·2019-08-26 11:55
閱讀 2249·2019-08-26 11:49
