国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 用法介紹main.ts

用法介紹main.ts

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-11-21 15:49:53 1700552993

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

一、TypeScript 的配置

在 main.ts 中,我們需要先引入相關(guān)的模塊,比如 Angular 的模塊、服務(wù)、指令等。這些模塊在 TypeScript 編譯過程中需要被處理以正確使用。因此,我們在文件頭部添加了以下代碼:

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 來管理整個工程,并且默認(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"
      ]
    }
}

以上幾個配置屬性的含義為:

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

二、使用 @NgModule 裝飾器

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

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

其中,@NgModule 裝飾器的各項屬性含義如下:

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

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

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

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

其中,@Component 裝飾器需要接收一個 metadata 對象,里面各個屬性的定義如下:

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

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

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

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

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

下面是一個指令的示例:

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

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

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

服務(wù)則是對數(shù)據(jù)的封裝和重用,比如我們可以將一些數(shù)據(jù)的獲取或處理過程封裝到一個服務(wù)中。下面是一個使用 RxJS 的服務(wù)實現(xiàn)異步請求的示例:

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ù)通過注入 Http 類來發(fā)送異步請求,通過 RxJS 的 map 和 catch 操作符來處理數(shù)據(jù)的流轉(zhuǎn),最終通過 Observable 對象將數(shù)據(jù)流發(fā)射給訂閱者。

總結(jié)

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

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT