Trong thư mục quickstart
mà chúng ta đã cài đặt Angular, có một thư mục project mẫu tên là app,
trong thư mục này có 3 file .ts
như sau:
app/ |---app.component.ts |---app.module.ts |---app.ts
Tất cả các project nào cũng phải có 3 file này, mỗi file thực hiện một mục đích khác nhau, tùy theo ứng dụng mà chúng sẽ phát triển như thế nào.
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>` }) export class AppComponent { name = 'Angular'; }
File app.component.ts
định nghĩa lớp AppComponent,
đây là một component nhờ có phần khai báo metadata @Component,
đây còn được gọi là root component, tất cả các component mà chúng ta sẽ viết đều được kế thừa từ component này.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
File app.module.ts
định nghĩa lớp AppModule,
đây là một module nhờ có phần khai báo metadata @NgModule,
đây còn gọi là Root Module vì có khai báo thuộc tính bootstrap,
mục đích của root module là cho Angular biết cách ứng dụng chạy như thế nào.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
File main.ts
sẽ liên kết toàn bộ các file thành một ứng dụng hoàn chỉnh.