Angular 라우팅에 대한 완전한 가이드

Angular 7이 아직 익숙하지 않은 경우를 대비하여 이 인상적인 프론트엔드 프레임워크가 제공하는 모든 것에 더 가까이 다가가도록 하겠습니다. 다음과 같이 라우터와 관련된 다양한 개념을 보여주는 Angular 데모 앱을 안내해 드리겠습니다.

• 라우터 콘센트,
• 경로 및 경로,
• 항해.

또한 Angular CLI v7을 사용하여 Angular 라우터를 사용하여 라우팅 및 탐색을 구현하는 데모 프로젝트를 생성하는 방법도 보여 드리겠습니다. 하지만 먼저 Angular를 소개하고 최신 버전의 몇 가지 중요한 새 기능을 살펴보겠습니다.

Angular 7 소개

Angular는 모바일 및 데스크톱 웹용 클라이언트 측 웹 애플리케이션을 구축하기 위한 가장 인기 있는 프론트엔드 프레임워크 중 하나입니다. 각 구성 요소가 앱 UI의 일부를 제어하는 ​​격리되고 재사용 가능한 코드 조각인 구성 요소 기반 아키텍처를 따릅니다.

Angular의 구성 요소는 @Component 데코레이터로 장식된 TypeScript 클래스입니다. 구성 요소의 보기를 형성하는 첨부된 템플릿과 CSS 스타일시트가 있습니다.

Angular의 최신 버전인 Angular 7은 특히 다음과 같은 CLI 도구 및 성능의 새로운 기능과 함께 최근에 출시되었습니다.

• CLI 프롬프트: ng add 및 ng new 와 같은 일반적인 명령은 이제 사용자에게 라우팅 및 스타일시트 형식 등과 같은 프로젝트에 추가할 기능을 선택하라는 메시지를 표시할 수 있습니다.
  
• Angular Material CDK(Component DevKit)에 스크롤 추가.
• Angular Material CDK에 드래그 앤 드롭 지원 추가.
• 또한 프로젝트는 앱이 크기 제한을 초과할 때 개발자에게 경고하는 예산 번들을 사용하도록 기본 설정되어 있습니다. 기본적으로 크기가 2MB보다 크고 오류가 5MB이면 경고가 발생합니다. angular.json 파일에서 이러한 제한을 변경할 수도 있습니다. 등.
  

앵귤러 라우터 소개

Angular 라우터는 @angular/router 패키지에서 설치할 수 있는 Angular 코어 팀에서 구축 및 유지 관리하는 강력한 JavaScript 라우터입니다. 여러 라우터 콘센트, 다양한 경로 일치 전략, 경로 매개변수에 대한 쉬운 액세스 및 무단 액세스로부터 구성 요소를 보호하는 경로 가드를 가질 수 있는 완전한 라우팅 라이브러리를 제공합니다.

Angular 라우터는 Angular 플랫폼의 핵심 부분입니다. 이를 통해 개발자는 여러 보기가 있는 단일 페이지 응용 프로그램을 빌드하고 이러한 보기 사이를 탐색할 수 있습니다.

이제 필수 라우터 개념을 더 자세히 살펴보겠습니다.

라우터 아웃렛

Router-Outlet 은 라우터가 현재 브라우저의 URL을 기반으로 일치하는 구성 요소를 삽입하는 라우터 라이브러리에서 사용할 수 있는 지시문입니다. 고급 라우팅 시나리오를 구현할 수 있도록 Angular 애플리케이션에 여러 콘센트를 추가할 수 있습니다.

 <router-outlet></router-outlet>

라우터와 일치하는 모든 구성 요소는 라우터 콘센트의 형제로 렌더링합니다.

경로 및 경로

경로는 최소한 경로와 구성요소(또는 redirectTo 경로) 속성으로 구성된 정의(객체)입니다. 경로는 표시되어야 하는 고유한 보기를 결정하는 URL 부분을 나타내고 구성 요소는 경로와 연결되어야 하는 Angular 구성 요소를 나타냅니다. 정적 RouterModule.forRoot(routes) 메서드를 통해 제공하는 경로 정의에 따라 라우터는 사용자를 특정 보기로 이동할 수 있습니다.

각 Route 는 URL path 를 구성 요소에 매핑합니다.

경로는 응용 프로그램의 기본 경로를 나타내는 비어 있을 수 있으며 일반적으로 응용 프로그램의 시작입니다.

경로는 와일드카드 문자열( ** )을 사용할 수 있습니다. 라우터는 요청된 URL이 정의된 경로의 경로와 일치하지 않는 경우 이 경로를 선택합니다. 이것은 "찾을 수 없음" 보기를 표시하거나 일치하는 항목이 없는 경우 특정 보기로 리디렉션하는 데 사용할 수 있습니다.

다음은 경로의 예입니다.

 { path: 'contacts', component: ContactListComponent}

이 경로 정의가 라우터 구성에 제공되면 라우터는 웹 애플리케이션의 브라우저 URL이 /contacts 가 될 때 ContactListComponent 를 렌더링합니다.

경로 일치 전략

Angular 라우터는 다양한 경로 일치 전략을 제공합니다. 기본 전략은 단순히 현재 브라우저의 URL에 경로 접두사가 있는지 확인하는 것입니다.

예를 들어 이전 경로:

 { path: 'contacts', component: ContactListComponent}

다음과 같이 작성할 수도 있습니다.

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

patchMath 속성은 일치 전략을 지정합니다. 이 경우 기본값인 접두사 입니다.

두 번째 일치 전략이 가득 찼 습니다. 경로에 대해 지정되면 라우터는 경로가 현재 브라우저의 URL 경로와 정확히 같은지 확인합니다.

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

경로 매개변수

매개변수를 사용하여 경로를 생성하는 것은 웹 앱의 일반적인 기능입니다. Angular 라우터를 사용하면 다양한 방식으로 매개변수에 액세스할 수 있습니다.

• ActivatedRoute 서비스를 사용하여
• v4부터 사용 가능한 ParamMap 옵저버블 사용.

콜론 구문을 사용하여 경로 매개변수를 생성할 수 있습니다. 다음은 id 매개변수가 있는 예시 경로입니다.

 { path: 'contacts/:id', component: ContactDetailComponent}

루트 가드

경로 가드는 경로가 요청될 때 개발자가 일부 논리를 실행할 수 있도록 하는 Angular 라우터의 기능이며 해당 논리를 기반으로 경로에 대한 사용자 액세스를 허용하거나 거부합니다. 일반적으로 사용자가 페이지에 액세스하기 전에 로그인되어 있고 권한이 있는지 확인하는 데 사용됩니다.

@angular/router 패키지에서 사용할 수 있는 CanActivate 인터페이스를 구현하여 경로 가드를 추가하고 경로에 대한 액세스를 허용하거나 거부하는 논리를 보유하는 canActivate() 메서드를 확장할 수 있습니다. 예를 들어 다음 가드는 항상 경로에 대한 액세스를 허용합니다.

 class MyGuard implements CanActivate { canActivate() { return true; } }

그런 다음 canActivate 속성을 사용하여 가드로 경로를 보호할 수 있습니다.

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

탐색 지시문

Angular 라우터는 탐색 링크를 생성하기 위해 routerLink 지시문을 제공합니다. 이 지시문은 탐색할 구성 요소와 연결된 경로를 사용합니다. 예를 들어:

 <a [routerLink]="'/contacts'">Contacts</a>

다중 콘센트 및 보조 경로

Angular 라우터는 동일한 애플리케이션에서 여러 콘센트를 지원합니다.

구성 요소에는 하나의 연결된 기본 경로가 있고 보조 경로가 있을 수 있습니다. 보조 경로를 사용하면 개발자가 동시에 여러 경로를 탐색할 수 있습니다.

보조 경로를 생성하려면 보조 경로와 관련된 구성 요소가 표시될 명명된 라우터 콘센트가 필요합니다.

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• 이름이 없는 콘센트가 기본 콘센트입니다.
• 기본 콘센트를 제외한 모든 콘센트에는 이름이 있어야 합니다.

그런 다음 콘센트 속성을 사용하여 구성 요소를 렌더링할 콘센트를 지정할 수 있습니다.

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

Angular 7 데모 프로젝트 만들기

이 섹션에서는 Angular 라우터를 설정하고 사용하는 방법에 대한 실용적인 예를 볼 것입니다. 생성할 라이브 데모와 프로젝트의 GitHub 리포지토리를 볼 수 있습니다.

Angular CLI v7 설치

Angular CLI에는 Node 8.9+ , NPM 5.5.1+ 가 필요합니다. 시스템에 이러한 요구 사항이 설치되어 있는지 확인한 후 다음 명령을 실행하여 최신 버전의 Angular CLI를 설치해야 합니다.

 $ npm install -g @angular/cli

이렇게 하면 Angular CLI가 전역적으로 설치됩니다.

참고 : npm 구성에 따라 sudo 를 사용하여 패키지를 전역으로 설치할 수 있습니다.

Angular 7 프로젝트 만들기

