PhoneCat Tutorial App 6 - XHRs & Dependency Injection

(참고) XHR = XmlHttpRequest 의 약자입니다.... 무슨넘의 약자를 이리 많이 쓰노...

하드코딩 데이터 셋안의 세개의 폰들을 가지고 앱을 구성하는 것은 이젠 충분합니다.
자 이제 $http 를 가지고 서버로부터 좀 더 큰 데이터 셋을 가져오도록 합시다.
Angular의 DI를 사용해서 PhoneListCtrl 컨트롤에서 서비스를 제공 할 것입니다.

여기 서버로부터 로드 한 20개의 폰 목록이 있습니다. 

Data

여러분 프로젝트 안에 app/phones/phones.json 파일에는 JSON 포멧에 맞춰 저장된 좀 더 큰 폰 리스트를 포함하고 있는 데이터셋이 있습니다

아래 샘플 파일을 보세요.

Controller

컨트롤러는 웹 서버에 있는 app/phones/phones.json 파일안에 데이터를 불러오기 위한 http 요청을 만들기 위해, Angular의 $http 서비스를 이용하게 될것입니다.
$http 는 웹 어플리케이션 안에서 공통 오퍼레이션들을 다루기위한 빌드인 된 Angular 서비스중에 하나 입니다. 
Angular 는 이런 서비스를 여러분들이 필요로 하는 곳에 주입합니다.

서비스들은 Angular의 DI 서브시스템에 의해 관리되어 집니다.

DI 는 여러분의 웹 어플리케이션을 잘 구성되어지고(예를 들면 컴포넌트를 프리젠테이션, 데이터, 컨트롤로 분리하는 것)과 컴포넌트들간에 느슨한 연결시키는 것 둘 다(컴포넌트들 사이에 의존성들은 컴포넌트들 자신에 의해서 resolve 되어질수 없고 DI 서브 시스템에 의해 Resolve 되어 집니다.) 만드는 것을 도와 줍니다.

App/js/controllers.js

 

$http 은 웹 서버에 HTTP GET 요청, phones/phones.json에 대한 요청을 만듭니다. 
(url 은 index.html 파일 기준으로 상대 경로.)
서버는 json 파일 내에 데이터를 제공하는 것으로 응답합니다. 
(뿐만 아니라 그 응답은 백앤드 서버에 의해 다이나믹하게 구성되어졌을 수 있습니다.
브라우저 과 우리 어플리케이션 둘 다 똑같이 보입니다.
단순이익을 위해 우리는 이 튜토리얼에서는 json 파일을 사용합니다

$http 서비스는 성공 메소드와 함께 약속된 객체를 리턴합니다.
비 동기 응답을 핸들링 하기위해 이 메소드를 호출하고, phone 데이터를 phone들을 호출한 모델로써 이 컨트롤러에 의해 컨트롤된 scope 에 할당 합니다. 
기억하세용, Angular는 json를 감지 했고 우리를 위해 파싱했다는 것을..
Angular에서 서비스를 사용하기 위해, 여러분은 간단히 여러분이 컨트롤러의 생성자 함수의 인자로써 필요한 의존성들의 이름을 선언 합니다. 아래 같이

phonecatApp.controller(‘PhoneListCtrl’, function($scope, $http) {….}

컨트롤러가 구성되어 질 때에, Angular의 의존성 주입기는 컨트롤러에 서비스를 제공합니다. 
또한 의존성 주입기는 서비스가 되어지는 어떠한 전이 의존성들을 생성하는 것을 처리 합니다..
(서비스들은 가끔 다른 서비스들에 의존합니다.)

1. 인젝터는 $http서비스를 phoneListCtr의 하나의 의존성으로 확인합니다.

2. 인젝터는 $http가 이미 인스턴스화 되었는지 아닌지를 체크 합니다.

3. 아니라면, 인젝터는 $http에 인스턴스화 하는 것을 구성하기 위해 팩토리 함수를 사용합니다.

4. 인젝터는 $http 서비스의 싱글턴 인스턴스를 phoneListCtrl Controller에 제공합니다. 

$ Prefix Naming Convention

여러분 자신의 서비스들을 만들 수 있습니다. 그리고 실제로 우린 정확하게 11 장에서 만들어 볼겁니다.
네이밍 convetion으로써, Angular의 빌트인 서비스들, 스코프 메소드 그리고 몇몇의 다른 Angular API들은 $ 접두어를 이름 앞에 가지고 있습니다. 
$접두어는 Angular가 제공하는 서비스를 네임스페이스 하기 위해 존재합니다.
충돌을 막기 위해, 여러분 서비스와 모델들을 $와 함께 시작하는 것과 같은 것을 피하는 것이 최선입니다. 
스코프에 살펴보면, $$으로 시작하는 프로퍼티를 또한 알 수도 있을 것입니다.. 
이런 프로퍼티는 사적으로 여겨지고, 수정되거나 접근되어서는 안 되어야 한다.

A Note on Minification

Angular는 인자의 이름으로부터 컨트롤러 구성 함수까지 컨트롤러의 의존성을 추측한 이후로, 만약 여러분이 phoneListCtrl 컨트롤러에 자바스크립트 코드를 미니화하기 위한 것 이였다면, 그것의 함수 인자의 모든 것은 마찬가지로 미니화 되어 질것이고 의존성 인젝터는 정확하게 서비스를 확인 할 수 없을 것입니다.

미니화 되지 않을 문자열로 제공되어지는 의존성들의 이름을 갖는 함수의 주석화에 의해 그 문제를 극복할 수 있습니다.
이런 인젝션 어노테이션을 제공하는데는 두가지 방법이 있습니다.

- 문자열 배열을 잡고 있는 컨트롤러 함수에 $inject 프로퍼티를 생성합니다.
각각의 배열 내에 문자열은 일치하는 파라미터에 주입하기 위한 서비스 이름 이다.
우리가 작성할 예제에는 

function PhoneListCtrl($scope , $http){….}

PhoneListCtrl.$inject = [$scope , $http];

phonecatApp.controller(‘PhoneListCtrl’, PhoneListCtrl);

- 인라인 어노테이션을 단지 함수를 제공하는 것 대신에 , 여러분이 배열을 제공할 곳에 사용하세요.
이 배열은 함수 자체에 의해 따라오는 서비스 이름의 리스트를 포함합니다. 

function PhoneListCtrl($scope, $http){….}

phonecatApp.controller(‘PhoneListCtrl’, [‘$scope’,’$http’,PhoneListCtrl]);

이 메소드 둘 다 Angular에 의해서 주입되어 질 수 있는 어떤 함수들과 함께 작동하고,
그래서 여러분의 사용하는 하나를 결정하기 위해서는 여러분의 프로젝트 스타일 가이드에 달려 있다.
두번째 메소드 사용 시에는, 컨트롤러가 등록시에 익명함수 로써 구성자 함수 인라인을 제공하는 것이
보통입니다.

phonecatApp.controller(‘phoneListCtrl’ , [‘$scope’,’$http’ , function($scope , $http) {…}]);

이 지점 앞으로부터 , 이 튜토리얼에서 우리는 인라인 메소드를 사용할 것입니다.

phoneListCtrl : app/js/controller.js

 

Test

Test/unit/controllerSpec.js : 

우리는 의존성 주입의 사용을 시작하고 우리 컨트롤러는 의존성들을 가지고 있기 때문에,
우리 테스트상에 컨트롤러 구성하는 것은 약간 좀 더 복잡할 것입니다. 
new 오퍼레이터를 사용 할 수 있고 가짜 $http 구현체의 같은 종류와 함께 구성자를 제공할수 있습니다. 
그렇지만, Angular는 유닛 테스트상에서 사용 할 수 있는 $http 서비스 목을 제공합니다. 
“fake” 응답을 $httpBackend 라고 불리는 서비스 상에서 메소드 호출에 의한 서버 요청에 구성합니다. 

NOTE : 우리 테스트 환경에 Jasmine 과 angular-mocks.js 를 로드 했기 때문에, 우리는 두개의 헬퍼 메소드 모듈 과 인젝터에 접근하고 설정하기 위해 우리가 사용할 인젝터를 얻었습니다.

아래 내용과 같이, 테스트 환경에 컨트롤러를 생성 했습니다.

- 우린 $rootScope, $controller 그리고 $httpBackend 서비스의 인스턴스를 Jasmine의 beforeEach 함수안에 주입하기 위해 주입 헬퍼 메소드를 사용했습니다.
이런 인스턴스들은 모든 싱글 테스트를 위해 scrach로부터 재 생산되어진 인젝터로 부터 옵니다.
이것은 각각의 테스트가 잘 알려진 시작 점으로부터 시작하고, 각각의 테스트는 다른 테스트들 안에서 동작이 완료된것으로부터 독립되어 진 것을 보증 합니다. 

- 우리 컨트롤러에 $rootScope.$new()가 호출됨에 의해 새로운 스코프를 생성합니다.

- PhoneListCtlr 컨트롤러의 이름을 패싱한(포함한) 함수가 주입되어진 $controller 함수 와 파라미터로 생성되어진 Scope를 호출 했습니다. 

우리 코드는 우리 컨트롤러에서 폰 리스트 데이터를 가져오기 위해 $http 서비스를 현재 사용하기 때문에, 우리가 PhoneListCtrl 자식 스코프를 만들기 전에 , 우리는 컨트롤러로부터 들어오는 것을 기대하기 위한 harness 테스트를 호출하는 것이 필요합니다.

- beforeEach 함수안에 $httpBackend 서비스가 주입되는 것을 요청합니다.
이건 모든 XHR 과 JSONP 요청을 용이하게 하는 제품 환경 안에서의 서비스의 Mock 버전 입니다.
이 서비스의 Mock 버전은 네이티브 API들 과 그것들과 연관 되어 있는 전역 단계–테스트를 악몽으로 만드는 둘 을 다룰 필요 없이 테스트를 여러분이 작성하도록 해줍니다.

- HTTP 요청이 들어오는 것을 예상하고 함께 응답하기 위해 전달하는 $httpBackend 서비스 을 싣기 위해서 $httpBackend.expectGET 메소드 를 사용하세요.
우리가 $httpBackend.flush 메소를 호출할 때 까지, 응답이 리턴되어지지 않는다는 것을 알아 두세요.

응답 받기 전에 폰 모델은 scope 상에 존재하지 않는다는 것을 검증하는 assertion 들을 만들것입니다.

- $httpBackend.flush()의 호출에 의해 브라우저 안에서 요청 큐를 flush 했습니다.
이것은 실려진 응답과 함께 해결 되어진 $http 서비스에 의해 반환되어지는 약속이 원인이 됩니다.
우리는 assertion , 폰 모델이 현재 스코프 상에 존재 하는지 검증하는 것을 만듭니다.

마지막으로 orderProp의 기본값이 정확하게 세팅 되어 있는지 검증합니다.

 

Experiments

Index.html 의 아래에, json 포멧으로 보여지는 폰 리스트를 보기 위한 바인딩 <pre>{{phones | json}}</pre>  를 추가하세요
PhoneListCtrl 컨트롤에서는, 리스트 중에 첫번째 5까지 폰들의 숫자의 제한에 의한 http 응답을 선 처리합니다.
$http callback에 아래 코드를 사용하세요

$scope.phones = data.splice(0,5);

Summary

자, 여러분드릉 Angular 서비스가 얼마나 쉽게 사용 할 수 있는지를 배웠습니다. (Angular’의 의존성 주입에 감사합니다.), 6장으로 가서, 여러분들을 폰의 썸네일 이미지와 링크를 추가하게 될것입니다.

5. XHRs & Dependency Injection

Enough of building an app with three phones in a hard-coded dataset!

하드코딩 한 Dataset에서 3개의 phone을 가진 어플리케이션을 만드는 것은 충분함.

Let’s fetch a larger dataset from our server using one of Angular’s built-in services called $http.

좀 더 큰 데이터 셋을 Angular의 빌트인 서비스, $http 라고 불리는 사용한 우리 서버로부터 가져옵시다.

We will use Angular’s dependency injection(DI) to provide the service to the PhoneListCtrl controller.

Angular의 PhoneListCtrl 컨트롤에 서비스를 제공하기 위해 DI를 사용할 것입니다.

There is now a list of 20 phones, loaded from the server.

지금 서버로부터 로드된 20개의 phone 리스트가 있습니다.

Data

The app/phones/phones.json file in your project is a dataset that contains a larger list of phones stored in the JSON format.

여러분 프로젝트 안에 app/phones/phones.json 파일에는 JSON 포멧에 맞춰 저장된 좀 더 큰 폰 리스트를 포함하고 있는 데이터셋이 있습니다

Following is a sample of the file

.  

Controller

We’ll use Angular’s $http service in our controller to make an HTTP request to your web server to fetch the data in the app/phones/phones.json file.

$http is just one of several built-in Angular services that handle common operations in web apps.

Angular injects these services for you where you need them.

우리 컨트롤러에서 여러분의 웹 서버로 app/phones/phones.json 파일에서 데이터를 불러오기 위한 HTTP 요청을 만들기 위해서 Angular 의  $http 서비스를 사용할 것입니다. 

$http은 웹 어플리케이션 상에 공통의 동작들을 다루기 위한 빌드인 된 Angular 서비스중에 하나 입니다. 

Angular 는 이런 서비스를 여러분들이 필요로 하는 곳에 주입합니다.

Services are managed by Angular’s DI subsystem.

Dependency injection helps to make your web apps both well-structured (e.g. separate components for presentation , data and control ) and loosely coupled (dependencies between components are not resolved by the components themselves, but by the DI subsystem).

서비스들은 Angular의 DI 서브시스템에 의해 관리되어 집니다.

DI 는 여러분의 웹 어플리케이션을 잘 구성되어지고(예를 들면 컴포넌트를 프리젠테이션, 데이터, 컨트롤로 분리하는 것)과 컴포넌트들간에 느슨한 연결시키는 것 둘 다(컴포넌트들 사이에 의존성들은 컴포넌트들 자신에 의해서 resolve 되어질수 없고 DI 서브 시스템에 의해 Resolve 되어 집니다.) 만드는 것을 도와 줍니다.

App/js/controllers.js

 

$http makes an HTTP GET request to our web server, asking for phones/phones.json (the url is relative to our index.html file). 

The server responds by providing the data in the json file.

(The response might just as well have been dynamically generated by a backend server.

To the browser and our app the both look the same.

For the sake of simplicity we used a json file in this tutorial.)

$http 은 우리 웹서버에 HTTP GET 요청, phones/phones.json에 대한 요청을 만드네요.

(url 은 index.html 파일 기준으로 상대 경로 입니다.)

서버는 json file 에 데이터를 제공하는 것에 의해 응답합니다. 

(응답은 뿐만 아니라 백앤드 서버에 의해 다이나믹하게 생산되어졌을 수 있습니다.

브라우저 과 우리 어플리케이션 둘 다 똑같이 보입니다.

단순함의 이익을 위해 우리는 이 튜토리얼에서는 json 파일을 사용합니다.)

The $http service returns a promise object with a success method.

We call this method to handle the asynchronous response and assign the phone data to the scope controlled by this controller, as a model called phones.

Notice that Angular detected the json response and parsed it for us.

$http 서비스는 성공 메소드와 약속 객체를 리턴합니다.

비동기 응답을 다루기 위해 이 메소드를 호출 하고, phone 데이터를 phone들을 호출한 모델로써 이 컨트롤러에 의해 컨트롤 된 scope 에 할당 합니다. 

기억하세용, Angular는 json를 감지 했고 우리를 위해 파싱했다는 것을.

To use a service in Angular, you simply declare the names of the dependencies you need as arguments to the controller’s constructor function , as follows:

Angular에서 서비스를 사용하기 위해 , 여러분은 간단히 여러분이 컨트롤러의 생성자 함수의 인자로써 필요한 의존성들의 이름을 선언 합니다. 아래 같이

phonecatApp.controller(‘PhoneListCtrl’, function($scope, $http) {….}

Angular’s dependency injector provides services to your controller when the controller is being constructed.

The dependency injector also takes care of creating any transitive dependencies the service may have (services often depend upon other services).

컨트롤러가 구성되어 질 때에 , Angular의 의존성 주입기는 여러분의 컨트롤러에 서비스를 제공합니다. 

의존성 주입기는 또한 서비스가 되어지는 전이 의존성들을 생산하는 것을 처리 합니다..

(서비스들은 가끔 다른 서비스들에 의존합니다.)

 

5. The Injector identifies $http service as a dependency of PhoneListCtrl.

인젝터는 $http서비스를 phoneListCtr의 하나의 의존성으로 확인합니다.

6. The Injector check whether $http has already been instantiated.

인젝터는 $http가 이미 인스턴스화 되었는지 아닌지를 체크 합니다.

7. If not, the Injector uses a factory function for $http to construct it.

아니라면, 인젝터는 $http에 인스턴스화 하는 것을 구성하기 위해 팩토리 함수를 사용합니다.

8. The Injector provides the singleton instance of the $http service to the PhoneListCtrl controller.

인젝터는 $http 서비스의 싱글턴 인스턴스를 phoneListCtrl Controller에 제공합니다. 

$ Prefix Naming Convention

You can create your own services, and in fact we will do exactly that in step 11.

As a naming convention , Angular’s built-in services, Scope methods and a few other Angular APIs have a $ prefix in front of the name.

여러분 자신의 서비스들을 만들수 있습니다. 그리고 실제로 우린 정확하게 11 장에서 만들어볼겁니다.

네이밍 convetion으로써, Angular의 빌트인 서비스들, 스코프 메소드 그리고 몇몇의 다른 Angular API들은 $ 접두어를 이름 앞에 가지고 있습니다.

The $ prefix is there to namespace Angular-provided services.

$접두어는 Angular가 제공하는 서비스를 네임스페이스 하기 위해 존재합니다.

To prevent collisions it’s best to avoid naming your services and models anything that begins with a $.

충돌을 막기 위해, 여러분 서비스와 모델들을 $와 함께 시작하는 것과 같은 것을 피하는 것이 최선입니다. 

If you inspect a Scope, you may also notice some properties that begin with $$.

스코프에 살펴보면, $$으로 시작하는 프로퍼티를 또한 알 수도 있을 것이다. 

These properties are considered private, and should not be accessed or modified.

이런 프로퍼티는 사적으로 여겨지고, 수정되거나 접근되어서는 안 되어야 한다.

A Note on Minification

Since Angular infers the controller’s dependencies from the names of arguments to the controller’s constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly

Angular는 인자의 이름으로부터 컨트롤러 구성 함수까지 컨트롤러의 의존성을 추측한 이후로, 만약 여러분이 phoneListCtrl 컨트롤러에 자바스크립트 코드를 미니화하기 위한 것이였다면, 그것의 함수 인자의 모든 것은 마찬가지로 미니화 되어 질 것이고 의존성 인젝터는 정확하게 서비스를 확인 할 수 없을 것입니다.

We can overcome this problem by annotating the function with the names of the dependencies , provided as strings,, which will not get minified.

미니화 되지 않을 문자열로 제공되어지는 의존성들의 이름을 갖는 함수의 주석화에 의해 그 문제를 극복할수 있습니다.

There are two ways to provide these injection annotations : 

이런 인젝션 어노테이션을 제공하는데는 두가지 방법이 있습니다.

- Create a $inject property on the controller function which holds an array of strings.

문자열 배열을 잡고 있는 컨트롤러 함수에 $inject 프로퍼티를 생성합니다.

Each string in the array is the name of the service to inject for the corresponding parameter.

각각의 배열 내에 문자열은 일치하는 파라미터에 주입하기 위한 서비스 이름 이다.

In our example we would write : 

우리가 작성할 예제에는 

function PhoneListCtrl($scope , $http){….}

PhoneListCtrl.$inject = [$scope , $http];

phonecatApp.controller(‘PhoneListCtrl’, PhoneListCtrl);

- Use an inline annotation where , instead of just providing the function, you provide an array. This array contains a list of the service names, followed by the function itself.

인라인 어노테이션을 단지 함수를 제공하는 것 대신에 , 여러분이 배열을 제공할 곳에 사용하세요.

이 배열은 함수 자체에 의해 따라오는 서비스 이름의 리스트를 포함합니다. 

function PhoneListCtrl($scope, $http){….}

phonecatApp.controller(‘PhoneListCtrl’, [‘$scope’,’$http’,PhoneListCtrl]);

Both of these method work with any function that can be injected by Angular,

so it’s up to your project’s style guide to decide which one you use.

이 메소드 둘다 Angular에 의해서 주입되어 질 수 있는 어떤 함수들과 함께 작동하고,

그래서 여러분의 사용하는 하나를 결정하기 위해서는 여러분의 프로젝트 스타일 가이드에 달려 있다.

When using the second method , it is common to provide the constructor function inline as an anonymous function when registering the controller : 

두번째 메소드 사용 시에는, 컨트롤러가 등록시에 익명함수 로써 구성자 함수 인라인을 제공하는 것이 보통입니다.

phonecatApp.controller(‘phoneListCtrl’ , [‘$scope’,’$http’ , function($scope , $http) {…}]);

From this point onward, we’re going to use the inline method in the tutorial.

이 지점 앞으로부터 , 이 튜토리얼에서 우리는 인라인 메소드를 사용할 것입니다.

phoneListCtrl : 

app/js/controller.js

 

Test

Test/unit/controllerSpec.js : 

Because we started using dependency injection and our controller has dependencies, constructing the controller in our tests is a bit more complicated.

우리는 의존성 주입의 사용을 시작하고 우리 컨트롤러는 의존성들을 가지고 있기 때문에,

우리 테스트상에 컨트롤러 구성하는 것은 약간 좀 더 복잡할 것입니다.

We could use the new operator and provide the constructor with some kind of fake $http implementation.

new 오퍼레이터를 사용 할 수 있고 가짜 $http 구현체의 같은 종류와 함께 구성자를 제공할수 있습니다.

 However, Angular provide a mock $http service that we can use in unit tests.

그렇지만, Angular는 유닛테스트상에서 사용 할 수 있는 $http 서비스 목을 제공합니다. 

We configure “fake” responses to server requests by calling methods on a service called $httpBackend:

 

Note : Because we loaded Jasmine and angular-mocks.js in our test environment, we got two helper methods module and inject that we’ll use to access and configure the injector.

우리 테스트 환경에 Jasmine 과 angular-mocks.js 를 로드 했기 때문에, 우리는 두개의 헬퍼 메소드 모듈 과 인젝터에 접근하고 설정하기 위해 우리가 사용할 인젝터를 얻었습니다.

We created the controller in the test environment, as follows

아래 내용과 같이, 테스트 환경에 컨트롤러를 생성 했습니다.

- We used the inject helper method to inject instances of $rootScope, $controller and $httpBackend services into the Jasmine’s beforeEach function.

우린 $rootScope, $controller 그리고 $httpBackend 서비스의 인스턴스를 Jasmine의 beforeEach 함수안에 주입하기 위해 주입헬퍼 메소드를 사용했습니다.

These instances come from an injector which is recreated from scratch for every single test.

이런 인스턴스들은 모든 싱글 테스트를 위해 스크래치로부터 재 생산되어진 인젝터로 부터 옵니다.

This guarantees that each test starts from a well known starting point and each test is isolated from the work done in other tests.

이것은 각각의 테스트가 잘 알려진 시작 점으로부터 시작하고, 각각의 테스트는 다른 테스트들 안에서 동작이 완료된것으로부터 독립되어 진 것을 보증 합니다. 

- We create a new scope for our controller by calling $rootScope.$new()

우리 컨트롤러에 $rootScope.$new()가 호출됨에 의해 새로운 스코프를 생성합니다.

- We called the injected $controller function passing the name of the PhoneListCtrl controller and the created scope as parameters.

PhoneListCtlr 컨트롤러의 이름을 패싱한(포함한) 함수가 주입되어진 $controller 함수 와 파라미터로 생성되어진 Scope를 호출 했습니다. 

Because our code now uses the $http service to fetch the phone list data in our controller, before we create the PhoneListCtrl child scope, we need to tell the testing harness to expect an incoming from the controller.

우리 코드는 우리 컨트롤러에서 폰 리스트 데이터를 가져오기 위해 $http 서비스를 현재 사용하기 때문에, 우리가 PhoneListCtrl 자식 스코프를 만들기 전에 , 우리는 컨트롤러로부터 들어오는 것을 기대하기 위한 harness 테스트를 호출하는 것이 필요합니다.

- Request $httpBackend service to be injected into our beforeEach function.

beforeEach 함수안에 $httpBackend 서비스가 주입되는 것을 요청합니다.

This is a mock version of the service that in a production environment facilitates all XHR and JSONP requests.

이건 모든 XHR 과 JSONP 요청을 용이하게 하는 제품 환경 안에서의 서비스의 Mock 버전 입니다.

The mock version of this service allows you to write tests without having to deal with native APIs and the global state associated with them – both of which make testing a nightmare.

이 서비스의 Mock 버전은 네이티브 API들 과 그것들과 연관 되어 있는 전역 단계–테스트를 악몽으로 만드는 둘 을 다룰 필요 없이 테스트를 여러분이 작성하도록 해줍니다.

- Use the $httpBackend.expectGET method to train the $httpBackend service to expect an incoming HTTP request and tell it what to respond with.

HTTP 요청이 들어오는 것을 예상하고 함께 응답하기 위해 전달하는 $httpBackend 서비스 을 싣기 위해서 $httpBackend.expectGET 메소드 를 사용하세요.

Note that the responses are not returned until we call the $httpBackend.flush method.

우리가 $httpBackend.flush 메소를 호출할 때 까지, 응답이 리턴되어지지 않는다는 것을 알아 두세요.

Now we will make assertions to veritfy that the phones model doesn’t exist on scope before the response is received : 

응답 받기 전에 폰 모델은 scope 상에 존재하지 않는다는 것을 검증하는 assertion 들을 만들것만들 것. 

 

- We flush the request queue in the browser by calling $httpBackend.flush() .

$httpBackend.flush()의 호출에 의해 브라우저 안에서 요청 큐를 flush 했습니다.

This causes the promise returned by the $http service to be resolved with the trained response.

이것은 실려진 응답과 함께 해결 되어진 $http 서비스에 의해 반환되어지는 약속이 원인이 됩니다.

We make the assertions, verifying that the phone model now exists on the scope.

우리는 assertion , 폰 모델이 현재 스코프 상에 존재 하는지 검증하는 것을 만듭니다.

Finally , we verify that the default value of orderProp is set correctly : 

마지막으로 orderProp의 기본값이 정확하게 세팅 되어 있는지 검증합니다.

 

You should now see the following output in the Karma tab:

Experiments

At the bottom of index.html , add a <pre>{{phones | json}}</pre> binding to see the list of phones displayed in json format.

Index.html 의 아래에, json 포멧으로 보여지는 폰 리스트를 보기 위한 바인딩 <pre>{{phones | json}}</pre>  를 추가하세요

In the PHoneListCtrl controller, pre-process the http response by limiting the number of phones to the first 5 in the list.

PhoneListCtrl 컨트롤에서는, 리스트 중에 첫번째 5까지 폰들의 숫자의 제한에 의한 http 응답을 선 처리합니다.

Use the following code in the $http callback : 

$http callback에 아래 코드를 사용하세요

$scope.phones = data.splice(0,5);

Summary

Now that you have learned how easy it is to use Angular services(thanks to Angular’s dependency injection), go to step 6 , where you will add some thumbnail images of phones and some links.

자, 여러분드릉 Angular 서비스가 얼마나 쉽게 사용 할 수 있는지를 배웠습니다. (Angular’의 의존성 주입에 감사합니다.), 6장으로 가서, 여러분들을 폰의 썸네일 이미지와 링크를 추가하게 될것입니다.