Angular2 模塊簡介

asoren 發(fā)布于2019-08-02 14:02 / 1839人閱讀

摘要：模塊簡介簡介應用是模塊化的，而我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接收一個元數(shù)據(jù)對象并通過該對象告訴如何編譯和運行模塊代碼。它標記出該模塊擁有的組件指令和管道，并把它們的一部分公開出去，以便外部組件使用它們。

Angular2 模塊簡介 NgModule 簡介

Angular 應用是模塊化的，而NgModule我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接收一個元數(shù)據(jù)對象并通過該對象告訴 Angular 如何編譯和運行模塊代碼。它標記出該模塊擁有的組件、指令和管道，并把它們的一部分公開出去，以便外部組件使用它們。它可以向應用的依賴注入器中添加服務提供商。
每個 Angular 應用都至少有一個 NgModule 類，也就是根模塊，它習慣上命名為 AppModule，并位于一個名叫 app.module.ts 的文件中。引導這個根模塊就可以啟動你的應用。

NgModule 元數(shù)據(jù)

NgModule 是一個帶有 @NgModule() 裝飾器的類。@NgModule() 裝飾器是一個函數(shù)，它接受一個元數(shù)據(jù)對象，該對象的屬性用來描述這個模塊。其中最重要的屬性如下。

declarations（可聲明對象表） —— 那些屬于本 NgModule 的組件、指令、管道。

exports（導出表） —— 那些能在其它模塊的組件模板中使用的可聲明對象的子集。

imports（導入表） —— 那些導出了本模塊中的組件模板所需的類的其它模塊。

providers —— 本模塊向全局服務中貢獻的那些服務的創(chuàng)建器。
這些服務能被本應用中的任何部分使用。（你也可以在組件級別指定服務提供商，這通常是首選方式。）

bootstrap —— 應用的主視圖，稱為根組件。它是應用中所有其它視圖的宿主。只有根模塊才應該設置這個 bootstrap 屬性。

通俗一點講即：

聲明哪些組件、指令、管道屬于該模塊；

公開某些類，以便其它的組件模板可以使用它們；

導入其它模塊，從其它模塊中獲得本模塊所需的組件、指令和管道；

在應用程序級提供服務，以便應用中的任何組件都能使用它。

如：

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { HttpModule, Http } from "@angular/http";
import { RouterModule } from "@angular/router";
import { appRoutes } from "./app.routes";
import { AppcontentModule } from "./appcontent/appcontent.module";
import { AppComponent } from "./app.component";
import { CommonService } from "./shared/common.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    AppcontentModule
  ],
  providers: [CommonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

特性模塊

我們一般把自定義的其他模塊叫特性模塊。隨著應用的擴大，所有的事情都在一個模塊中完成難免會變亂，我們就會想著把統(tǒng)分為多個模塊，每個模塊都只做各自的事情而互不干擾，用根模塊來引導程序并管理所有子模塊即通過路由定向以及為它們提供全局配置與服務實例。
實現(xiàn)方式如下：

根模塊負責全局的路由。

核心模塊負責全局服務，也可以定義一些只在根模塊中使用的組件等，并只能由根模塊引入一次，不再導出。

共享模塊不做服務的提供，而是定義全局共享的組件等，以及幫助子模塊導入系統(tǒng)模塊，讓子模塊只需要導入此共享模塊就夠了。

子模塊內(nèi)部可以細分自己的子路由到具體的子組件，以及提供自己的服務等。

除了頁面入口模塊(即除了根模塊外的具體業(yè)務模塊)之外的其他子模塊均考慮寫成惰性加載的模塊，以提升頁面引導的速度減少性能浪費。

當需要一個比較通用的全局服務時，可以將其加入CoreModule，也可以再創(chuàng)建一個僅被根模塊引入的特性模塊。進一步的，甚至可以將此模塊發(fā)布到npm，這就需要更強的編碼能力和技術積累了。

Angular2模塊的目錄和目錄結構一般如下：

每個模塊一個應該多帶帶的文件夾

模塊內(nèi)功能相關或相近

每個模塊最好都有多帶帶的路由定義

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/53526.html

Angular2 模塊簡介

摘要：模塊簡介簡介應用是模塊化的，而我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接收一個元數(shù)據(jù)對象并通過該對象告訴如何編譯和運行模塊代碼。它標記出該模塊擁有的組件指令和管道，并把它們的一部分公開出去，以便外部組件使用它們。 Angular2 模塊簡介 NgModule 簡介 Angular 應用是模塊化的，而NgModule我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接...

liaosilzu2007 2019-08-30 15:55 評論0 收藏0
Angular2 模塊簡介

摘要：模塊簡介簡介應用是模塊化的，而我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接收一個元數(shù)據(jù)對象并通過該對象告訴如何編譯和運行模塊代碼。它標記出該模塊擁有的組件指令和管道，并把它們的一部分公開出去，以便外部組件使用它們。 Angular2 模塊簡介 NgModule 簡介 Angular 應用是模塊化的，而NgModule我們可以把它當做一個容器，用于存放一些內(nèi)聚的代碼塊，它接...

Chaz 2019-08-23 14:33 評論0 收藏0
angular2 NgModel` 模塊

摘要：模塊在中一個指的是使用修飾的。中沒有模塊級別的，所有在中聲明的都是注冊在根級別的中導入其他，其它暴露的出的等可以在本的組件中被使用。導入一個并不意味著會自動導入這個內(nèi)部導入的所暴露出的公共成員。 angular2 NgModel 模塊在Angular2中一個Module指的是使用@NgModule修飾的class。@NgModule利用一個元數(shù)據(jù)對象來告訴Angular如何去編譯和...

OnlyLing 2019-08-23 16:51 評論0 收藏0
Angular 2.x 從0到1 (一）史上最簡單的Angular2教程

摘要：官方支持微軟出品，是的超集，是的強類型版本作為首選編程語言，使得開發(fā)腳本語言的一些問題可以更早更方便的找到。第一個組件那么我們來為我們的增加一個吧，在命令行窗口輸入。引導過程通過在中引導來啟動應用。它們的核心就是。第一節(jié)：Angular 2.0 從0到1 （一）第二節(jié)：Angular 2.0 從0到1 （二）第三節(jié)：Angular 2.0 從0到1 （三）第一章：認識Angular...

tuniutech 2019-08-20 13:58 評論0 收藏0
Angular 2 快速上手

摘要：為了簡單起見，在本文中將會使用。已經(jīng)實例化了并且將它的模板載入到了元素中。中的依賴注入發(fā)生在該類的構造函數(shù)中，因此我們將在構造函數(shù)中注入。國內(nèi) Angular2 資料比較少，這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手，這里面還有很多有關于 Angular2 的文章，感興趣的朋友可以去看一看目前angular2已經(jīng)來到了beta版，這意味著它已經(jīng)做好了...

singerye 2019-08-19 17:38 評論0 收藏0