Module trong Angular là gì
Hiểu về Angular modules (NgModule) và scope của nó
NgModules là cấu trúc cơ bản đầu tiên bạn gặp khi làm việc với bất kỳ ứng dụng bằng Angular nào, nhưng nó cũng tương đối tinh vi và phức tạp, vì những scope của nó. Show
Ở trang document của Angular đã nhiều câu hỏi thường gặp về NgModules, nhưng nó vẫn còn khá lộn xộn để mọi người nắm được trong khi tìm hiểu, sinh viên hay những người mới thường bối rối, vì vậy mình quyết định tổng hợp nó trong bài đăng này cho mọi người. Vậy tại sao lại là NgModulesKhi chúng ta sử dụng Angular CLI thì nó được sinh ra tự động, nhưng điều đầu tiên bạn phải làm trong Angular là tải một NgModule gốc:
Mục đích của NgModule là khai báo từng thứ bạn tạo trong Angular và nhóm chúng lại với nhau (như các package Java hoặc namespace PHP / C #). Có hai loại cấu trúc chính:
Chú ý: Từ Angular 6, services không cần phải được đăng ký trong 1 module nữa. Việc sử dụng các NgModule và scopes / visibilitySự nhầm lẫn bắt đầu với các components và servicers không có cùng scope/visibility.
Điều này có nghĩa là các
Ngược lại, các services bạn cung cấp thường sẽ có sẵn/khả dụng ở bất cứ đâu trong ứng dụng của bạn, trong tất cả các module. Khi nào nên import một NgModule?Sự khác biệt về scope giữa các component và service là một điểm quan trọng cần biết, nhưng hiện tại nó vẫn còn ổn. Mọi thứ trở nên lộn xộn bởi vì, tất nhiên, như trong bất kỳ khuôn khổ và ứng dụng nào, bạn sẽ ổn nếu được chỉ có một module, nhưng khi số lượng module tăng lên nhiều thì sẽ không ổn chút nào. Bản thân Angular được chia thành các module khác nhau (core, common, http, ...). Vì vậy, một điều chính khác mà bạn cần phải làm trong một module Angular là import các NgModules khác mà bạn cần và để sử dụng. Ví dụ:
Vấn đề là bạn cần phải biết lý do tại sao bạn lại cần phải nhập những module khác:
Tại sao? Bởi vì sự khác biệt về phạm vi giữa các components và services:
Nếu bạn không hiểu điều này, bạn sẽ có lỗi trên các components không khả dụng, vì bạn đã quên nhập lại module của chúng. Hoặc nếu bạn nhập một module cho các service nhiều lần, nó có thể dẫn đến lỗi trong các tình huống nâng cao như lazy load. Khi nào cần import main Angular modules?Sau đây là một kiến thức hữu ích về các module Angular được yêu cầu, để biết bạn cần import chúng bao nhiêu lần. Đây là một bản tóm tắt vô cùng hữu ích. Các module để nhập mỗi khi bạn cần chúng:
Những module chỉ nhập một lần:
Đó là lý do tại sao với Angular CLI, CommonModule được import tự động khi bạn tạo một module mới NgModules hỗn hợpNó có thể trở nên rắc rối hơn: làm thế nào để quản lý các module với các component và service cùng một lúc? Bạn có thể biết một trong số chúng: RouterModule. Nó cung cấp cho bạn một component( May mắn thay, sự lộn xộn đó sẽ được quản lý bởi chính module. Các tệp định tuyến được tạo tự động bởi Angular CLI, nhưng bạn có thể nhận thấy có một sự khác biệt tinh tế giữa định tuyến của module ứng dụng đầu tiên của bạn và định tuyến của các mô hình con. Với AppModule, nó là:
Còn với submodules, nó là:
Tại sao? Vì lần đầu tiên trong module ứng dụng, Lazy-loaded modulesTrong Angular nếu bạn muốn sử dụng** lazy-load** 1 module, ta có thể thực hiện dễ dàng với Angular CLI.
Vì nó sẽ là một gói và mô-đun khác nhau, sẽ chỉ được load theo yêu cầu theo mặc định, nên nó không được load trong vi toàn cầu ứng dụng của bạn. Đối với các component, nó không thay đổi bất cứ điều gì: bạn cần import lại CommonModule và các module thành phần khác, giống như trong bất kỳ submodule nào. Đối với service, có một sự khác biệt:
Như vậy bây giờ bạn đã biết mọi thứ về các module Angular, bạn có thể hỏi: tại sao điều này lại gây rối loạn. Nó có thể khó khăn cho người mới bắt đầu, nhưng có một lý do sau đây:
Tài liệu tham khảo:https://medium.com/@cyrilletuzi/understanding-angular-modules-ngmodule-and-their-scopes-81e4ed6f7407 https://angular.io/guide/ngmodule-faq |