Angular – Cấu trúc của một ứng dụng Angular

5/5 - (2 votes)

 

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.

5 1 vote
Article Rating
Subscribe
Thông báo cho tôi qua email khi
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments