Trong bài viết này, mình sẽ chia sẽ cách chia nhỏ 1 ứng dụng Angular thành Module and cách sử dụng routing trong Feature Module. Bài viết có sử dụng nhiều nguồn tham khảo khác.
Module là gì?
Module là một nơi mà bạn có thể nhóm các component, directive, pipe, và service có liên quan đến ứng dụng Angular. Bạn có thể hiểu đơn giản Module như 1 project Library trong .NET. Để sử dụng bất kỳ thành phần nào, bạn phải khai báo trong module.
Có 4 loại Modules:
- System Module: NgModule
- Core Module: định nghĩa các common services.
- Feature Module: Gom các component hoặc service có liên quan đến nhau hoặc cùng nằm trong một feature nào đó thành một nhóm
- Share Module: các common component và các modules khác mà chúng ta cần import vào các module trong ứng dụng
Angular Route
RoutingModule là một module được đặt tại @angular/router cung cấp cho ứng dụng Angluar của chúng ta khả năng điều hướng và hiển thị nội dung phù hợp với địa chỉ URL.
Có 2 loại routing:
- Hash routing
- Html 5 routing
Ví dụ
Tạo ứng dụng Angular:ng new feature-modules-demonpm i jquery
npm i bootstrap
"node_modules/bootstrap/dist/css/bootstrap.min.css","node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"<body class="container">
<app-root></app-root>
</body>Tạo Feature Module
ng generate module user-profileTạo Login Component
Lưu ý là bạn nên tạo component trong folder user-profileng generate component --module user-profile user-profile\login<h1>Login</h1>
<hr>
<div class="col-md-4">
<form autocomplete="off">
<div class="form-group" >
<label for="userName">User Name:</label>
<input id="userName" type="text" class="form-control" placeholder="User Name..." />
</div>
<div class="form-group" >
<label for="password">Password:</label>
<input id="password" type="password" class="form-control"placeholder="Password..." />
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
</div>Thêm route vào module User Profile
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from '../login/login.component';
import { Routes, RouterModule } from '@angular/router';
const routes:Routes = [
{path: 'login', component: LoginComponent}
];
@NgModule({
declarations: [LoginComponent],
imports: [
CommonModule,
RouterModule.forChild(routes)
]
})
export class UserProfileModule { }Lazy Loading a User Profile Module
Mở file src > app > app-routing.module.tsimport { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }Thêm Link để module load Lazily
Mở file src > app > app.component.html<div class="row">
<div class="col-md-2">
<a [routerLink]="['user/login']">Login</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<router-outlet></router-outlet>
</div>
</div>
Tham khảo
https://viblo.asia/p/tim-hieu-ve-module-trong-angular-Eb85o9gmZ2G
https://github.com/angular-vietnam/100-days-of-angular/blob/master/Day027-router.md
Angular: Understanding Modules and Services: https://michelestieven.medium.com/organizing-angular-applications-f0510761d65a
Trả lờiXóaServices in Modules
Trả lờiXóahttps://juristr.com/blog/2021/04/angular-di-and-lazy-modules/#registering-the-service-on-the-providers-array