새 프로젝트를 만드는 것은 하나의 명령으로 수행되며 다음 명령을 실행하기만 하면 됩니다.

 $ ng new angular7-router-demo

CLI는 라우팅을 추가할 것인지(라우팅을 수동으로 추가할 수 있는 방법을 볼 것이기 때문에 아니요에 N 입력)와 사용하려는 스타일시트 형식을 묻고 첫 번째 옵션인 CSS를 선택한 다음 Enter 키를 누릅니다. CLI는 필요한 파일로 폴더 구조를 만들고 프로젝트의 필수 종속성을 설치합니다.

가짜 백엔드 서비스 만들기

상호 작용할 실제 백엔드가 없기 때문에 Angular 데모 및 테스트를 위한 메모리 내 웹 API angular-in-memory-web-api 라이브러리를 사용하여 가짜 백엔드를 생성합니다. REST API를 통해 CRUD 작업을 에뮬레이트합니다.

원격 서버로 전송된 HttpClient 요청을 가로채 작동하고 생성해야 하는 로컬 메모리 내 데이터 저장소로 리디렉션합니다.

가짜 백엔드를 만들려면 다음 단계를 따라야 합니다.

1. 먼저 angular-in-memory-web-api 모듈을 설치합니다.
2. 다음으로 가짜 데이터를 반환하는 서비스를 만듭니다.
3. 마지막으로 가짜 백엔드를 사용하도록 애플리케이션을 구성합니다.

터미널에서 다음 명령을 실행하여 npm angular-in-memory-web-api 모듈을 설치합니다.

 $ npm install --save angular-in-memory-web-api

다음으로 다음을 사용하여 백엔드 서비스를 생성합니다.

 $ ng gs backend

src/app/backend.service.ts 파일을 열고 angular-in-memory-web-api 모듈에서 InMemoryDbService 를 가져옵니다.

 import {InMemoryDbService} from 'angular-in-memory-web-api'

서비스 클래스는 InMemoryDbService 를 구현한 다음 createDb() 메서드를 재정의해야 합니다.

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

우리는 단순히 연락처 배열을 만들고 반환합니다. 각 연락처에는 ID가 있어야 합니다.

마지막으로 InMemoryWebApiModule 을 app.module.ts 파일로 가져오고 가짜 백엔드 서비스를 제공하기만 하면 됩니다.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

다음으로 연락처 작업을 위한 코드를 캡슐화하는 ContactService 를 만듭니다.

 $ ng gs contact

src/app/contact.service.ts 파일을 열고 다음 코드와 유사하게 보이도록 업데이트합니다.

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

두 가지 방법을 추가했습니다.

• getContacts()
  모든 연락처를 가져오기 위해.
• getContact()
  아이디로 연락처를 받기 위해.

실제 백엔드를 사용하지 않을 것이기 때문에 API_URL 을 임의의 URL로 설정할 수 있습니다. 모든 요청은 가로채서 인메모리 백엔드로 전송됩니다.

각도 구성 요소 만들기

다양한 라우터 기능을 사용하는 방법을 보기 전에 먼저 프로젝트에서 여러 구성 요소를 만들어 보겠습니다.

터미널로 이동하여 다음 명령을 실행합니다.

 $ ng gc contact-list $ ng gc contact-detail

이렇게 하면 두 개의 ContactListComponent 및 ContactDetailComponent 구성 요소가 생성되어 기본 앱 모듈에 추가됩니다.

라우팅 설정

대부분의 경우 Angular CLI를 사용하여 라우팅 설정이 있는 프로젝트를 생성하지만 이 경우 Angular에서 라우팅이 작동하는 방식을 더 잘 알 수 있도록 수동으로 추가합니다.

라우팅 모듈 추가

애플리케이션 경로와 Angular가 브라우저의 현재 URL에 따라 현재 일치하는 구성 요소를 삽입할 라우터 콘센트를 포함할 AppRoutingModule 을 추가해야 합니다.

우리는 다음을 보게 될 것입니다:

• 라우팅을 위한 Angular 모듈을 만들고 가져오는 방법
• 다른 구성 요소에 경로를 추가하는 방법
• 라우터 콘센트를 추가하는 방법.

먼저 app-routing.module.ts 파일에서 라우팅 모듈을 생성하는 것으로 시작하겠습니다. src/app 내부에서 다음을 사용하여 파일을 만듭니다.

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

파일을 열고 다음 코드를 추가합니다.

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Angular 모듈을 만드는 데 사용되는 TypeScript 데코레이터인 @angular/core 패키지에서 NgModule 을 가져오는 것으로 시작합니다.

또한 @angular/router 패키지에서 RouterModule 및 Routes 클래스를 가져옵니다. RouterModule 은 구성 개체를 라우터에 전달하기 위해 RouterModule.forRoot() 와 같은 정적 메서드를 제공합니다.

다음으로 각 경로에 대한 정보를 보유하는 데 사용할 Routes 유형의 상수 routes 배열을 정의합니다.

마지막으로 AppRoutingModule (원하는 대로 호출할 수 있음)이라는 모듈을 만들고 내보냅니다. 이 모듈은 일부 메타 정보 개체를 사용하는 @NgModule 데코레이터로 장식된 TypeScript 클래스입니다. 이 개체의 imports 속성에서 경로 배열을 매개변수로 사용하여 정적 RouterModule.forRoot(routes) 메서드를 호출합니다. exports 배열에서 RouterModule 을 추가합니다.

라우팅 모듈 가져오기

다음으로 이 모듈 라우팅을 src/app/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'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

AppRoutingModule 에서 ./app-routing.module 을 가져와 메인 모듈의 imports 배열에 추가합니다.

라우터 콘센트 추가

마지막으로 라우터 콘센트를 추가해야 합니다. 기본 앱 템플릿이 포함된 src/app/app.component.html 파일을 열고 <router-outlet> 구성 요소를 추가합니다.

 <router-outlet></router-outlet>

여기에서 Angular 라우터가 현재 브라우저의 경로에 해당하는 구성 요소를 렌더링합니다.

이것이 Angular 프로젝트 내에서 수동으로 라우팅을 설정하기 위해 따라야 하는 모든 단계입니다.

경로 생성

이제 두 구성 요소에 경로를 추가해 보겠습니다. src/app/app-routing.module.ts 파일을 열고 다음 경로를 routes 배열에 추가합니다.

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

라우팅 모듈에서 두 가지 구성 요소를 가져와야 합니다.

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

이제 /contacts 및 contact/:id 경로에서 두 구성 요소에 액세스할 수 있습니다.

탐색 링크 추가

다음으로 routerLink 지시문을 사용하여 앱 템플릿에 탐색 링크를 추가해 보겠습니다. src/app/app.component.html 을 열고 라우터 콘센트 위에 다음 코드를 추가합니다.

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

다음으로 ContactListComponent 에 연락처 목록을 표시해야 합니다. src/app/contact-list.component.ts 를 열고 다음 코드를 추가합니다.

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

연락처를 보관할 contacts 배열을 만듭니다. 다음으로 ContactService 를 주입하고 인스턴스의 getContacts() 메서드를 호출하여( ngOnInit 수명 주기 이벤트에서) 연락처를 가져와 contacts 배열에 할당합니다.

다음으로 src/app/contact-list/contact-list.component.html 파일을 열고 다음을 추가합니다.

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

연락처를 반복하여 각 연락처의 이름과 이메일을 표시합니다. 또한 routerLink 지시문을 사용하여 각 연락처의 세부 정보 구성 요소에 대한 링크를 만듭니다.

다음은 구성 요소의 스크린샷입니다.

세부 정보로 이동 링크를 클릭하면 ContactDetailsComponent 로 이동합니다. 라우트에는 id 매개변수가 있습니다. 컴포넌트에서 액세스하는 방법을 살펴보겠습니다.

src/app/contact-detail/contact-detail.component.ts 파일을 열고 코드를 다음 코드와 유사하게 변경합니다.

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

ContactService 와 ActivatedRoute 를 컴포넌트에 주입합니다. ngOnInit() 수명 주기 이벤트에서 경로에서 전달될 id 매개 변수를 검색하고 이를 사용하여 contact 개체에 할당한 연락처 세부 정보를 가져옵니다.

src/app/contact-detail/contact-detail.component.html 파일을 열고 다음을 추가합니다.

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

127.0.0.1:4200/ 에서 애플리케이션을 처음 방문할 때 콘센트는 구성 요소를 렌더링하지 않으므로 다음 경로를 route 배열에 추가하여 빈 경로를 contacts 경로로 리디렉션합니다.

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

우리는 정확한 빈 경로와 일치하기를 원하기 때문에 전체 일치 전략을 지정합니다.

결론

이 자습서에서는 Angular 라우터를 사용하여 애플리케이션에 라우팅 및 탐색을 추가하는 방법을 살펴보았습니다. 라우터 콘센트, 경로 및 경로와 같은 다양한 개념을 살펴보았고 실제로 다양한 개념을 보여주기 위해 데모를 만들었습니다. 이 저장소에서 코드에 액세스할 수 있습니다.