Angular 및 RXJS : REST API 백엔드 추가

이 기사는 각도 CLI를 사용하여 CRUD 앱을 만드는 방법에 대한 SitePoint Angular 2 튜토리얼의 3 부입니다. 이 기사에서는 REST API 백엔드와 통신하기 위해 응용 프로그램을 업데이트합니다.

단계별 비디오 과정을 사용하여 Angular를 배우는 것을 선호합니까? Sitepoint Premium에서 angular 5

를 확인하십시오 파트 1에서는 Todo 신청서를 실행하고 실행하고 GitHub 페이지에 배포하는 방법을 배웠습니다. 이것은 잘 작동했지만 불행히도 전체 앱은 단일 구성 요소로 가득 차있었습니다.

. 2 부에서는보다 모듈 식 구성 요소 아키텍처를 검사 하고이 단일 구성 요소를 이해하고 재사용하고 유지하기가 더 쉬운 작은 구성 요소의 구조화 된 트리로 분해하는 방법을 배웠습니다. Part 0 - 궁극적 인 각도 CLI 참조 안내서 1 부 - TODO 응용 프로그램의 첫 번째 버전을 업데서 및 실행하는 2 부 - Todos 목록과 단일 Todo 를 표시하기 위해 별도의 구성 요소 생성 3 부 - REST API BACK END와 통신하기 위해 TODO 서비스를 업데이트하십시오 파트 4 - 각도 라우터를 사용하여 데이터를 해결합니다 5 부 - 개인 내용을 보호하기 위해 인증을 추가하십시오 6 부 - 각도 프로젝트를 최신 버전으로 업데이트하는 방법.

당신은이 튜토리얼 중 1 개와 2 개를 이해하기 위해 3 부를 따를 필요가 없습니다. REPO 사본을 잡고 2 부에서 코드를 체크 아웃 한 후 시작점으로 사용할 수 있습니다. 이것은 아래에 더 자세히 설명되어 있습니다.

1. 키 테이크 아웃
REST API와 통신 할 때 비동기 HTTP 요청을 효과적으로 처리하기 위해 Angular의 httpclient를 RXJS와 함께 사용합니다. 환경 변수에 API URL을 저장하여 코드를 변경하지 않고 개발 및 생산 환경 사이를 원활하게 전환합니다. 적절한 HTTP 방법을 사용하여 나머지 API와 상호 작용하기 위해 getAlltodos, CreateTodo 및 Deletetodo와 같은 Apiservice 방법을 구현합니다. 메모리 내 스토리지에서 데이터 운영을 위해 Apiservice를 활용하여 전이 TodaDataservice, 관찰 가능성이있는 비동기 패턴에 적응합니다.

apiservice에 의해 반환 된 관찰 가능한 관찰 에너지를 관리하기 위해 appcomponent를 업데이트하여 구성 요소가 데이터 변경에 비동기 적으로 반응하는지 확인합니다. 단위 테스트를 위해 ApimockService를 소개하여 실제 HTTP 요청없이 Apiservice의 시뮬레이션을 허용하여 테스트 신뢰성 및 독립성을 보장합니다. Apiservice와 같은 필요한 서비스를 포함시키고 비동기 테스트 시나리오를 효과적으로 포함하도록 각도 응용 프로그램 테스트 설정 구성.

2. 빠른 요약
다음은 2 부의 끝에서 우리의 응용 프로그램 아키텍처가 보이는 것입니다 :
4. 현재, Tododataservice는 모든 데이터를 메모리에 저장합니다. 이 세 번째 기사에서는 응용 프로그램을 업데이트하여 REST API 백엔드와 통신합니다. 우리는 다음과 같습니다 :
   Mock REST API 백엔드를 만듭니다 API URL을 환경 변수로 저장하십시오 REST API BACK END와 통신하기 위해 APISERVICE를 만듭니다. 새로운 Apiservice 를 사용하려면 Tododataservice를 업데이트하십시오 비동기 API 호출을 처리하려면 appComponent를 업데이트하십시오 단위 테스트를 실행할 때 실제 HTTP 호출을 피하기 위해 apimockservice를 만듭니다.
