Angular Folder Structure in Project
Bài đăng này đã không được cập nhật trong 3 năm
Mở đầu
Cấu trúc thư mục trong 1 dự án rất là quan trọng, với các cấu trúc tốt sẽ dễ dàng cho chúng ta làm việc và phát triển ứng dụng về sau. Angular sử dụng Angular Modules để nhóm các modules liên quan lại với nhau. Mỗi module sẽ có 1 thư mục riêng và có tên khác nhau. Angular sẽ không phân biệt bất cứ modules nào, nhưng dựa trên mục đích sử dụng chúng ta sẽ phân loại module thành 4 loại chính như sau:
- Root modules
- Feature Module
- Shared Module
- Core Module
Root modules
Angular yêu cầu một mô-đun được tải khi ứng dụng khởi động. Chúng tôi gọi đây là mô-đun gốc. Mô-đun gốc tải thành phần gốc và tất cả các mô-đun khác. Mô-đun gốc thường được gọi là AppModule và được tạo trong /src/app.folder
Feature Modules
Feature Modules là một tính năng cụ thể của ứng dụng. Tất cả các thành phần, pipe và directive sẽ trở thành một phần của module.
Tất cả các thành phần thuộc Feature Modules phải được đặt bên trong một thư mục được đặt tên theo module. Ví dụ / src / app / <ModuleName>. Bằng cách đó, chúng tôi giúp dễ dàng tìm kiếm một thành phần thuộc module
Bạn có thể tạo các thư mục con cho các directive, pipe trong thư mục module.
Bạn có thể tạo một thư mục thành phần(components) và đặt tất cả các thành phần(components) của bạn ở đó. Hoặc tạo một thư mục con cho từng thành phần(components) trong thư mục thành phần.
Một cách khác để tạo một page folder. Mỗi route là một page. Thư mục được đặt tên theo route. Route có thể chứa nhiều hơn một thành phần. Tất cả chúng được đặt dưới thư mục page đó. Các thành phần được chia sẻ có thể được đặt trong thư mục thành phần riêng biệt.
├── src
│ ├── app
│ │ ├── admin
│ │ │ ├── components
│ │ │ │ ├── shared.component.ts
│ │ │ ├── directives
│ │ │ │ ├── first.directive.ts
│ │ │ │ ├── another.directive.ts
│ │ │ ├── pages
│ │ │ │ ├── dashboard
│ │ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── rights
│ │ │ │ │ ├── rights.component.ts
│ │ │ │ ├── user
│ │ │ │ │ ├── user.component.ts
│ │ │ │ ├── admin.component.ts
│ │ │ │ ├── admin.component.html
│ │ │ │ ├── admin.component.css
│ │ │ │ ├── index.ts
│ │ │ ├── pipes
│ │ │ │ ├── first.pipe.ts
│ │ │ │ ├── another.pipe.ts
│ │ │ ├── admin.module.ts
│ │ │ ├── admin.routing.module.ts
│ │ │ ├── index.ts
Shared Module
Có nhiều components, directive và pipes mà chúng ta có thể muốn chia sẻ trên các modules khác nhau.
Modules được chia sẻ và phải khai báo các components, pipes và directive bằng cách sử dụng thẻ declarations và được public bằng cách dùng thẻ export
Các modules import các modules được chia sẻ và sử dụng các components, pipe và directive đã được export. Shared Modules phải được tạo trong thư mục / src / app / shared folder.
Bạn có thể làm theo cấu trúc thư mục sau, trong đó mỗi tính năng được chia sẻ được tạo trong thư mục riêng của nó.
├── src
│ ├── app
│ │ ├── shared
│ │ │ ├── layout
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── index.ts
Hoặc bạn có thể tạo các thư mục như components, pipe, directive như sau
├── src
│ ├── app
│ │ ├── shared
│ │ │ ├── components
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── pipes
│ │ │ │ ├── pipe1
│ │ │ │ │ ├── pipe1.pipe.ts
│ │ │ ├── index.ts
Core Module
Các Services được chia sẻ trên ứng dụng phải trở thành một phần của CoreModule. Các service xác thực người dùng, các service fetch data là những ví dụ về các dịch vụ đó.
Các services thường phải là singleton, Chỉ một phiên bản của services phải tồn tại. Bằng cách khai báo trong CoreModule sẽ đảm bảo các services là singleton
Core module phải được import chỉ trong core module. Các module khác không được import core module. Ta có thể sử dụng như sau để ngăn các module khác import core module.
@NgModule({})
export class CoreModule {
constructor(@Optional() @SkipSelf() core:CoreModule ){
if (core) {
throw new Error("You should import core module only in the root module")
}
}
}
CoreModule phải được tạo trong thư mục thư mục / src / app / core. Trong core folder, bạn có thể tạo các thư mục con cho từng dịch vụ trong thư mục dịch vụ.
Example structure in project
├── src
│ ├── app
│ │ ├── admin
│ │ │ ├── directives
│ │ │ ├── pages
│ │ │ │ ├── dashboard
│ │ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── rights
│ │ │ │ │ ├── rights.component.ts
│ │ │ │ ├── user
│ │ │ │ │ ├── user.component.ts
│ │ │ │ ├── admin.component.ts
│ │ │ │ ├── admin.component.html
│ │ │ │ ├── admin.component.css
│ │ │ │ ├── index.ts
│ │ │ ├── pipes
│ │ │ ├── admin.module.ts
│ │ │ ├── admin.routing.module.ts
│ │ │ ├── index.ts
│ │ ├── core
│ │ │ ├── models
│ │ │ │ ├── index.ts
│ │ │ │ ├── repos.ts
│ │ │ ├── services
│ │ │ │ ├── github.service.ts
│ │ │ │ ├── index.ts
│ │ │ ├── core.module.ts
│ │ │ ├── index.ts
│ │ ├── github
│ │ │ ├── pages
│ │ │ │ ├── repolist
│ │ │ │ │ ├── repolist.component.ts
│ │ │ │ │ ├── repolist.component.html
│ │ │ ├── github.routing.module.ts
│ │ │ ├── github.module.ts
│ │ │ ├── index.ts
│ │ ├── home
│ │ │ ├── pages
│ │ │ │ ├── aboutus
│ │ │ │ │ ├── about-us.component.ts
│ │ │ │ ├── contactus
│ │ │ │ │ ├── contact-us.component.ts
│ │ │ │ ├── home
│ │ │ │ │ ├── home-us.component.ts
│ │ │ │ ├── index.ts
│ │ │ ├── home-routing.module.ts
│ │ │ ├── home.module.ts
│ │ │ ├── index.ts
│ │ ├── shared
│ │ │ ├── layout
│ │ │ │ ├── footer
│ │ │ │ │ ├── footer.component.ts
│ │ │ │ │ ├── footer.component.html
│ │ │ │ ├── header
│ │ │ │ │ ├── header.component.ts
│ │ │ │ │ ├── header.component.html
│ │ │ ├── index.ts
│ ├── app-routing.module.ts
│ ├── app-wildcard-routing.module.ts
│ ├── app.component.css
│ ├── app.component.html
│ ├── app.component.spec.ts
│ ├── app.component.ts
│ ├── app.module.ts
│ ├── not-found.component.ts
All rights reserved
