2017-11-20 1 views
0

저는 Angular를 처음 사용합니다. 나는 스타 워즈 API를 사용하여 검색 페이지를 구현하려하지만 정의되지 않은 $ 범위를 얻으려고합니다. 여기서 뭘 잘못하고 있는지 잘 모르겠다.

'use strict'; 
var app = angular.module('starApp'); 

/* Application controller (for top-level auth) */ 
app.controller('SearchController', ['$location', 'AuthenticationService', 
'$scope', '$http', 
function($location, AuthenticationService, $scope, $http) { 

    console.log('*** SearchController ***'); 

    $scope.items = []; 

    (function getData() { 
     var apiURL = "https://swapi.co/api/planets"; 
     axios.get(apiURL).then(function(response) { 
      showDetail(response.data); 
     }); 
    })(); 

    function showDetail(data) { 
     $scope.items = data.results; 
    } 

}]); 

나는 $ scope을 내 컨트롤러에 주입하고 있지만 아직 정의되지 않은 것으로 나타났다.

+0

당신이 각 라이브러리를 성공적으로 포함되어 있는지 있습니까? – Shubhranshu

답변

0

$ http 서비스를 사용해야합니다. 여기에 노력하고 조각 :

'use strict'; 
 
var app = angular.module('myApp',[]); 
 

 
/* Application controller (for top-level auth) */ 
 
app.controller('SearchController', ['$location', 
 
    '$scope', '$http', 
 
    function($location, $scope, $http) { 
 

 
     console.log('*** SearchController ***'); 
 

 
     $scope.items = []; 
 
     $scope.loading = false; 
 
     var apiURL = "https://swapi.co/api/planets"; 
 
     $scope.loadData = function() { 
 
     $scope.loading = true; 
 
     $http.get(apiURL) 
 
      .then(function(response) { 
 
      $scope.showDetail(response.data); 
 
      $scope.loading = false; 
 
      }); 
 
     }; 
 
     $scope.loadData(); 
 

 
     $scope.showDetail = function(data) { 
 
     $scope.items = data.results; 
 
     }; 
 

 
    } 
 
    ] 
 

 
);
<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<body> 
 

 
    <div ng-app="myApp" ng-controller="SearchController" ng-cloak> 
 
    
 
    <ul ng-if="items.length>0 && !loading" > 
 
     <li ng-repeat="item in items">{{item.name}}</li> 
 
    </ul> 
 
    <div ng-if="loading">Loading...</div> 
 

 
    </div>

관련 문제