Cấu trúc Dự án Angular
Sau khi cài đặt môi trường phát triển, bước tiếp theo là tạo một dự án Angular và hiểu rõ cấu trúc của nó. Trong bài học này, chúng ta sẽ:
- Tạo một dự án Angular mới bằng Angular CLI.
- Giải thích cấu trúc thư mục của dự án Angular.
- Tìm hiểu các tệp quan trọng như app.module.ts, main.ts, index.html.
Sau bài học này, bạn sẽ hiểu được cách tổ chức của một ứng dụng Angular và vai trò của từng thành phần trong dự án.
Cấu trúc Dự án Angular
1. Tạo một dự án Angular mới với Angular CLI
Bước 1: Tạo dự án Angular
Mở Terminal/Command Prompt và chạy lệnh sau để tạo một dự án mới:
ng new my-angular-app
Bạn sẽ được hỏi một số tùy chọn:
- Would you like to add Angular routing? → Chọn Yes (nếu muốn sử dụng Routing).
- Which stylesheet format would you like to use? → Chọn CSS, SCSS, SASS hoặc LESS tùy sở thích.
Bước 2: Chạy ứng dụng Angular
Di chuyển vào thư mục dự án:
cd my-angular-app
Chạy lệnh khởi động ứng dụng:
ng serve
Mở trình duyệt và truy cập http://localhost:4200/ để xem kết quả. Nếu bạn thấy trang mặc định của Angular, bạn đã tạo dự án thành công!
2. Giải thích cấu trúc thư mục của dự án Angular
Sau khi tạo dự án, mở thư mục my-angular-app trong VS Code. Dưới đây là cấu trúc chính của dự án:
my-angular-app/
│-- node_modules/ # Chứa các thư viện cài đặt qua npm
│-- src/ # Chứa mã nguồn chính của ứng dụng
│ │-- app/ # Thư mục chứa các component, module, service
│ │-- assets/ # Chứa tài nguyên như hình ảnh, icon, file JSON
│ │-- environments/ # Chứa file cấu hình môi trường (dev, production)
│ │-- index.html # File HTML chính, nơi Angular sẽ render ứng dụng
│ │-- main.ts # File khởi động ứng dụng
│ │-- styles.css # File CSS toàn cục
│ │-- angular.json # File cấu hình Angular CLI
│-- package.json # Danh sách thư viện cần thiết cho dự án
│-- tsconfig.json # Cấu hình TypeScript
3. Tổng quan về các tệp quan trọng
index.html
Tệp này là điểm vào chính của ứng dụng Angular. Nó chứa một <app-root></app-root> để hiển thị ứng dụng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Angular App</title>
</head>
<body>
<app-root></app-root> <!-- Ứng dụng sẽ được render tại đây -->
</body>
</html>
Tất cả nội dung ứng dụng sẽ được hiển thị bên trong <app-root>, vốn được định nghĩa trong app.component.ts.
main.ts
Tệp main.ts là nơi khởi động ứng dụng Angular:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Ý nghĩa:
- Import AppModule, module chính của ứng dụng.
- Dùng
platformBrowserDynamic().bootstrapModule(AppModule)để khởi động ứng dụng.
app.module.ts
Tệp app.module.ts là trái tim của ứng dụng Angular, khai báo các thành phần quan trọng:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent // Khai báo component chính của ứng dụng
],
imports: [
BrowserModule // Import module cần thiết để chạy ứng dụng trên trình duyệt
],
providers: [],
bootstrap: [AppComponent] // Khởi chạy AppComponent khi ứng dụng chạy
})
export class AppModule { }
Ý nghĩa:
-
declarations: Khai báo các component, directives, pipes. -
imports: Import các module cần thiết như BrowserModule, FormsModule, HttpClientModule. -
bootstrap: Khai báo component chính được khởi chạy đầu tiên.
Kết luận
- Chúng ta đã tạo một dự án Angular mới với Angular CLI.
- Hiểu được cấu trúc thư mục chính của một dự án Angular.
- Tìm hiểu vai trò của các tệp quan trọng như index.html, main.ts, app.module.ts.
Với hơn 10 năm kinh nghiệm lập trình web và từng làm việc với nhiều framework, ngôn ngữ như PHP, JavaScript, React, jQuery, CSS, HTML, CakePHP, Laravel..., tôi hy vọng những kiến thức được chia sẻ tại đây sẽ hữu ích và thiết thực cho các bạn.
Xem thêm
Chào, tôi là Vũ. Đây là blog hướng dẫn lập trình của tôi.
Liên hệ công việc qua email dưới đây.
lhvuctu@gmail.com