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, nâng cáp, tăng tốc hoạt động.

---

Chuẩn bị: Để test các chức năng , bạn hãy tạo 1 project (tên gì cũng được) với chức năng routing được tạo sẵn:

ng new bai8 --routing –defaults

Giới thiệu về module trong angular

Ứng dụng angular có thể chia thành nhiều module (ít nhất 1) tùy độ lớn nhỏ. Mỗi module gồm nhiều component, directive… Nhờ module mà các ứng dụng lớn có thể chia nhỏ thành nhiều phân khúc để dễ phát triển và cải thiện tốc độ thực thi. Và cũng có thể nói ngược lại, nhờ module mà ứng dụng dễ mở rộng hơn.

Ứng dụng nào cũng có 1 module đặc biệt là AppModule , cái này đã được tạo sẵn lúc bạn tạo project, nó còn được gọi là module gốc (root module). 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

//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

Lệnh tạo module

Để tạo 1 module trrong Angular, bạn sẽ dùng lệnh như sau (users  là tên module)

ng generate module users

Lệnh trên sẽ tạo folder có tên users  đồng thời tạo file users.module.ts  để cấu hình module, file này có nội dung như sau:

//users.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
  declarations: [],
  imports: [ CommonModule ]
})
export class UsersModule { }

Với các Fearture module do bạn tạo ra thì có chút khác biệt với module gốc. Đó là  phần import sử sử dụng CommonModule chứ không phải BrowserModule như AppModule, còn phần bootstrap thì không có.

Tạo module trong Angular với tham số routing

Bạn cũng có thể tạo module với các thông số routing dẫn đến các compoment trong module.  Ví dụ:

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

Trong đó news là tên module, còn news là đường dẫn chung vào các chức năng trong module news.

Lệnh trên cũng tạo component news và tạo file news-routing.module.ts nhúng vào module news. Đồng thời nó cũng khai báo luôn trong app-routing.module.ts (file routing chung của ứng dụng) đường dẫn vào module vừa tạo.

Với tiện ích như trên, nên khi tạo module, bạn thường sẽ kèm thêm thông số routing.

Bạn có thể tạo bao nhiêu module cũng được trong các project. Sau đây là lệnh tạo module products:

ng generate module products --route products --module app.module

Tạo component bên trong các module đã có

Bạn có thể thêm nhiều component bên trong các module đã có. Cú pháp như sau (trong đó news là module cha), detailNews là tên component sẽ tạo

ng g component news/detailNews

Component được tạo trong folder news và được nhúng vào file mô tả module (news.module.ts)

Thường việc tiếp theo là bạn khai báo đường dẫn (route) vào compneuent mới tạo

Ví dụ khác: Tạo component detailProducts trong module products

ng g component products/detailProducts

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

Tạo layout

Nhúng bootstrap và code tạo layout (có menu, router-outlet)

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

<!-- app/app.component.html-->
<div class="container">
  <nav>
  <nav class="navbar navbar-expand navbar-dark bg-dark">
  <ul class="navbar-nav">
  <li class="nav-item"><a class="nav-link" routerLink="" href="#">Trang chủ</a> </li>
  <li class="nav-item"><a class="nav-link" routerLink="news" href="#">Tin tức</a> </li>
  <li class="nav-item"><a class="nav-link" routerLink="products" href="#">Sản phẩm</a> </li>
  <li class="nav-item"><a class="nav-link" routerLink="users" href="#">Thành viên</a> </li>
  </ul>
  </nav>
  </nav>
  <main class="d-flex" style="min-height: 400px;">
    <article class="col-md-9 bg-light"> 
        <router-outlet></router-outlet>
    </article>
    <aside class="col-md-3 bg-secondary"> </aside>
  </main>
</div>

Test: chạy project, nhắp thử các mục 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

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