Angular 5.x 연구 노트 라우터 애플리케이션

이 글은 주로 Angular 5.x 학습 노트의 Router 애플리케이션을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가며 함께 살펴볼까요

서문:

Angular 앱 뷰 간의 점프는 Router(라우팅)에 따라 다릅니다. 이번 장에서는 Router의 적용에 대해 이야기하겠습니다

예제를 통한 설명

실행 결과는 다음과 같습니다. 홈(Home), 정보(About), 대시보드(Dashboard) 3개의 탐색 모음이 설정되어 있습니다. 해당 페이지로 점프하려면 다른 네비게이션 바를 클릭하십시오.

(1) **Angular Router 소개 **

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

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

1. (2) 라우팅 구성

2. 누가 했는지 기억하시나요? 구성 요소를 관리합니다. 예, 모듈로 관리됩니다. 따라서 새로 생성된 컴포넌트를 app.moudle에 도입하세요.

3. 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)
],

Declare Router Outlet

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'
   },

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

AJAX를 처음부터 배우기 위한 AJAX 프레임워크

AJAX를 처음부터 배우고 자동으로 확인된 양식 만들기

Ajax 요청 캐싱 처리 솔루션 가져오기

위 내용은 Angular 5.x 연구 노트 라우터 애플리케이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!