VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

Học Node.js

Giới thiệu Angular Cài đặt môi trường Angular7 Tạo dự án đầu tiên trong Angular7 Hướng dẫn lập trình Angular7 với trình soạn thảo Visual Studio Code Angular7 - Components Angular7 - Modules Angular7 - Data Binding Angular7 - Event Binding Angular7 - Templates Angular7 - Directives Angular7 - Pipes Angular7 - Routing Angular7 - Services Angular7 - Http Client Angular7 - CLI Prompts Angular7 - Forms
1 / 3
❮ ❯

Routing trong Angular 7


Pipe trong Angular 7
Service trong Angular 7

Nội dung chính

  • Giới thiệu Routing trong Angular7
  • Ví dụ sử dụng routing trong Angular 7
    • Tạo Home component
    • Tạo ContactUs component

Giới thiệu Routing trong Angular7

Như bạn đã biết Angular là một Javascript Framework để xây dựng các Single Page Application (SPA) bằng JavaScript, HTML và TypeScript. Giả sử bạn muốn thiết kế các trang như Home page, contact us, help, policy. Làm thế nào để bạn đạt được điều này trong Angular?

Để tạo được các liên kết trong Angular, bạn có thể sử dụng Routing. Routing trong Angular về cơ bản có nghĩa là điều hướng giữa các trang. Ở đây, các trang mà chúng ta đang đề cập đến sẽ ở dạng các Component. Bây giờ chúng ta sẽ tạo một component và xem cách sử dụng routing với nó.

Khi tạo project bằng lệnh ng new ten_project , hệ thống hỏi chúng ta có muốn tạo routing hay không? Nếu nhập yes là có. Có nghĩa là Routing Module được thêm vào file app.module.ts như sau:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { AddTextDirective } from './add-text.directive';
import { SqrtPipe, SquarePipe } from './app.sqrt';

@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    AddTextDirective,
    SqrtPipe,
    SquarePipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppRoutingModule được thêm vào như hình trên và được đưa vào mảng imports.

Chi tiết tệp của app-routing.module được cung cấp bên dưới:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Lưu ý file này được tạo theo mặc định với tùy chọn thêm routing vào trong quá trình thiết lập dự án. Nếu không được thêm, các tệp trên phải được thêm theo cách thủ công.

Có một const route được định nghĩa là kiểu Routes. Nó là một mảng chứa tất cả các path mà chúng ta cần trong dự án của mình.

const routes được cấp cho RouterModule như được hiển thị trong @NgModule. Để hiển thị chi tiết định tuyến cho người dùng, chúng ta cần thêm chỉ thị <router-outlet> vào view (html, template) được hiển thị.

Ví dụ <router-outlet> được thêm vào app.component.html như sau:


<h1>Angular 7 Routing Demo</h1> 
<router-outlet></router-outlet>


Ví dụ sử dụng routing trong Angular 7

Bây giờ chúng ta sẽ tạo 2 component được gọi là Home và ContactUs và điều hướng giữa chúng bằng cách sử dụng routing.

Tạo Home component

Thực thi lệnh sau để tạo home component:

ng g component home

Tạo ContactUs component

Thực thi lệnh sau để tạo ContactUs component:

ng g component contactus

Chúng ta đã hoàn tất việc tạo các component về home và contactus. Dưới đây là chi tiết về các thành phần trong app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { AddTextDirective } from './add-text.directive';
import { SqrtPipe, SquarePipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    AddTextDirective,
    SqrtPipe,
    SquarePipe,
    HomeComponent,
    ContactusComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import RoutingComponent vào app.module.ts như sau:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, RoutingComponent } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { AddTextDirective } from './add-text.directive';
import { SqrtPipe, SquarePipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({
  declarations: [
    AppComponent,
    NewCmpComponent,
    AddTextDirective,
    SqrtPipe,
    SquarePipe,
    HomeComponent,
    ContactusComponent,
    RoutingComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bây giờ chúng ta hãy thêm chi tiết các path trong app-routing.module.ts như sau:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
  {path:"home", component:HomeComponent}, 
  {path:"contactus", component:ContactusComponent} 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

Mảng các routes gồm có các path và component.

Lưu ý: các component chúng ta cần để định tuyến được import trong app.module.ts và cả trong app-routing.module.ts. Bạn có thể chỉ cần import chúng 1 nơi, tức là trong app-routing.module.ts.

Vì vậy, chúng tôi sẽ tạo một mảng component được sử dụng để định tuyến và sẽ export mảng trong app-routing.module.ts và import lại nó trong app.module.ts. Vì vậy, chúng ta có tất cả các component được sử dụng để định tuyến trong app-routing.module.ts.

app-routing.module.ts như sau:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [ 
  {path:"home", component:HomeComponent}, 
  {path:"contactus", component:ContactusComponent} 
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 
export const RoutingComponent = [HomeComponent,ContactusComponent];

Chúng ta đã hoàn tất việc định nghĩa các routing. Bây giờ, chúng ta cần hiển thị giống nhau cho người dùng, vì vậy hãy thêm hai button, home và contact us trong app.component.html và khi click vào button tương ứng, nó sẽ hiển thị template(.html) component tương ứng bên trong chỉ thị <router-outlet> mà chúng ta đã thêm vào add.component.html.

Tạo button bên trong app.component.html và cung cấp đường dẫn đến các routing đã tạo.

app.component.html


<h1>Angular 7 Routing Demo</h1> 
<nav> 
   <a routerLink = "/home">Home</a> 
   <a routerLink = "/contactus">Contact Us </a> 
</nav> 
<router-outlet></router-outlet>

Thêm css sau vào app.component.css


a:link, a:visited { 
    background-color: #848686; 
    color: white; 
    padding: 10px 25px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
 } 
 a:hover, a:active {
    background-color: #BD9696;
 }

Kết quả:

Routing trong Angular7

Click Home:

Routing trong Angular7

Click Contact Us:

Routing trong Angular7
Pipe trong Angular 7
Service trong Angular 7

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7Data Binding trong Angular 7Component trong Angular 7Hướng dẫn lập trình Angular 7 với trình soạn thảo Visual Studio CodeTạo dự án Angular đầu tiên

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml