angular cli 를 사용하여 TODO 응용 프로그램을 초기화하십시오
개별 토도를 나타내는 TODO 클래스를 만듭니다
tododataservice 서비스를 작성하여 Todos를 만들고 업데이트 및 제거하십시오.
appComponent 구성 요소를 사용하여 사용자 인터페이스 를 표시하십시오
github pages <span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-3
</span><span>npm install
</span>ng serve
로그인 후 복사
로그인 후 복사
로그인 후 복사
두 번째 기사에서, 우리는 appcomponent를 리팩토링하여 대부분의 작업을 다음과 같이 위임했습니다.
todolistcomponent는 Todos import { NgModule } from '@angular/core';
<span>import { RouterModule, Routes } from '@angular/router';
</span>import { AppComponent } from './app.component';
const routes: Routes = [
{
path: '',
redirectTo: 'todos',
pathMatch: 'full'
},
{
path: 'todos',
component: AppComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule {
}
목록을 표시합니다
adolistitemcomponent가 단일 할 일을 표시하려면 입니다
TodolistheAderComponent가 새로운 TODO 를 만듭니다
todolistfootercomponent는 얼마나 많은 토르 도가 남았는지를 보여줍니다
<span>import { RouterModule, Routes } from '@angular/router';
</span>로그인 후 복사
Mock REST API 백엔드를 만듭니다
API URL을 환경 변수로 저장하십시오
나머지 api
와 통신하기 위해 애비서를 만듭니다
새로운 Apiservice const routes: Routes = [
{
path: '',
redirectTo: 'todos',
pathMatch: 'full'
},
{
path: 'todos',
component: AppComponent
}
];
를 사용하려면 Tododataservice를 업데이트하십시오
비동기 API 호출을 처리하려면 appComponent를 업데이트하십시오
단위 테스트를 실행할 때 실제 HTTP 호출을 피하기 위해 apimockservice를 만듭니다.
이 네 번째 기사에서 우리는 다음과 같이 배웠습니다
애플리케이션이 라우팅이 필요한 이유
javaScript 라우터는 입니다
각도 라우터가 무엇인지, 작동 방식 및 당신을 위해 할 수있는 일
각도 라우터를 설정하고 응용 프로그램에 대한 경로를 구성하는 방법
각도 라우터를 알리는 방법 에 구성 요소를 배치 할 위치
알 수없는 URL을 우아하게 처리하는 방법 -
angular 라우터를 사용하여 데이터를 해결하도록하는 방법.
이 기사의 모든 코드는 github에서 볼 수 있습니다
파트 5에서는 응용 프로그램에 대한 무단 액세스를 방지하기 위해 인증을 구현할 것입니다.
그러니 더 많은 것을 계속 지켜봐 주시면 언제나 그렇듯이 의견에 당신의 생각과 질문을 남겨 두십시오!
권장 코스
-
Angular 및 TypeScript를위한 온라인 과정
토드 모토
개인 및 팀을위한 전문가 주도 온라인 AngularJS, Angular 및 Typecript 교육 과정. 결제시 쿠폰 코드 'itepoint'를 사용하여 25% 할인됩니다.
각도 라우터를 사용한 구성 요소 라우팅에 대한 자주 묻는 질문 (FAQ)
웹 개발에서 각도 라우터의 중요성은 무엇입니까?
Angular 라우터는 웹 개발에 중요한 역할을합니다. 단일 페이지 응용 프로그램 (SPA)을 만들 수 있습니다. SPA는 전체 새 페이지를로드하는 브라우저의 기본 메소드 대신 웹 서버의 새로운 데이터로 현재 웹 페이지를 동적으로 다시 작성하여 사용자와 상호 작용하는 웹 응용 프로그램 또는 웹 사이트입니다. 필요한 컨텐츠 만 업데이트되므로 더 빠르고 완벽한 사용자 경험으로 이어집니다. Angular Router는 다른 응용 프로그램 상태 중에서 내비게이션 경로를 정의하는 데 도움이되고 상태 전환을 관리합니다. - 각도 라우터는 404 오류 또는 잘못된 URL을 어떻게 처리합니까?
Angular Router는 WildCard 라우팅이라는 기능을 제공합니다. 알려지지 않았거나 잘못된 URL을 처리합니다. 라우터가 사전 정의 된 경로와 일치하지 않는 URL을 만나면 '404 찾기'페이지 또는 기타 폴백 페이지로 리디렉션 할 수 있습니다. 이것은 경로와 함께 경로를 정의하고 원하는 구성 요소와 연관시켜 달성됩니다. - 각도 라우터의 경로간에 데이터를 전달할 수 있습니까?
- 예, 각도 라우터가 통과 할 수 있습니다. 경로 매개 변수라는 기능을 사용하는 경로 간 데이터. 경로 매개 변수는 변경할 수있는 URL의 일부이며 구성 요소에서 값을 사용하여 콘텐츠를 동적으로 표시하거나 동작을 결정할 수 있습니다. 이것은 목록의 항목의 세부 사항보기로 탐색하려는 경우에 특히 유용합니다.
. 각도 라우터를 사용하여 응용 프로그램의 특정 경로를 보호하려면 어떻게해야합니까? Angular Router는 응용 프로그램의 특정 경로를 보호하기 위해 Route Guards라는 기능을 제공합니다. 루트 가드는 라우터에 요청 된 경로로의 탐색을 허용할지 여부를 알 수있는 인터페이스입니다. 사용자 인증, 역할 기반 액세스 제어 또는 기타 사용자 지정 기준에 따라 액세스를 제어하는 데 사용할 수 있습니다.
각도 라우터는 브라우저 기록 및 뒤로 버튼 기능을 어떻게 처리합니까?
Angular Router 위치 서비스를 통해 브라우저의 기록과 상호 작용합니다. HTML5 히스토리 API를 사용하여 전체 페이지 재 장전을 일으키지 않고 URL을 변경합니다. 이것은 브라우저의 뒷면 및 전방 버튼이 예상대로 작동한다는 것을 의미합니다. 응용 프로그램 상태를 탐색 할 수 있습니다. 각도 라우터가있는로드 모듈을 게으른로드 모듈을 할 수 있습니까? 모듈의. 즉, 응용 프로그램의 특정 모듈은 애플리케이션의 초기 부하가 아닌 주문형에서로드 될 수 있습니다. 이것은 애플리케이션의 초기 부하 성능을 크게 향상시킬 수 있습니다.
각도 라우터에서 라우팅 문제를 디버그하는 방법은 무엇입니까?
Angular Router 라우팅 동작. 이러한 이벤트에는 내비게이션 시작, 내비게이션 엔드, 경로 인식 및 기타 여러 가지가 포함됩니다. 이러한 이벤트를 구독하면 라우팅 프로세스에 대한 자세한 정보를 얻을 수 있습니다. 각도 라우터에서 중첩 경로를 사용할 수 있습니까?
예, 각도 라우터는 자식 경로라고도 알려진 중첩 경로를지지합니다. . 이를 통해 특정 경로에는 하위 경로가있는보다 복잡한 내비게이션 구조를 만들 수 있습니다. 이것은 계층 적 항법 구조를 만드는 데 특히 유용합니다.
앵글 라우터에서 경로 전환을 어떻게 애니메이션 할 수 있습니까? Angular 라우터를 사용하면 Angular의 애니메이션 라이브러리를 사용하여 경로 전환을 애니메이션 할 수 있습니다. 이것은 애플리케이션의 여러 상태간에 시각적으로 매력적인 전환을 만들어 사용자 경험을 향상시키는 데 사용될 수 있습니다.
각도 라우터에서 더 빠른 탐색을 위해 모듈을 예압 할 수 있습니까?
예, Angular Router는 A를 제공합니다. 예압 전략이라고하는 기능. 이는 애플리케이션의 초기로드 후 특정 모듈을 백그라운드에로드 할 수 있음을 의미합니다. 모듈이 필요할 때 이미로드되었으므로 응용 프로그램의 내비게이션 속도를 크게 향상시킬 수 있습니다.
이것은 각도 CLI로 CRUD 앱을 만드는 방법에 대한 SitePoint Angular 2 튜토리얼의 4 부입니다. 이 기사에서는 각도 라우터를 소개하고 브라우저 URL이 변경 될 때 응용 프로그램을 업데이트 할 수있는 방법을 배우고 그 반대도 마찬가지입니다. 또한 라우터를 사용하여 백엔드 API의 데이터를 해결하기 위해 응용 프로그램을 업데이트하는 방법을 배울 것입니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
