Angular2入門系列（三）————組件

denson 發布于2019-08-20 16:13 / 2301人閱讀

摘要：入門系列三組件概述組件是構成應用的基礎和核心，它是用來包裝特定的功能，應用程序的有序運行依賴于組件之間的協同工作。在早期的模塊化工具中，多數只是針對文件部分做了處理，比如，而缺少對，等文件進行管理的工具。組件的詳細介紹請見下一章節。。。

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入門實戰系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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