Angular 13 Routing dan Sub Routing: Panduan Lengkap – Codewithaden

Untuk membuat modular aplikasi Angular kami, yang terbaik adalah menetapkan modul rute-bijaksana. Karena itu, kami Akan mengambil bagaimana kita dapat membuat rute root dan rute anak dalam contoh perutean dan sub routing ini.

Angular 13 Routing dan Sub Routing

Untuk menavigasi ke berbagai halaman dalam aplikasi Anda, Anda juga ingin aplikasi menjadi a SPA (Aplikasi Halaman Tunggal), tanpa pemuatan ulang halaman. Aplikasi Anda membutuhkan perutean, dan Angular membuatnya sangat mudah. Routing berarti menavigasi di antara halaman. Anda telah melihat banyak situs web dengan tautan yang mengarahkan Anda ke halaman baru. Ini dapat dicapai dengan menggunakan perutean.

Kami juga melihat sub routing atau routing anak -anak untuk komponen kami. Itu berarti, dalam aplikasi kami, ada satu rute root, dan rute lainnya adalah untuk komponen masing -masing.

Sekarang, hal pertama adalah membuat Proyek Angular .

Ketik perintah berikut untuk membuatnya. Kemudian, silakan instal atau perbarui CLI Angular Jika Anda belum melakukannya.

Langkah 1: Instal Proyek Angular 12

Ketik perintah berikut untuk membuatnya.

ng new angroute 

Ingat, Anda perlu menambahkan rute aplikasi dengan mengatakan ya ke prompt saat membuat proyek baru. Di sini saya telah mengizinkan menambahkan perutean sudut.

Sekarang, instal kerangka CSS Bootstrap.

npm install bootstrap --save 

Tambahkan file bootstrap di dalam Angular.json mengajukan.

"styles": [
     "src/styles.css",
     "./node_modules/bootstrap/dist/css/bootstrap.min.css"
], 

Langkah selanjutnya adalah membuat satu komponen header. Jadi ketik perintah berikut.

ng g c header --spec=false 

Kami akan membuat bilah navigasi di dalam komponen itu. Jadi, tulis kode berikut di dalam header.component.html mengajukan.



 

Sekarang, akhirnya, ganti app.component.html kode dengan kode berikut.


Simpan file dan mulai server pengembangan sudut.

ng serve --open 

Anda akan melihat bilah navigasi dengan tiga item NAV.

Jadi di sini, satu item adalah rumah, dan satu Siswa.

Itu berarti aplikasi kami memiliki satu rute root untuk rumah, dan yang lainnya adalah sub-rute seperti untuk modul siswa.

Saat membuat proyek, kami telah membuat satu modul routing yang disebut app-routing.module.ts. Jadi kami akan mendefinisikan rute root di dalam file itu.

Langkah 2: Tambahkan rute root

Pertama, buat komponen rumah dengan perintah berikut.

ng g c home --spec=false 

Sekarang, tambahkan komponen itu di dalam app-routing.module.ts mengajukan.

// app-routing.component.ts

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

import { HomeComponent } from './home/home.component';

const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent
    }
];

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

Jadi, di sini kami telah menentukan rute root untuk aplikasi sudut kami. Sekarang tambahkan outlet router di dalam app.component.html file untuk menampilkan konten komponen beranda.


Juga, tambahkan tautan navigasi di dalam header.component.html mengajukan.


 

Simpan file dan buka browser dan klik Rumah tautan. Anda dapat melihat bahwa kami dapat melihat konten dari home.component.html mengajukan. Jadi, kami telah mengurus rute root. Sekarang, sekarang saatnya untuk membuat modul siswa dan menentukan sub-rute modul siswa.

Langkah 3: Buat modul dan komponen siswa.

Langkah pertama adalah membuat modul yang disebut siswa. Jadi mari kita buat menggunakan perintah berikut.

ng g module student 

Jadi, itu akan membuat folder di dalam folder aplikasi yang disebut itu murid , dan di dalam folder itu, itu akan membuat a student.module.ts mengajukan.

