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