• 이 기사가 끝날 무렵, 당신은 다음을 이해할 것입니다 :
환경 변수를 사용하여 애플리케이션 설정을 저장하는 방법
• angular http 클라이언트를 사용하여 HTTP 요청을 수행하는 방법
angular http 클라이언트가 반환하는 관찰 가능성을 다룰 수있는 방법 단위 테스트를 실행할 때 실제 HTTP 요청을 피하기 위해 HTTP 호출을 조롱하는 방법. 그래서, 시작하자! UP 및 실행
• 최신 버전의 Angular CLI가 설치되어 있는지 확인하십시오. 그렇지 않은 경우 다음 명령으로 설치할 수 있습니다.
이전 버전의 Angular CLI를 제거 해야하는 경우 다음과 같이 할 수 있습니다.
• 그 후 2 부에서 코드 사본이 필요합니다. 이것은 Github에서 사용할 수 있습니다. 이 시리즈의 각 기사에는 저장소에 해당 태그가있어 응용 프로그램의 다른 상태를 앞뒤로 전환 할 수 있습니다. 우리가 파트 2에서 끝나고이 기사에서 시작한 코드는 Part-2로 태그됩니다. 이 기사를 끝내는 코드는 Part-3으로 태그가 지정됩니다.
• 특정 커밋 ID에 대한 별명과 같은 태그를 생각할 수 있습니다. GIT 체크 아웃을 사용하여 그들 사이를 전환 할 수 있습니다. 당신은 여기에서 더 많이 읽을 수 있습니다.
그래서 일어나서 실행하기 위해 (angular cli의 최신 버전) 우리는 이것을 할 것입니다 : .

그런 다음 http : // localhost : 4200/을 방문하십시오. 모든 것이 잘되면 Working Todo 앱을 볼 수 있습니다. REST API BACK END 설정 JSON-SERVER를 사용하여 모의 백엔드를 신속하게 설정합시다. 응용 프로그램의 루트에서 실행 :

다음으로, 응용 프로그램의 루트 디렉토리에서 다음 내용이있는 db.json이라는 파일을 만듭니다.

마지막으로, backend를 시작하려면 package.json에 스크립트를 추가하십시오.

이제 우리는 다음을 사용하여 REST API 백엔드를 시작할 수 있습니다.
이것은 다음을 표시해야합니다
• 그게 다야! 우리는 이제 포트 3000에서 REST API 백엔드를 듣고 있습니다.
백엔드가 예상대로 실행 중인지 확인하려면 브라우저를 http : // localhost : 3000. 로 탐색 할 수 있습니다.

다음 엔드 포인트가 지원됩니다

get /todos : 기존의 모든 Todos를 얻으십시오
• get /todos /: id : 기존 TODO 를 가져옵니다 post /todos : 새로운 Todo를 만듭니다
• put /todos /: id : 기존 TODO 를 업데이트하십시오 delete /todos /: id : 기존 할 일을 삭제하십시오
따라서 브라우저를 http : // localhost : 3000/todos로 탐색하면 db.json의 모든 Todos와 함께 JSON 응답이 표시됩니다. JSON-SERVER에 대해 자세히 알아 보려면 JSON-Server를 사용하여 Mock Rest API를 확인하십시오. api url 저장 이제 우리는 백엔드를 제자리에 설치 했으므로 각도 응용 프로그램에 URL을 저장해야합니다. 이상적으로는, 우리는 이것을 할 수 있어야합니다 :
• 값을 변경해야 할 때만 한 번만 변경해야하므로 URL을 단일 장소에 저장하십시오. 개발 중에 응용 프로그램을 개발 API에 연결하고 생산 API에 연결하십시오.
운 좋게도 각도 CLI는 환경을 지원합니다. 기본적으로 SRC/Environments/Environment.ts 및 'SRC/Environments/Environment.Prod.ts. API URL을 두 파일 모두에 추가하겠습니다

이것은 나중에 다음을 수행하여 Angular Application에서 환경에서 API URL을 얻을 수있게 해줄 것입니다.

