Angular에서 라우터 애플리케이션을 사용하는 방법

이번에는 Angular에서 Router(라우팅) 애플리케이션을 사용하는 방법과 Angular에서 Router(라우팅) 애플리케이션을 사용할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다.

서문:

라우터에 따라 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS를 사용하여 HTML 태그를 동적으로 추가하는 방법

React Router v4를 처음부터 사용하기

위 내용은 Angular에서 라우터 애플리케이션을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!