2017-11-20 10 views
0

私はAngularを初めて使っています。私はスターウォーズAPIを使って検索ページを実装しようとしていますが、$ scopeは未定義になっています。ここで間違ってやっているのかわからないです:

'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; 
    } 

}]); 

私は私のコントローラに$スコープを注入するんだけど、まだそれは未定義であることを示しています。

+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>

関連する問題