우리가 ng serve 또는 ng build를 실행할 때, Angular CLI는 개발 환경 (src/환경/환경)에 지정된 값을 사용합니다. 그러나 우리가 ng serve -Environment prod 또는 ng build -Environment prod를 실행할 때, Angular Cli는 src/환경/환경에 지정된 값을 사용합니다. 이것은 코드를 변경하지 않고 개발 및 생산에 다른 API URL을 사용하는 데 필요한 것입니다. 이 기사 시리즈의 응용 프로그램은 생산에서 호스팅되지 않으므로 개발 및 생산 환경에서 동일한 API URL을 지정합니다. 이를 통해 우리는 NG Serve (Environment Prod 또는 Ng Build -Environment Prod를 로컬로 운영 할 수 있습니다. dev와 prod와 해당 환경 파일 사이의 매핑을 찾을 수 있습니다.

키를 추가하여 스테이징과 같은 추가 환경을 만들 수도 있습니다.

및 해당 환경 파일 생성.

각도 CLI 환경에 대해 자세히 알아 보려면 궁극적 인 각도 CLI 참조 안내서를 확인하십시오. 이제 우리는 환경에 API URL이 저장되어 있으므로 나머지 API 백엔드와 통신하기 위해 각도 서비스를 만들 수 있습니다.

. REST API BACK END와 통신 할 수있는 서비스 생성

Angular CLI를 사용하여 REST API Back End와 통신하기 위해 Apiservice를 만들어 봅시다.

이것은 다음과 같은 출력을 제공합니다

<span>npm install -g @angular/cli@latest
</span>

-module app.module.ts 옵션은 Angular CLI에 서비스를 생성 할뿐만 아니라 app.module.ts. src/app/api.service.ts : 를 열어 보자

다음으로, 우리는 환경과 Angular의 내장 HTTP 서비스를 주입합니다.

필요한 방법을 구현하기 전에 Angular의 HTTP 서비스를 살펴 보겠습니다.

구문에 익숙하지 않은 경우 프리미엄 코스를 구입하여 TypeScript를 소개하십시오. 각도 HTTP 서비스 Angular HTTP 서비스는 @Angular/http에서 주사 가능한 클래스로 제공됩니다. 는 XHR/JSONP 위에 구축되었으며 Angular 응용 프로그램 내에서 HTTP 요청을 할 수있는 HTTP 클라이언트를 제공합니다.

http 요청을 수행하기 위해 다음 방법을 사용할 수 있습니다

npm uninstall -g @angular/cli angular-cli
npm cache clean
<span>npm install -g @angular/cli@latest
</span>

delete (url, 옵션) : 삭제 요청 를 수행하십시오 get (url, 옵션) : get 요청을 수행하십시오 head (URL, 옵션) : 헤드 요청을 수행 를 수행하십시오 패치 (URL, 본문, 옵션) : 패치 요청을 수행 post (url, body, 옵션) : 게시물 요청 를 수행하십시오 put (url, body, 옵션) : 풋 요청을 수행하십시오.

이러한 각 방법 각각은 RXJS를 관찰 할 수 있습니다 약속을 반환 한 Angularjs 1.x HTTP 서비스 방법과 달리 각도 HTTP 서비스 방법은 관찰 가능성을 반환합니다. RXJS Observables에 아직 익숙하지 않더라도 걱정하지 마십시오. 응용 프로그램을 시작하고 실행하기 위해서만 기본 사항 만 있으면됩니다. 응용 프로그램이 필요할 때 사용 가능한 운영자에 대해 점차적으로 더 배울 수 있으며 Reactivex 웹 사이트는 환상적인 문서를 제공합니다.

<span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
</span><span>cd angular-todo-app
</span><span>git checkout part-2
</span><span>npm install
</span>ng serve

관찰 가능성에 대해 더 많이 배우려면 RXJS를 사용한 기능적 반응 프로그래밍에 대한 SitePoint의 소개를 확인하는 것이 좋습니다. apiservice 메소드 구현 우리가 엔드 포인트를 다시 생각하면 우리의 REST API Back End는 다음을 노출시킵니다.
get /todos : 기존의 모든 토 도스를 받으

get /todos /: id : 기존할만한 일을 받으

Post /Todos : 새로운 TODO를 만듭니다

put /todos /: id : 기존 할 일을 업데이트

삭제 /todos /: id : 기존 TODO 삭제

우리는 이미 필요한 방법의 대략적인 개요와 해당 각도 HTTP 방법을 생성 할 수 있습니다.

각 방법을 자세히 살펴 보겠습니다.

getAllTodos () getAllTodos () 메소드를 사용하면 API에서 모든 Todos를 얻을 수 있습니다.
먼저, 우리는 API에서 모든 토르도를 얻기 위해 GET 요청을합니다.
• 이것은 관찰 가능한 것을 반환합니다. 그런 다음 API의 응답을 TODO 객체의 배열로 변환하기 위해 Observable의 Map () 메소드를 호출합니다.

  <span>npm install -g @angular/cli@latest
  </span>

  들어오는 HTTP 응답은 문자열이므로 먼저 response.json ()을 호출하여 JSON 문자열을 해당 JavaScript 값으로 구문 분석합니다.

  그런 다음 API 응답의 토도를 반복하고 TODO 인스턴스의 배열을 반환합니다. 이 두 번째 Map () 사용은 rxjs 연산자가 아닌 Array.prototype.map ()을 사용하고 있습니다. 마지막으로, 우리는 콘솔에 잠재적 오류를 기록하기 위해 오류 핸들러를 연결합니다.

  우리는 별도의 메소드에서 오류 핸들러를 정의하여 다른 방법으로 재사용 할 수 있습니다.

  이 코드를 실행하기 전에 RXJS 라이브러리에서 필요한 종속성을 가져와야합니다.

  RXJS 라이브러리는 엄청납니다. 'rxjs/rx'에서 import *를 RX로 사용하여 전체 RXJS 라이브러리를 가져 오는 대신 필요한 부분 만 가져 오는 것이 좋습니다. 이렇게하면 결과 코드 번들의 크기가 최소로 줄어 듭니다. 우리의 응용 프로그램에서 우리는 관찰 가능한 클래스를 가져옵니다 :

  우리는 코드가 요구하는 세 개의 연산자를 가져옵니다

  가져 오기 연산자는 관찰 가능한 인스턴스에 해당 메소드가 첨부되어 있는지 확인합니다. 코드에 'rxjs/add/operator/map'가져 오기가 없다면 다음은 작동하지 않습니다.

  npm uninstall -g @angular/cli angular-cli
  npm cache clean
  <span>npm install -g @angular/cli@latest
  </span>

  이것은 this.http.get에 의해 반환 된 관찰 가능한 것이 map () 메소드가 없기 때문입니다. 우리는 응용 프로그램에서 전 세계적으로 해당 관찰 가능한 방법을 가능하게하기 위해 연산자를 한 번만 가져와야합니다. 그러나 두 번 이상 가져 오는 것은 문제가되지 않으며 결과 번들 크기를 증가시키지 않습니다. gettododododyid () gettodododyid () 메소드를 사용하면 단일 할 일을 얻을 수 있습니다.

  우리는 응용 프로그램 에서이 방법이 필요하지 않지만 그것이 어떻게 생겼는지에 대한 아이디어를 제공하기 위해 포함되어 있습니다. createTodo () CreateTodo () 메소드를 사용하면 새로운 TODO를 만들 수 있습니다.

  우리는 먼저 API에 대한 사후 요청을 수행하고 두 번째 인수로 데이터를 전달합니다.

  <span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
  </span><span>cd angular-todo-app
  </span><span>git checkout part-2
  </span><span>npm install
  </span>ng serve
  

  그런 다음 응답을 TODO 객체로 변환합니다

  updatetodo () updatetodo () 메소드를 사용하면 단일 할 일을 업데이트 할 수 있습니다.

  우리는 먼저 API에 풋 요청을 수행하고 두 번째 인수로 데이터를 전달합니다.

  <span>npm install json-server --save
  </span>

  그런 다음 응답을 TODO 객체로 변환합니다

  deletetodobyid () deletetodobyid () 메소드를 사용하면 단일 할 일을 삭제할 수 있습니다.

  우리는 먼저 API에 대한 삭제 요청을 수행합니다 :

  그런 다음 응답을 null : 로 변환합니다

  우리는 실제로 여기서 응답을 변형 할 필요가 없으며이 줄을 떠날 수 있습니다. 삭제 요청을 수행 할 때 API가 데이터를 반환하는 경우 응답을 처리 할 수있는 방법에 대한 아이디어를 제공하기 위해 포함되어 있습니다. 다음은 APISERVICE의 전체 코드입니다 :

  <span>npm install -g @angular/cli@latest
  </span>

  이제 우리는 Apiservice를 확보 했으므로 TododataService가 REST API Back End와 의사 소통 할 수 있도록 사용할 수 있습니다.

  . TODODATASERVICE 업데이트 현재 Tododataservice는 모든 데이터를 메모리에 저장합니다

  우리의 Tododataservice가 우리의 REST API 백엔드와 의사 소통하도록하려면, 우리는 새로운 Apiservice를 주입해야합니다.

  우리는 또한 모든 작업을 Apiservice의 해당 방법에 위임하는 방법을 업데이트합니다.

  우리의 새로운 메소드 구현은 이제 데이터 로직이 나머지 API 백엔드에 의해 처리되기 때문에 훨씬 간단하게 보입니다. 그러나 중요한 차이가 있습니다. 이전 방법에는 동기 코드가 포함되어 있으며 즉시 값을 반환했습니다. 업데이트 된 방법에는 비동기 코드가 포함되어 있으며 관찰 가능한 것을 반환합니다. 이것은 관찰 가능성을 올바르게 처리하기 위해 Tododataservice 메소드를 호출하는 코드를 업데이트해야한다는 것을 의미합니다. appComponent 업데이트 현재, AppComponent는 Tododataservice가 JavaScript 객체와 배열을 직접 반환 할 것으로 예상합니다.

  그러나 우리의 새로운 apiservice 방법을 반환합니다 약속과 유사하게 관찰 가능성은 본질적으로 비동기식이므로, 우리는 그에 따라 관찰 가능한 응답을 처리하기 위해 코드를 업데이트해야합니다. 우리가 현재 get todos ()에서 tododataservice.getalltodos () 메소드를 호출하는 경우 :

  tododataservice.getalltodos () 메소드는 해당 apiservice.getalltodos () 메소드를 호출합니다

  npm uninstall -g @angular/cli angular-cli
  npm cache clean
  <span>npm install -g @angular/cli@latest
  </span>

  이것은 차례로 각도 HTTP 서비스에 HTTP get 요청을 수행하도록 지시합니다.

  그러나 우리가 기억해야 할 중요한 것은 하나가 있습니다!

  우리는 다음과 같이 반환 된 관찰 가능한 것을 구독하지 않는 한 :

  <span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
  </span><span>cd angular-todo-app
  </span><span>git checkout part-2
  </span><span>npm install
  </span>ng serve
  

  실제 HTTP 요청은 없습니다 관찰 가능한 것을 구독하려면 Subscribe () 메소드를 사용할 수 있습니다.

  <:> onnext : 관찰 가능한 사람이 새로운 값을 방출 할 때 호출되는 함수 <: :> onerror : 관찰 가능한 오류를 던질 때 호출되는 함수 <span>npm install json-server --save </span> oncompleted : 관찰 가능한 사람이 우아하게 종료되었을 때 호출되는 함수.

  현재 코드를 다시 작성해 봅시다 :

  이것은 appComponent가 초기화되면 Todos를 비동기로로드합니다.

  먼저, 우리는 공공 재산 인 Todos를 정의하고 초기 값을 빈 배열로 설정합니다. 그런 다음 Ngoninit () 메소드를 사용하여 this.tododataservice.getalltodos ()를 구독하고 값이 들어 오면 this.todos에 지정하여 빈 배열의 초기 값을 덮어 씁니다. 이제 관찰 가능한 응답을 처리하기 위해 onaddtodo (todo) 메소드를 업데이트합시다.

  다시, 우리는 Subscribe () 메소드를 사용하여 this.tododataservice.addtodo (todo)에 의해 반환 된 관찰 가능한 것을 구독하고, 응답이 들어 오면, 우리는 현재 Todos 목록에 새로 생성 된 TODO를 추가합니다. > 우리는 AppComponent가 다음과 같이 보일 때까지 다른 방법에 대해 동일한 운동을 반복합니다 : .

  그게 다야; 모든 방법은 이제 Tododataservice 방법에 의해 반환 된 관찰 가능성을 처리 할 수 ​​있습니다. Angular HTTP 서비스에서 반환 한 관찰 가능한 것을 구독 할 때 수동으로 구독을 취소 할 필요가 없습니다. 메모리 누출을 방지하기 위해 Angular는 모든 것을 정리합니다. 모든 것이 예상대로 작동하는지 봅시다 시도해보십시오 터미널 창을 엽니 다.

  응용 프로그램 디렉토리의 루트에서 나머지 API 백엔드를 시작하십시오 :

  <span>npm install -g @angular/cli@latest
  </span>

  두 번째 터미널 창을 엽니 다 다시 응용 프로그램 디렉토리의 루트에서 각도 응용 프로그램을 제공합니다.

  이제 브라우저를 http : // localhost : 4200. 로 탐색하십시오 모든 것이 잘 진행되면

  오류가 표시되면 코드를 Github의 작업 버전과 비교할 수 있습니다. 굉장합니다! 우리의 응용 프로그램은 이제 나머지 API 백엔드와 통신하고 있습니다!

  사이드 팁 : NPM을 실행하려면 동일한 터미널에서 JSON-SERVER 및 NG 서브를 실행하려면 동시에 여러 터미널 창이나 탭을 열지 않고 동시에 두 명령을 동시에 실행할 수 있습니다. 모든 것이 예상대로 작동하는지 확인하기 위해 단위 테스트를 실행해 봅시다. 테스트 실행 세 번째 터미널 창을 엽니 다 다시, 응용 프로그램 디렉토리의 루트에서 단위 테스트를 실행합니다.

  11 개의 단위 테스트가 실패한 것으로 보입니다 테스트가 왜 실패했는지, 어떻게 고칠 수 있는지 보자.

  단위 테스트 수정 먼저, src/todo-data.service.spec.ts : 를 열어 보자

  대부분의 실패한 단위 테스트는 데이터 처리 확인과 관련이 있습니다. 이 테스트는 더 이상 Tododataservice 대신 REST API Back End에 의해 데이터 처리를 수행하기 때문에 더 이상 필요하지 않으므로 쓸모없는 테스트를 제거하겠습니다.

  이제 장치 테스트를 실행하면 오류가 발생합니다.

  테스트 베드를위한 ​​임시 모듈을 생성하고 임시 모듈의 인젝터는 Apiservice를 인식하지 않기 때문에 오류가 발생합니다. 인젝터가 APISERVICE를 알리려면 Testbed.configureTestingModule () : 에 전달되는 구성 객체의 제공자로 Apiservice를 제공자로 나열하여 임시 모듈에 등록해야합니다.

  그러나 이렇게하면 단위 테스트는 실제 APISERVICE를 사용하여 REST API Back End에 연결됩니다. 우리는 단위 테스트를 실행할 때 테스트 러너가 실제 API에 연결하는 것을 원하지 않으므로 단위 테스트에서 실제 APISERVICE를 조롱하기 위해 APIMOCKSERVICE를 만들어 봅시다.

  npm uninstall -g @angular/cli angular-cli
  npm cache clean
  <span>npm install -g @angular/cli@latest
  </span>

  . apimockservice 만들기 angular CLI를 사용하여 새로운 ApimockService를 생성하겠습니다 :

  <span>npm install -g @angular/cli@latest
  </span>

  이것은 다음을 보여줍니다

  다음으로, 우리는 Apiservice와 동일한 메소드를 구현하지만 메소드가 HTTP 요청을하는 대신 모의 데이터를 반환 할 수 있도록합니다.

  각 메소드가 새로운 새로운 모의 데이터를 반환하는 방법에 주목하십시오. 이것은 약간 반복적으로 보일지 모르지만 좋은 연습입니다. 하나의 단위 테스트가 모의 데이터를 변경하면 다른 단위 테스트에서 변경이 데이터에 영향을 줄 수 없습니다. 이제 Apimockservice 서비스가 있으므로 Apimockservice로 단위 테스트에서 Apiservice를 대체 할 수 있습니다. src/todo-data.service.spec.ts를 다시 열어 보자 제공자 배열에서, 우리는 인젝터에 Apiservice가 요청 될 때마다 ApimockService를 제공하도록 지시합니다.

  npm uninstall -g @angular/cli angular-cli
  npm cache clean
  <span>npm install -g @angular/cli@latest
  </span>

  이제 장치 테스트를 다시 실행하면 오류가 사라졌습니다. 훌륭합니다! <.> 우리는 여전히 두 가지 더 실패한 테스트를 가지고 있습니다 :

  오류는 우리가 방금 수정 한 오류와 유사합니다. 첫 번째 오류를 해결하려면 SRC/API.Service.spec.ts : 를 열어 보겠습니다

  테스트는 http!에 대한 제공자가없는 메시지로 실패하며, http에 대한 제공자를 추가해야 함을 나타냅니다. 다시, 우리는 HTTP 서비스가 실제 HTTP 요청을 보내기를 원하지 않으므로 Angular의 Mockbackend를 사용하는 Mock HTTP 서비스를 인스턴스화합니다.

  <span>git clone git@github.com:sitepoint-editors/angular-todo-app.git
  </span><span>cd angular-todo-app
  </span><span>git checkout part-2
  </span><span>npm install
  </span>ng serve
  

  테스트 모듈 구성이 약간 압도적으로 보이는지 걱정하지 마십시오.

  angular 응용 프로그램 테스트를위한 공식 문서에서 단위 테스트 설정에 대해 자세히 알아볼 수 있습니다. 최종 오류를 수정하려면

  src/app.component.spec.ts : 를 열어 보자

  그런 다음 인젝터에 모의 조종사를 제공하십시오 :

  Hurray! 우리의 모든 테스트는 통과 중입니다 :

  우리는 각도 응용 프로그램이 우리의 REST API Back End에 성공적으로 연결했습니다.

  응용 프로그램을 제작 환경에 배치하려면 이제 실행할 수 있습니다.

  <span>npm install json-server --save
  </span>

  우리는 또한 생성 된 Dist 디렉토리를 호스팅 서버에 업로드합니다. 그게 얼마나 달콤 해요? 우리가 배운 것을 요약하자

  요약

  첫 번째 기사에서 우리는 다음과 같은 방법을 배웠습니다
  angular cli

  를 사용하여 TODO 응용 프로그램을 초기화하십시오 개별 토도를 나타내는 TODO 클래스를 만듭니다 tododataservice 서비스를 작성하여 Todos를 만들고 업데이트 및 제거하십시오. appComponent 구성 요소를 사용하여 사용자 인터페이스 를 표시하십시오 github 페이지에 응용 프로그램을 배포하십시오

  <span>{
  </span>  <span>"todos": [
  </span>    <span>{
  </span>      <span>"id": 1,
  </span>      <span>"title": "Read SitePoint article",
  </span>      <span>"complete": false
  </span>    <span>},
  </span>    <span>{
  </span>      <span>"id": 2,
  </span>      <span>"title": "Clean inbox",
  </span>      <span>"complete": false
  </span>    <span>},
  </span>    <span>{
  </span>      <span>"id": 3,
  </span>      <span>"title": "Make restaurant reservation",
  </span>      <span>"complete": false
  </span>    <span>}
  </span>  <span>]
  </span><span>}
  </span>

  두 번째 기사에서, 우리는 appcomponent를 리팩토링하여 대부분의 작업을 다음과 같이 위임했습니다.

  todolistcomponent는 Todos 목록을 표시합니다
  adolistitemcomponent가 단일 할 일을 표시하려면 입니다
  TodolistheAderComponent가 새로운 TODO 를 만듭니다
  todolistfootercomponent는 얼마나 많은 토르 도가 남았는지를 보여줍니다

  <span>"scripts": {
  </span>  <span>...
  </span>  <span>"json-server": "json-server --watch db.json"
  </span><span>}
  </span>

  이 세 번째 기사에서 우리는 :

  는 모의 REST API 백엔드를 만들었습니다 는 API URL을 환경 변수
  • 로 저장했습니다 는 나머지 API 백엔드와 의사 소통하기 위해 APISERVICE를 만들었습니다. 는 새로운 Apiservice 를 사용하도록 Tododataservice를 업데이트했습니다 는 비동기 API 호출을 처리하도록 AppComponent를 업데이트했습니다 단위 테스트를 실행할 때 실제 HTTP 호출을 피하기 위해 apimockservice를 만들었습니다.
  그 과정에서 우리는 다음 과정에서 다음과 같이 배웠습니다
  • 환경 변수를 사용하여 애플리케이션 설정을 저장하는 방법
  각도 HTTP 클라이언트를 사용하여 http 요청을 수행하는 방법 angular http 클라이언트가 반환하는 관찰 가능성을 다루는 방법
  • 단위 테스트를 실행할 때 실제 HTTP 요청을 피하기 위해 HTTP 호출을 조롱하는 방법.
  이 기사의 모든 코드는 github에서 볼 수 있습니다 4 부에서는 라우터와 리팩터 앱 컴퓨터를 소개하여 라우터를 사용하여 백엔드에서 토도를 가져옵니다. 파트 5에서는 응용 프로그램에 대한 무단 액세스를 방지하기 위해 인증을 구현할 것입니다.
  • 이 기사는 Vildan Softic이 검토 한 동료입니다. Sitepoint 콘텐츠를 최선을 다해 Sitepoint의 동료 리뷰어 덕분에! angular 및 rxjs api 서비스에 대한 자주 묻는 질문 (FAQ)은 휴식을 취한 Angular API 서비스에서 RXJ의 역할은 무엇입니까?
  rxjs는 JavaScript의 반응성 확장에 대한 짧은 XJS가 관찰 가능 또는 콜백 기반 기반을보다 쉽게 ​​작성할 수 있도록 관측 가능성을 사용하는 반응성 프로그래밍을위한 라이브러리입니다. 암호. Angular API 서비스의 맥락에서 RXJS는 비동기 작업을 처리하는 데 중요한 역할을합니다. 여러 비동기 작업을 관리하고 오류를 처리하며 작업을 취소 할 수있는 관찰 가능성을 만들고 작업하는 방법을 제공합니다. 이것은 본질적으로 비동기식 인 HTTP 요청을 사용하기위한 강력한 도구가됩니다.
  • 각도는 휴식 백엔드와 어떻게 상호 작용 하는가?

  각도는 httpclient 모듈을 통한 휴식 백엔드와 상호 작용합니다. 이 모듈은 HTTP 기능을위한 단순화 된 API를 제공합니다. Angular는 서버에 HTTP 요청을하거나 사용자 데이터를 보내거나 서버에서 데이터를 검색 할 수 있습니다. httpclient 모듈에는 RESTful API에 사용되는 HTTP 메소드에 해당하는 Get, Post, Put, Delete와 같은 요청에 대한 방법이 포함되어 있습니다.

  Angular API 서비스의 오류를 어떻게 처리 할 수 ​​있습니까?

  오류 처리는 모든 응용 프로그램의 필수 부분입니다. Angular API 서비스에서는 RXJS의 Catcherror 연산자를 사용하여 오류를 처리 할 수 ​​있습니다. 이 연산자는 관찰 가능한 오류에 오류를 포착하여이를 처리하거나 새로운 관찰 가능한 것을 반환 할 수 있습니다. 오류를 던질 수있는 방법 후 관측 가능한 파이프 방법에서 사용할 수 있습니다. angular API 서비스에서 요청을 취소하려면 어떻게됩니까?

  Angular API 서비스에서 구독 수신 메소드를 사용하여 요청을 취소 할 수 있습니다. 관찰 가능한 것을 구독하면 구독 객체를 반환합니다. 이 개체는 구독을 취소하기 위해 호출 할 수있는 수신 거부 방법이 있으며 결과적으로 HTTP 요청이 있습니다.

  각도 API 서비스에서 실패한 요청을 다시 시도 할 수 있습니까? , RXJ의 운영자가 재 시도를 사용하여 실패한 요청을 재 시도 할 수 있습니다. 재 시도 연산자는 HTTP 요청을 효과적으로 반복하여 관찰 가능한 것으로 다시 구입합니다. 운영자가 요청을 재 시도하기위한 조건을 정의 할 수있게되면

  각도 API 서비스에서 여러 요청을 어떻게 할 수 있습니까?

  각도 API 서비스에서 포크 조진을 사용하여 여러 요청을 할 수 있습니다. rxjs의 기능. 이 함수는 관측 가능 다양한 배열을 가져 와서 입력 관찰 가능성의 결과를 모두 완료 한 후에는 새로운 관측 가능성을 반환합니다. 일단 완료되면 각도 API 서비스에서 응답 데이터를 어떻게 변환 할 수 있습니까?

  . 각도 API 서비스에서는 RXJS의 MAP 연산자를 사용하여 응답 데이터를 변환 할 수 있습니다. 이 연산자는 관찰 가능에 의해 방출 된 각 항목에 주어진 기능을 적용하고 결과를 방출하는 새로운 관찰 가능한 것을 반환합니다.

  angular API 서비스에서 서버로 데이터를 보낼 수 있습니까? Angular API 서비스는 HTTPClient 모듈의 게시물 메소드를 사용하여 서버로 데이터를 보낼 수 있습니다. 이 메소드는 서버의 URL과 데이터가 매개 변수로 전송되어 구독 할 수있는 관찰 가능한 것을 반환합니다. > Angular API 서비스에서는 httpclient 모듈의 PUT 메소드를 사용하여 서버의 데이터를 업데이트 할 수 있습니다. 이 메소드는 서버의 URL, 데이터를 업데이트하고 선택적으로 요청에 대한 옵션을 매개 변수로 사용하고 구독 할 수있는 관찰 가능한 관찰 가능한 옵션을 반환합니다. Angular API Service?

  Angular API 서비스에서는 httpclient 모듈의 삭제 방법을 사용하여 서버에서 데이터를 삭제할 수 있습니다. 이 메소드는 서버의 URL을 사용하고 선택적으로 요청에 대한 옵션을 매개 변수로 사용하고 구독 할 수있는 관찰 가능한 옵션을 반환합니다.

위 내용은 Angular 및 RXJS : REST API 백엔드 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!