MOSOFTVN
Angular Routing cung cấp cho ứng dụng khả năng điều hướng và hiển thị nội dung phù hợp với địa chỉ URL
Routing trong Angular giúp bạn tạo ứng dụng SPA, nghĩa là việc điều hướng giữa các trang trong cùng ứng dụng web mà không cần load lại toàn bộ trang mà chỉ cần load thành phần cần load thêm
Mỗi routing liên kết với 1 component
Bước 1: Cài đặt chú ý chọn tạo routing mặc định để đỡ phải tạo sau này:
Cấu trúc trang web ngày hôm nay:
Bước 2: Tạo các component tương ứng:
Tạo thêm 3 component mới là home, about, contact với 3 lệnh lần lượt sau đây :
ng g c components/home
ng g c components/about
ng g c components/contact
ng g c components/product
ng g c components/nav
Kiểm tra trong file src/app/app.module.ts đảm bảo 3 component đã được import vào
Bước 3: Mở file src/app/app.routing.module.ts khai báo các router lần lượt như sau :
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './components/about/about.component';
import { ContactComponent } from './components/contact/contact.component';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: 'contact', component: ContactComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Bước 4 : Tìm đến cấu trúc menu trên cùng của trang web và sử dụng tên route tại thẻ a như sau :
Cấu trúc menu tại file src/app/component/nav/nav.component.html
<!-- menu navbar -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId"
aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item"><a class="nav-link" routerLink="/">Home</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/about">About</a></li>
<li class="nav-item"><a class="nav-link" routerLink="/contact">Contact</a></li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
Bước 5: Thay đổi nội dung cho các component home, about, contact trong các file tương ứng là
home.component.html (Cut app-category và app-product ở app.component.html vào đây)
<div class="row">
<div class="col-md-3">
<!-- đã cut và dán vào category.component.html -->
<app-category></app-category>
</div>
<div class="col-md-9">
<!-- đã cut và dán vào product.component.html -->
<app-product></app-product>
</div>
</div>
about.component.html
<div class="jumbotron">
<h1 class="display-3">Abut Us</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, itaque fugiat ullam cupiditate
eligendi quisquam commodi debitis! Animi dicta magni, soluta facilis reiciendis quae quidem, repellat provident,
ducimus autem veritatis!</p>
<hr class="my-2">
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
</p>
</div>
contact.component.html
<div class="jumbotron">
<h1 class="display-3">Contact Us</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis, itaque fugiat ullam cupiditate
eligendi quisquam commodi debitis! Animi dicta magni, soluta facilis reiciendis quae quidem, repellat provident,
ducimus autem veritatis!</p>
<hr class="my-2">
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
</p>
</div>
File app.component.html code còn lại như sau
<!-- sử dụng directive app-nav đã tạo bên nav.component.ts -->
<app-nav></app-nav>
<!-- main content -->
<div class="main-content py-3">
<div class="container">
<!-- router-outlet sẽ được giải thích kỹ ở bài sau -->
<router-outlet></router-outlet>
</div>
</div>
<!-- Footer -->
<footer class="bg-dark text-light py-3">
<div class="container">
<h1>Footer Infomations</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat eius soluta deserunt quo id quasi enim fugit
sed.
Veniam, vero at. Repellat sunt tenetur laborum cum dolorum aliquam animi quos!</p>
</div>
</footer>
Bước 6: Khởi động ứng dụng ng serve -o và xem kết quả
ng generate component page-not-found
src/app/page-not-found/page-not-found.component.html
<h2>Page Not Found</h2>
<p>We couldn't find that page! Not even with x-ray vision.</p>
Thêm dòng này vào danh sách route của bạn:
{path: '**', component: PageNotFoundComponent}