Angular2入門(mén)教程之模塊和組件詳解

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

一、初步了解模塊和組件

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

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

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

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

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

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

1.1組件的含義

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

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

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

1.2模塊的含義

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

二、模塊詳解和根模塊

2.1 根模塊

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

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

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

2.2 模塊詳解

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

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

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

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

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

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

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

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

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

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

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

三、組件詳解

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語(yǔ)句導(dǎo)入需要的模塊。

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

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

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

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

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

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

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