각도 라우팅 실제 사례 적용

이번에는 Angular 라우팅의 실제 적용 사례를 가져왔습니다. Angular 라우팅을 사용할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

서문:

라우터에 따라 Angular 앱 뷰 간의 점프가 달라집니다. 이번 장에서는 Router의 적용에 대해 이야기하겠습니다.

예제를 통한 설명

실행 결과는 다음과 같습니다. 홈(Home), 정보(About), 대시보드(Dashboard) 3개의 탐색 모음이 설정되어 있습니다. 해당 페이지로 이동하려면 다른 탐색 모음을 클릭하세요.

3개의 구성 요소 만들기

1. ng g c home

2. ng g c about

3. ng g c 대시보드

라우팅 및 구성

(1) **Angular Router 소개 **

Angular Router를 사용할 때 다음과 같이 RouterModule을 도입해야 합니다.

// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
 BrowserModule, RouterModule
],

(2) 라우팅 구성

구성 요소를 누가 관리하는지 아직도 기억하시나요? 모듈별로. 따라서 새로 생성된 컴포넌트를 app.moudle에 도입하세요.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';

팁: 컴포넌트의 경로에 주의하세요. 관리의 용이성을 위해 새로 생성된 컴포넌트를 컴포넌트 폴더로 옮겼습니다.

라우터 구성 파일 만들기

앱 디렉터리에 routerConfig.ts 파일을 만듭니다. 코드는 다음과 같습니다.

import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
 { path: 'home', 
 component: HomeComponent 
 },
 {
 path: 'about',
 component: AboutComponent
 },
 { path: 'dashboard',
 component: DashboardComponent
 }
];

참고: Angular 2.X 이상에서는 JavaScript 대신 TypeScript를 사용하여 코드를 작성하기 시작하므로 파일 접미사는 js 대신 ts입니다.

이 routerConfigue 파일을 호출하는 방법은 무엇입니까? app.moudle.ts는 전체 Angular 앱의 입구이기 때문에 app.module.ts에 로드해야 합니다.

// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
 BrowserModule,
 RouterModule.forRoot(appRoutes)
],

라우터 아웃렛 선언

app.comComponent.html 파일에 다음 코드를 추가하세요:

<p style="text-align:center">
 <h1>
  {{title}}!!
 </h1>
 <nav>
  <a routerLink="home" routerLinkActive="active">Home</a>
  <a routerLink="about">About</a>
  <a routerLink="dashboard">Dashboard</a>
 </nav>
 <router-outlet></router-outlet>
 </p>

Run

프로젝트가 있는 경로를 입력하고

ng serve --open

webpack이 성공적으로 컴파일되면 실행하세요. , 브라우저 주소 표시줄에 http://localhost:4200

를 입력하면 이 문서의 시작 부분에서 결과를 볼 수 있습니다.

Router에 대한 또 다른 작성 방법:

app.moudle.ts 파일에서 코드는 다음과 같습니다.

 imports: [
  BrowserModule,
  RouterModule.forRoot(
  [
   { path: 'home', 
   component: HomeComponent 
   },
   {
   path: 'about',
   component: AboutComponent
   },
   {
   path: 'dashboard',
   component: DashboardComponent
   }
  ]
  )
 ],

이렇게 하면 별도의 routerConfigure.ts 파일을 만들 필요가 없습니다.

요약

컴포넌트 지향(컴포넌트) 도입 이후 라우팅 관리가 AngularJS(1.X)보다 훨씬 편리해졌습니다.

추가 최적화:

아마도 http://localhost:4200에 액세스할 때 경로가 "/"여야 하고 이 기본 경로를 설정해야 한다는 점을 눈치채셨을 것입니다.

{
   path: '',
   redirectTo:'/home',
   pathMatch: 'full'
   },

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue+props를 사용하여 데이터를 전송하는 방법

BubbleTransition 실제 사례 자세한 설명

위 내용은 각도 라우팅 실제 사례 적용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!