Module trong Angular

Module trong Angular giúp chia nhỏ các ứng dụng phúc tạp thành nhiều nhánh nhỏ, giúp dễ phát triển hơn, dễ phân chia công việc hơn. Từ Angular version 17, việc tạo module không còn quá quan trọng, tuy vậy nó vẫn hỗ trợ bạn thực hiện.

Chuẩn bị: Để thực hành việc tạo module, bạn hãy tạo 1 project (tên gì cũng được) , chấp nhận các mặc định và dùng option –no-standalone để sử dụng cácch tổ chức ứng dụng theo module truyền thống đã có từ các version trước. Cú pháp như sau: 

ng new bai8 --no-standalone --defaults

Sau khi tạo ứng dụng theo cách này, cấu trúc folder và file như sau. Đây là cách tổ chức giống như cách của angular version 16 trở về trước.

Giới thiệu về module trong angular

Từ version 17, Angular mặc định tổ chức code theo kiểu mới. không quá quan trọng việc tạo module nữa. Do đó nếu muốn tạo module , bạn cần tạo dự án với option –no-standalone như trên

Module trong angular giúp chia nhỏ ứng dụng Angular thành nhiều thành phần để dễ phát triển và dễ phân công công việc. Mỗi module gồm nhiều component, directive…

Module đặc biệt tên là AppModule , có sẵn lúc tạo project như trên. Nó còn được gọi là root module (module gốc). Các module khác do bạn tạo thêm trong project gọi là feature module (module chức năng). Sau đây là AppModule được tạo sẵn trong project

//src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Trong code trên, phần declarations là nơi khai báo các component, directive, pipe… có trong  module hiện tại.  Còn imports là nơi nhúng các module bên ngoài vào để dùng. Mục providers nơi khai báo các chức năng có thể truy xuất được trong dùng các module khác, còn bootstrap là mục để khai báo component gốc

Tạo module trong angular

Để tạo 1 module trrong Angular, bạn sẽ dùng lệnh ng generate module TênModule –route đườngroute –module app.module . Mời thực hiện 2 lệnh sau để tạo 2 module news và product

ng generate module news --route news --module app.module
ng generate module product --route product --module app.module

Lệnh đầu sẽ tạo module tên là news , đường dẫn chung vào module là  news. , –module app.module là để cập nhật route của module vào app-routing. Các file được ra khi bạn tạo module như hình dưới.

Mỗi module được xem như 1 ứng dụng con, trong đó component chính trùng tên với module, có file routing riêng của từng module.

File src/app/app-routing.module.ts là file đặc biệt, chứa routing chung dẫn vào module các component và module trong ứng dụng của bạn

Tạo component

Bạn có thể tạo nhiều component trong ứng dụng, đặt comoponent ngay trong module chính App hoặc đặt component bên trong các module đã tạo cũng được. Mời chạy các lệnh sau để tạo component. Hai coomponent cùng tên detail được đặt trong 2 module khác nhau. Còn component home đặc ngay trong app gốc 

ng generate component news/detail
ng generate component product/detail
ng generate component home

Tạo routing cho các component

Tạo routing cho cho component home

Mời bạn tạo route cho component home. Component này nằm ngay trong app. Cho nên để tạo route cho nó, mở app-routing.module.ts để định nghĩa 

 { path: '', component:HomeComponent}

Tạo routing cho cho component news/detail

Giờ thì bạn tạo route cho component detail trong module news . Mở file news/news-routing.module.ts để định nghĩa 

{ path: 'detail/:id', component: DetailComponent },

Tạo routing cho cho component product/detail

Tương tự, tạo route cho component detail trong module product. Bằng cách mở file product/product-routing.module.ts để định nghĩa

{ path: 'detail/:id', component:DetailComponent },

Tạo layout

– Nhúng bootstrap : Mở index.html

<!--src/index.html-->
<link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"> </script>

– Code tạo layout : Mở app.component.html 

<!-- app/app.component.html-->
<div class="container border border-info p-0">
  <nav class="border-bottom border-info">
    Thanh menu
  </nav>
  <main class="d-flex bg-info-subtle" style="min-height: 300px;">
   <router-outlet></router-outlet>
  </main>
</div>

– Code tạo thanh menu 

<nav class="navbar navbar-expand-lg "> <div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="menu">
 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item"> <a routerLink="/" class="nav-link active"  href="#" > Trang chủ </a> </li>
    <li class="nav-item dropdown">
      <a routerLink="/product" data-bs-toggle="dropdown" href="#" class="nav-link dropdown-toggle"> Sản phẩm </a>
      <ul class="dropdown-menu">
        <li> <a routerLink="/product/detail/1" class="dropdown-item" href="#" > Sản phẩm 1 </a> </li>
        <li> <a routerLink="/product/detail/2" class="dropdown-item" href="#">Sản phẩm 2 </a> </li>
      </ul>
    </li>
    <li class="nav-item dropdown">
      <a routerLink="news" class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Tin tức</a>
      <ul class="dropdown-menu">
        <li><a routerLink="/news/detail/1" class="dropdown-item" href="#" >Tin 1</a> </li>
        <li><a routerLink="/news/detail/2" class="dropdown-item" href="#" >Tin 2</a> </li>
      </ul>
    </li>
 </ul>
</div> </div> </nav>

Nhập nội dung tùy ý trong các component 

<!-- app/home/home.component.html-->
<h3>Trang chủ ứng dụng </h3>
<!-- app/news/news.component.html-->
<h3> Danh sách tin </h3>
<!-- app/product/product.component.html-->
<h3>Danh sách sản phẩm</h3>
<!-- app/product/detail/detail.component.html-->
<h3>Chi tiết 1 sản phẩm</h3>

Test: Chạy project, nhắp thử các mục Trang chủ, Tin tức, Sản phẩm… trong menu, bạn sẽ thấy các component tưng ứng trong các module được nhúng vào layout

Chú ý :

  • Mỗi module đều có file routing riêng dẫn vào các chức năng (component) trong module
  • Khi tạo module với thông số routing, angular đã có lệnh nhúng đường dẫn vào module trong file app-routing.module.ts

Bài cơ bản cần đọc và thực hành trước bài này là Routing Trong Angular. Ngoài ra để tham khảo thêm, hãy đọc https://angular.io/guide/architecture-modules

BÀI VIẾT LIÊN QUANXEM THÊM