用法介绍main.ts

main.ts是 TypeScript 应用的入口文件。所有的编写的 TypeScript 代码都将在此文件中被编译执行。 下面从多个方面深入阐述 main.ts 的相关细节。

一、TypeScript 的配置

在 main.ts 中，我们需要先引入相关的模块，比如 Angular 的模块、服务、指令等。这些模块在 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 来管理整个工程，并且默认引入了相关配置。下面是一份经典的 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": "./" 是基础路径，和 src 同级 "outDir": "./dist/out-tsc" 编译输出目录 "sourceMap": true 生成 sourceMap，方便调试 "declaration": false 不生成 *.d.ts 声明文件 "moduleResolution": "node" 使用 Node 的查询方式 "emitDecoratorMetadata": true 标记调用的装饰器 "experimentalDecorators": true 允许使用实验性语法 "lib": ["es2017", "dom"] 使用的库是 ES2017 和 DOM

二、使用 @NgModule 装饰器

@NgModule 装饰器是 Angular 所提供的模块装饰器，用来修饰模块并且定义模块的属性。下面是一份基础模块的示例，包含了常用的属性设置：

@NgModule({
  declarations: [
    AppComponent,  // 声明组件
  ],
  imports: [
    BrowserModule, FormsModule, HttpModule  // 引入依赖的模块
  ],
  providers: [
    AppService  // 新建服务并添加到 providers 数组中
  ],
  bootstrap: [AppComponent]  // 指定启动组件
})
export class AppModule { }

其中，@NgModule 装饰器的各项属性含义如下：

declarations：本模块中声明的组件、指令、管道 imports：导入的 Angular 模块 providers：定义的服务 bootstrap：应用的主视图,根组件

三、组件的构建及生命周期

组件是 Angular 应用的核心内容，理解组件的构建方式以及生命周期比较容易上手。下面是一个组件的示例：

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

其中，@Component 装饰器需要接收一个 metadata 对象，里面各个属性的定义如下：

selector：组件的选择器，用于在模板中调用组件 templateUrl：组件模板的文件路径 styleUrls：组件样式的文件路径

组件生命周期是指在创建、渲染、更新和销毁组件时所执行的方法。常用的生命周期包括：

ngOnChanges：数据绑定输入属性（@Input）时调用 ngOnInit：组件实例化时调用，用于初始化实例数据 ngDoCheck：监测并检查数据变化时调用，不建议在这个函数中写大量代码 ngAfterContentInit：投影内容（用于内容的方式，比如 ng-content）初始化后调用 ngAfterViewInit：视图初始化后调用，即当组件及其子组件在HTML模板中渲染完毕后调用 ngOnDestroy：组件及其子组件被销毁后调用，用于清除定时器、取消订阅等操作

四、使用指令和服务

在 Angular 应用中，指令和服务是非常重要的一部分。指令能够直接操作DOM，并通过与其他指令和组件的交互来实现业务逻辑。服务用于复用组件之间共享的数据和逻辑。

下面是一个指令的示例：

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

该指令的作用是将一个 HTML 元素的背景色变为黄色。其中，@Directive 装饰器需要接收一个 metadata 对象，里面的属性都是可选的，详见以下说明：

selector：选择器，指明指令用于哪个 HTML 元素 providers：提供一个或多个依赖注入器的服务 exportAs：允许组件导出一个指令的别名 inputs：当指令用在一个元素上时，绑定输入属性 outputs：当指令用在一个元素上时，绑定输出事件 host：定义用于监听宿主元素 DOM 事件的匹配器

服务则是对数据的封装和重用，比如我们可以将一些数据的获取或处理过程封装到一个服务中。下面是一个使用 RxJS 的服务实现异步请求的示例：

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()));
  }
}

上面的服务通过注入 Http 类来发送异步请求，通过 RxJS 的 map 和 catch 操作符来处理数据的流转，最终通过 Observable 对象将数据流发射给订阅者。

总结

在 Angular 应用中，main.ts 文件作为入口文件对整个应用的配置和细节进行了定义。在编写的过程中需要考虑配置 TypeScript、使用 NgModule 装饰器、组件生命周期、使用指令和服务等方面。 编写好的代码由模块、组件、指令、服务等组成，使得整个应用的视图、逻辑、业务剥离、独立。