本文呢主要給大家介紹的關(guān)于Angular2模塊和組件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

一、初步了解模塊和組件

之前給大家介紹了構(gòu)建工程，這篇文章簡單講述一下Angular2中的模塊和組件。

app文件夾下有五個文件，其中，app.component.spec.ts應(yīng)該是和模塊測試有關(guān)的文件，目前不用管它。剩下的四個文件就是典型的模塊+組件的文件組成模式。

Angular2應(yīng)用由模塊和組件構(gòu)成，每個模塊這樣明明name.module.ts,組件則是name.component.ts。

這幾個文件的關(guān)系是從屬關(guān)系：

|--app.module.ts(模塊)
 |--app.component.ts(組件)
  |--app.component.html(HTML模板)
  |--app.component.css(CSS樣式表)

一個模塊可以有多個組件，一個組件也可以有多個樣式表,但只有一個HTML模板。

1.1組件的含義

Angular2中的組件，就是我們自定義的一段HTML代碼，給他取個名字，就可以當(dāng)作HTML的標(biāo)簽使用了。假如組件的名字是my-app，那么就可以這樣使用：

<div>
 <my-app><my-app>//可以像原生標(biāo)簽一樣添加屬性，而且組件能接收的屬性更豐富
   //標(biāo)簽里面也可以放內(nèi)容
</div>

組件其實是一個類，它定義了一系列方法和屬性，并且把HTML模板封裝起來。它的意義是，你可以把它當(dāng)做一個獨立的隔離的盒子,并利用其中的方法和屬性進(jìn)行盒子內(nèi)部的操作，以及和外界的父組件、兄弟組件交互。

1.2模塊的含義

模塊就是將一系列的組件還有指令、服務(wù)整合封裝到一起，提供一個完整的功能。模塊可以被外部模塊引用。

二、模塊詳解和根模塊

2.1 根模塊

每個應(yīng)用會有一個根模塊，按照約定，它的類名叫做AppModule，被放在app.module.ts文件中。應(yīng)用啟動時，就會加載這個模塊。

每個根模塊會有一個根組件，默認(rèn)就是app.component.ts，名字是app-root。

查看項目目錄中的index.html，會發(fā)現(xiàn)有<app-root>Loading...</app-root>這樣的代碼，就是在加載這個根模塊。

2.2 模塊詳解

下面是app.module.ts的代碼。

import { BrowserModule } from '@angular/platform-browser';//每個在瀏覽器中運行
//的應(yīng)用的根模塊都需要引入BrowserModule
import { NgModule } from '@angular/core';//每個模塊都需要引入的核心庫中的NgModule
import { FormsModule } from '@angular/forms';//表單模塊，在應(yīng)用中使用表單時引入
import { HttpModule } from '@angular/http';//http模塊，當(dāng)需要進(jìn)行http遠(yuǎn)程請求時引入

import { AppComponent } from './app.component';//自己創(chuàng)建的組件

@NgModule({
 declarations: [
 AppComponent
 ],
 imports: [
 BrowserModule,
 FormsModule,
 HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Angular2用TypeScript組織代碼的方式大致就像這個文件一樣。

1、在頂部使用import語句，導(dǎo)入模塊或者組件需要使用的外部模塊。

在模塊中需要使用自己創(chuàng)建的組件或者其他服務(wù)、指令，也需要import。

2、import語句之后，使用@NgModule()語句描述本模塊的元數(shù)據(jù)。

• declarations：聲明屬于本模塊的組件，每個組件必須在且僅在一個模塊中聲明。
• imports:引入買本模塊中用到的模塊，該模塊是處于import語句引入的模塊中。
• providers:聲明模塊中使用的服務(wù)的提供者，暫時還沒有用到。
• bootstrap:根模塊中的引導(dǎo)組件，應(yīng)用啟動過程中，會創(chuàng)建這個數(shù)組中的組件并插入到HTML中，一般只有一個引導(dǎo)組件。
  

3、最后，使用export語句，創(chuàng)建模塊的類并暴露出去。

模塊、組件只有暴露出去，其他的模塊才能引用。

三、組件詳解

import { Component } from '@angular/core'; //所有組件必須引入

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'app works! 你已經(jīng)完成了第一步';
}

1、import語句導(dǎo)入需要的模塊。

2、使用@Component()來描述本組件的元數(shù)據(jù)。

• selector:創(chuàng)建的組件的名字，就像HTML標(biāo)簽的名字一樣
• templateUrl: HTML模板，使用相對路徑，./表示這個組件文件所在的當(dāng)前目錄，
• styleUrls:HTML模板使用的樣式表，可以有多個。
  

3、最后，使用export創(chuàng)建組件的類并暴露出去。在類中，可以創(chuàng)建屬性和方法。

四、應(yīng)用啟動過程

整個應(yīng)用的啟動流程：加載根模塊，加載所需的其他模塊，創(chuàng)建引導(dǎo)組件，顯示組件內(nèi)容。

注意：我覺得學(xué)習(xí)Angular2很好的方法之一就是去看官方教程，有中文版的，很方便?？赐昵懊娴拈_發(fā)指南部分就足以了解Angular2的大致原理了，當(dāng)然官方教程有的地方概念可能很模糊，有地方不了解的同學(xué)，可以留言交流，謝謝大家對腳本之家的支持。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助。

最新評論