main.ts是 TypeScript 應(yīng)用的入口文件。所有的編寫(xiě)的 TypeScript 代碼都將在此文件中被編譯執(zhí)行。 下面從多個(gè)方面深入闡述 main.ts 的相關(guān)細(xì)節(jié)。

一、TypeScript 的配置

在 main.ts 中，我們需要先引入相關(guān)的模塊，比如 Angular 的模塊、服務(wù)、指令等。這些模塊在 TypeScript 編譯過(guò)程中需要被處理以正確使用。因此，我們?cè)谖募^部添加了以下代碼：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

除了引入這些常用的模塊之外，還需要考慮如何編譯 TypeScript 代碼。在 Angular 中一般使用 Angular CLI 來(lái)管理整個(gè)工程，并且默認(rèn)引入了相關(guān)配置。下面是一份經(jīng)典的 tsconfig.json 文件的配置：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2017",
      "dom"
      ]
    }
}

以上幾個(gè)配置屬性的含義為：

“compileOnSave”: false 方便測(cè)試過(guò)程中不需要編譯 "baseUrl": "./" 是基礎(chǔ)路徑，和 src 同級(jí) "outDir": "./dist/out-tsc" 編譯輸出目錄 "sourceMap": true 生成 sourceMap，方便調(diào)試 "declaration": false 不生成 *.d.ts 聲明文件 "moduleResolution": "node" 使用 Node 的查詢方式 "emitDecoratorMetadata": true 標(biāo)記調(diào)用的裝飾器 "experimentalDecorators": true 允許使用實(shí)驗(yàn)性語(yǔ)法 "lib": ["es2017", "dom"] 使用的庫(kù)是 ES2017 和 DOM

二、使用 @NgModule 裝飾器

@NgModule 裝飾器是 Angular 所提供的模塊裝飾器，用來(lái)修飾模塊并且定義模塊的屬性。下面是一份基礎(chǔ)模塊的示例，包含了常用的屬性設(shè)置：

@NgModule({
  declarations: [
    AppComponent,  // 聲明組件
  ],
  imports: [
    BrowserModule, FormsModule, HttpModule  // 引入依賴的模塊
  ],
  providers: [
    AppService  // 新建服務(wù)并添加到 providers 數(shù)組中
  ],
  bootstrap: [AppComponent]  // 指定啟動(dòng)組件
})
export class AppModule { }

其中，@NgModule 裝飾器的各項(xiàng)屬性含義如下：

declarations：本模塊中聲明的組件、指令、管道 imports：導(dǎo)入的 Angular 模塊 providers：定義的服務(wù) bootstrap：應(yīng)用的主視圖,根組件

三、組件的構(gòu)建及生命周期

組件是 Angular 應(yīng)用的核心內(nèi)容，理解組件的構(gòu)建方式以及生命周期比較容易上手。下面是一個(gè)組件的示例：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.less']
})
export class AppComponent {
  title = 'My Angular App';
}

其中，@Component 裝飾器需要接收一個(gè) metadata 對(duì)象，里面各個(gè)屬性的定義如下：

selector：組件的選擇器，用于在模板中調(diào)用組件 templateUrl：組件模板的文件路徑 styleUrls：組件樣式的文件路徑

組件生命周期是指在創(chuàng)建、渲染、更新和銷毀組件時(shí)所執(zhí)行的方法。常用的生命周期包括：

ngOnChanges：數(shù)據(jù)綁定輸入屬性（@Input）時(shí)調(diào)用 ngOnInit：組件實(shí)例化時(shí)調(diào)用，用于初始化實(shí)例數(shù)據(jù) ngDoCheck：監(jiān)測(cè)并檢查數(shù)據(jù)變化時(shí)調(diào)用，不建議在這個(gè)函數(shù)中寫(xiě)大量代碼 ngAfterContentInit：投影內(nèi)容（用于內(nèi)容的方式，比如 ng-content）初始化后調(diào)用 ngAfterViewInit：視圖初始化后調(diào)用，即當(dāng)組件及其子組件在HTML模板中渲染完畢后調(diào)用 ngOnDestroy：組件及其子組件被銷毀后調(diào)用，用于清除定時(shí)器、取消訂閱等操作

四、使用指令和服務(wù)

在 Angular 應(yīng)用中，指令和服務(wù)是非常重要的一部分。指令能夠直接操作DOM，并通過(guò)與其他指令和組件的交互來(lái)實(shí)現(xiàn)業(yè)務(wù)邏輯。服務(wù)用于復(fù)用組件之間共享的數(shù)據(jù)和邏輯。

下面是一個(gè)指令的示例：

@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

該指令的作用是將一個(gè) HTML 元素的背景色變?yōu)辄S色。其中，@Directive 裝飾器需要接收一個(gè) metadata 對(duì)象，里面的屬性都是可選的，詳見(jiàn)以下說(shuō)明：

selector：選擇器，指明指令用于哪個(gè) HTML 元素 providers：提供一個(gè)或多個(gè)依賴注入器的服務(wù) exportAs：允許組件導(dǎo)出一個(gè)指令的別名 inputs：當(dāng)指令用在一個(gè)元素上時(shí)，綁定輸入屬性 outputs：當(dāng)指令用在一個(gè)元素上時(shí)，綁定輸出事件 host：定義用于監(jiān)聽(tīng)宿主元素 DOM 事件的匹配器

服務(wù)則是對(duì)數(shù)據(jù)的封裝和重用，比如我們可以將一些數(shù)據(jù)的獲取或處理過(guò)程封裝到一個(gè)服務(wù)中。下面是一個(gè)使用 RxJS 的服務(wù)實(shí)現(xiàn)異步請(qǐng)求的示例：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AppService {
  constructor(private http: Http) { }
  fetchData(): Observable {
    return this.http.get('url/to/service')
      .map(res => res.json())
      .catch(err => Observable.throw(err.json()));
  }
}

上面的服務(wù)通過(guò)注入 Http 類來(lái)發(fā)送異步請(qǐng)求，通過(guò) RxJS 的 map 和 catch 操作符來(lái)處理數(shù)據(jù)的流轉(zhuǎn)，最終通過(guò) Observable 對(duì)象將數(shù)據(jù)流發(fā)射給訂閱者。

總結(jié)

在 Angular 應(yīng)用中，main.ts 文件作為入口文件對(duì)整個(gè)應(yīng)用的配置和細(xì)節(jié)進(jìn)行了定義。在編寫(xiě)的過(guò)程中需要考慮配置 TypeScript、使用 NgModule 裝飾器、組件生命周期、使用指令和服務(wù)等方面。 編寫(xiě)好的代碼由模塊、組件、指令、服務(wù)等組成，使得整個(gè)應(yīng)用的視圖、邏輯、業(yè)務(wù)剝離、獨(dú)立。