이 단계에서는 앱이 데이터를 얻는 방식을 향상시킬 것입니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F 단계 11
응용 프로그램의 마지막 개선은 RESTFul 클라이언트를 나타내는 사용자 정의 서비스를 정의하는 것입니다. 이 클라이언트를 사용하면 기본 $ HTTP 서비스 (API, HTTP 메소드 및 URL)를 돌보지 않고 XHR 요청을 더 쉽게 보낼 수 있습니다.
9 단계와 10 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
주형
맞춤형 서비스는 App/JS/Services에 정의되므로 레이아웃 템플릿 에이 파일을 소개해야합니다. 또한 Ngresource 모듈과 $ 리소스 서비스가 포함 된 AngularJs-Resource.js 파일을로드해야합니다. 나중에 사용할 것입니다.
app/index.html
... <script src = "js/services.js"> </script> <script src = "lib/angular/angular-resource.js"> </script> ...
제공하다
app/js/services.js
Angular.Module ( 'phonecatservices', [ 'ngresource']). 공장 ( 'Phone', function ($ resource) {return $ resource ( 'phones/: phoneid.json', {query : {method : 'get', params : {phoneid : 'phones'}, isarray : true});우리는 모듈 API를 사용하여 공장 방법을 통해 사용자 정의 서비스를 등록합니다. 우리는 서비스 이름 전화 및 공장 기능을 통과합니다. 공장 기능 및 컨트롤러 생성자는 유사하며 기능 매개 변수를 통해 종속성 서비스를 선언합니다. 전화 서비스는 $ 리소스 서비스에 의존한다고 선언합니다.
$ 리소스 서비스를 사용하면 몇 줄의 코드로 편안한 클라이언트를 만들 수 있습니다. 우리의 응용 프로그램은이 클라이언트를 사용하여 기본 $ HTTP 서비스를 교체합니다.
app/js/app.js
... Angular.Module ( 'phonecat', [ 'phonecatfilters', 'phonecatservices') ...
Phonecat 의존성 배열에 phonecatservices를 추가해야합니다.
제어 장치
기본 $ HTTP 서비스를 리팩토링하여 새 서비스 전화에 넣음으로써 하위 제어기 (PhonelistCtrl 및 PhoneDetailCtrl)를 크게 단순화 할 수 있습니다. AngularJS의 $ 리소스는 $ http보다 편안한 데이터 소스와 상호 작용하는 데 더 적합합니다. 그리고 이제 컨트롤러 코드가 무엇을하는지 이해하는 것이 더 쉽습니다.
app/js/controllers.js
... 함수 phonelistctrl ($ scope, phone) {$ scope.phones = phone.query (); $ scope.orderProp = 'age';} // phonelistctrl. $ inject = [ '$ scope', 'phone']; function phonedetailctrl ($ scope, $ lourteparams, phone) {$ scope.phone = phone.get ({phoneid : $ loreparams.phoneid}, function (phone) }); $ scope.setImage = function (imageUrl) {$ scope.MainImageUrl = imageUrl; }} // phonedetailctrl. $ inject = [ '$ scope', '$ loureparams', 'phone'];phonelistctrl에서 우리는 다음을 넣습니다.
$ http.get ( 'phones/phones.json'). 성공 (함수 (data) {$ scope.phones = data;});변경 :
$ scope.phones = phone.query ();
우리는이 간단한 진술을 사용하여 모든 휴대 전화를 쿼리합니다.
주목해야 할 또 다른 것은 위 코드에서 전화 서비스 방법을 호출 할 때 콜백 기능을 전달하지 않는다는 것입니다. 이것은 동시에 반환되는 것처럼 보이지만 전혀 그렇지 않습니다. 동기식으로 반환되는 것은 "미래" - 객체는 XHR이 그에 따라 반환 될 때 데이터로 채워집니다. AngularJS의 데이터 바인딩이 주어지면 미래를 사용하여 템플릿에 바인딩 할 수 있습니다. 그런 다음 데이터가 도착하면 자동으로 업데이트됩니다.
때로는 미래의 객체와 데이터 바인딩에만 의존하는 것만으로는 우리의 요구를 충족시키기에 충분하지 않으므로이 경우 서버의 응답을 처리하기 위해 콜백 기능을 추가해야합니다. PhoneDetailCtrl 컨트롤러는 콜백 함수에서 MainImageUrl을 설정하여 설명입니다.
시험
단위 테스트를 수정하여 새로운 서비스가 HTTP 요청을 시작하고 예상대로 처리하는지 확인하십시오. 이 테스트는 또한 컨트롤러가 서비스에서 올바르게 작동하는지 확인합니다.
$ 리소스 서비스는 업데이트를 추가하고 리소스를 삭제하여 얻은 객체를 향상시킵니다. 우리가 Thenequal Matcher를 사용하려는 경우 테스트 값이 응답과 정확히 동일하지 않기 때문에 테스트가 실패합니다. 이 문제를 해결하려면 최근에 정의 된 Toequaldatajasmine 매칭을 사용해야합니다. Toequaldata 매칭자가 두 객체를 비교하면 객체의 속성 만 고려하고 모든 방법을 무시합니다.
테스트/단위/Controllersspec.js :
설명 ( 'phonecat controllers', function () {prevereach (function () {this.addmatchers ({toequaldata : function (예상) {return angular.equals (this.actual, excent);}); $ httpbackend; prevereach (inject (_ $ httpbackend_, $ rootscope, $ 컨트롤러) {$ httpbackend = _ $ httpbackend_; $ httpbackend.expectget ( 'phones/phones.json'). $ rootscope. $ 컨트롤러 (phonelistctrl, {$ scope :}); [Nexus S '}, {Motorola Droid'}); xyzphonedata = function () {return {이름 : '폰 xyz', 이미지 : [ 'image/url1.png', 'image/url2.png']}; $ httpbackend.expectget (phones/xyz.json). explate ({}).테스트를 실행하려면 ./scripts/test.sh를 실행하면 다음 출력이 표시됩니다.
Chrome : 러너 리셋 ...... 총 4 개의 테스트 (통과 : 4; 실패 : 0; 오류 : 0) (3.00 ms) 크롬 19.0.1084.36 Mac OS : 4 개의 테스트 실행 (전달 : 4; 실패 : 0) (3.00 ms)
요약
완전한! 당신은 꽤 짧은 시간 안에 웹 응용 프로그램을 만들었습니다. 마지막 장에서는 다음에해야 할 일을 언급 할 것입니다.
위의 것은 Angularjs Res 및 맞춤형 서비스를 분류하는 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 모든 사람이 Angularjs를 배우는 데 도움이되기를 바랍니다!