Langkah selanjutnya adalah membuat tiga komponen sudut yang terkait dengan modul siswa. Jadi mari kita lakukan itu.

ng g c student/student --spec=false
ng g c student/student-list --spec=false
ng g c student/student-detail --spec=false 

Itu akan membuat tiga folder di dalam SRC >> Aplikasi >> Siswa map.

Sekarang, keempat komponen ini sudah diimpor di dalam student.module.ts mengajukan.

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentComponent } from './student/student.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';

@NgModule({
  declarations: [StudentComponent, StudentListComponent, StudentDetailComponent],
  imports: [
    CommonModule
  ]
})
export class StudentModule { }
 

Kami tidak perlu mengimpor semua komponen ini di dalam app.module.ts mengajukan.

Sebaliknya, kita perlu mengimpor ini student.module.ts file di dalam app.module.ts mengajukan.

// app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { StudentModule } from './student/student.module';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StudentModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Jadi, semua komponen siswa kami terdaftar di aplikasi sudut.

Langkah 4: Buat rute siswa.

Sekarang, di dalam SRC >> Aplikasi >> Siswa folder, kita dapat membuat file routing yang dipanggil Student-routing.module.ts dan tambahkan kode berikut di dalamnya.

// student-routing.module.ts

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

import { StudentComponent } from './student/student.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';

const routes: Routes = [
    {
        path: 'student',
        component: StudentComponent,
        children: [
            {
                path: 'list',
                component: StudentListComponent
            },
            {
                path: 'detail',
                component: StudentDetailComponent
            }
        ]
    }
];


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

Jadi, di sini kami telah mendefinisikan sub-perutean untuk modul siswa. Jalur utamanya adalah a /murid dan anak -anaknya /Siswa/Daftar dan /Siswa/Detail.

Jadi itu berarti kami telah mendefinisikan subroutes untuk modul siswa. Satu -satunya hal yang tersisa adalah mendaftarkan modul perutean ini ke student.module.ts mengajukan.

Ingat, keduanya student.module.ts dan Student-routing.module.ts file berbeda. Anda dapat melihat struktur ini sama dengan struktur proyek sudut akar kami app.module.ts dan app-routing.module.ts.

// student.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { StudentRoutingModule } from './student-routing.module';

import { StudentComponent } from './student/student.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';

@NgModule({
  declarations: [StudentComponent, StudentListComponent, StudentDetailComponent],
  imports: [
    CommonModule,
    StudentRoutingModule
  ]
})
export class StudentModule { }
 

Sekarang, kita perlu menampilkan rute. Jadi tambahkan kode berikut di dalam student.component.html mengajukan.


Ini outlet router hanya akan menunjukkan komponen yang terkait dengan murid modul. Jadi berbeda dari outlet router routing root, yang masih ada di tempat di dalam app.component.html mengajukan.

Juga, sekarang tambahkan tautan router di dalam header.component.html mengajukan.



 

Simpan file ke browser dan navigasikan ke http://localhost:4200/student/list

Anda dapat melihat bahwa itu membuat komponen yang benar. Sekarang, pergi ke http://localhost:4200/student/detail

Ini juga akan menunjukkan komponen yang tepat, dan sekarang modul siswa kami berfungsi.

Anda masih bisa pergi ke http://localhost:4200/home , dan akan membuat komponen yang benar, yang merupakan homecomponent.

Beginilah cara Anda mengatur proyek Anda Angular Modul-bijaksana dengan rooting root dan anak-anak.

Ringkasan perutean sudut

  1. Anda menambahkan router sudut untuk menavigasi di antara berbagai komponen.
  2. Anda mengubah AppComponent menjadi shell navigasi dengan tautan dan a outlet router
  3. Anda mengkonfigurasi router di PREKUTINGMODULE
  4. Anda mengkonfigurasi router di StudentRoutingModule.
  5. Anda mendefinisikan rute sederhana sebagai rute pengalihan.
  6. Anda menggunakan Routerlink Arahan dalam elemen jangkar.

Akhirnya, Contoh Routing dan Sub Routing Angular telah selesai. Terima kasih telah mengambilnya.

Kode GitHub

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *