2017-01-13 4 views
5

현재 AngularJS의 자습서를 진행하고 있습니다. 이것은 내 controllers.js 파일의 코드입니다.

'use strict'; 

angular.module ('F1FeederApp.controllers' , []         ) 
.controller ('driversController'  , function ($scope , ergastAPIservice) { 

    $scope.nameFilter = null; 
    $scope.driversList = []; 

    ergastAPIservice.getDrivers().success (function (response) { 
     $scope.driversList = response.MRData.StandingsTable.StandingsLists [ 0 ].DriverStandings; 
    }); 
}); 

나는 다음과 같은 오류가 받고 있어요 : 홈페이지에서

1) 차단 로딩 자원이없는 $ sceDelegate 정책에 의해 허용했다.

2) 형식 오류 :. ergastAPIservice.getDrivers (...)의 성공은 이러한 오류의 원인이 될 수있는 것을 모두에서 내가 특히 잘 모르겠어요 기능

하지, 난 각도에 아주 새로운 해요. (services.js)

'use strict'; 

angular.module ('F1FeederApp.services' , []    ) 
.factory  ('ergastAPIservice'  , function ($http) { 

    var ergastAPI = {}; 

    ergastAPI.getDrivers = function() { 
     return $http ({ 
      method : 'JSONP' , 
      url : 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' 
     }); 
    }; 

    return ergastAPI; 
}); 

내가 발견 한 차이 내에서 세미콜론에서이 있음 있습니다 : 난 내 다른 예 사이에 본 적이 유일하게 가능한 차이는 코드 블록에 있다는 것입니다 getDrivers 함수의 끝과 내가 파일의 상단에 use strict 문을 가지고 있다고 가정합니다. 그러나 그 깡패는 두 줄을 모두 사용하지 않고 응용 프로그램을 실행하는 것을 거절하므로 문제가 될 수 있다고 생각하지 않습니다.

누구나 올바른 방향으로 나를 가리킬 수 있다면, 나는 매우 감사 할 것입니다.

답변

8

문제 # 1 : 앱에서 요청하려고

URL이 Angulars sceDelegatePolicy에 따라 안전하지 않습니다. 아래와 같이를 해결하려면 $sceDelegateProviderresourceUrlWhitelist 방법 를 사용하여 응용 프로그램의 URL을 허용 목록에 추가 필요합니다 here

에서

angular.module('myApp', []).config(function($sceDelegateProvider) { 
$sceDelegateProvider.resourceUrlWhitelist([ 
    // Allow same origin resource loads. 
    'self', 
    // Allow loading from our assets domain. **. 
    'http://ergast.com/**' 
    ]); 

명확한 설명을 위해 예 위에있는 문제 # 2 :

오류가있는 문제 TypeError: ergastAPIservice.getDrivers(...).success is not a function co 귀하가 사용중인 AngularJS 버전 때문일 수 있습니다. 기존 .success/.error 메소드는 최신 AngularJs 버전 1.6에서 더 이상 사용되지 않습니다. 여기에 Deprecation notice 최신 AngularJ를 사용하는 경우 그 이유가있을 수 있습니다. 그렇지 않으면 문제를 디버그하기 위해 자세한 정보가 필요합니다.