$ httpサービスでAPIデータをリクエストする方法

Riot Games APIを使用してアプリを開発していますが、この例ではREST Countries APIで完了しています。私はページを更新すると、コードがある

test.htmlという

<html ng-app="lolData"> 
    <head> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 

    <section id="center" ng-controller="summonerStats"> 
     <form ng-submit="search()"> 
     <div class="mdl-textfield mdl-js-textfield"> 
      <input class="mdl-textfield__input" type="text" id="summonerName" placeholder="Summoner Name"> 
      <label class="mdl-textfield__label" for="sample1"></label> 
     </div> 
     <input class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" type="submit" value="Search"/>   

     <p ng-show="show"> 
     {{ mystats.name }} 
     </p> 

    </form> 
    </section> 
</body> 
</html>

test.js

'use strict'; 

var lolData = angular.module('lolData', []); 
console.log("before controller"); 

lolData.controller('summonerStats', function($scope, $http) {   
    var url = "https://restcountries.eu/rest/v1/alpha/co"; 
    console.log("inside controller"); 
    $scope.show = false;  
    $scope.search = function() {               
    $http.get(url) 
    .success(function(response) { 
     $scope.mystats = response; 
     $scope.show = true; 
     console.log("inside success controller"); 
    }); 
};     
});

：私はMEAN.IOスタックを使用して、これは私のコードであるhttps://restcountries.eu/rest/v1/alpha/co

「コントローラの前に」console.logまで実行されます。それはlolData.controllerの中に入ることはできません。ブラウザのコンソールに次のエラーが表示されます。

とHTML埋め込まjavascriptの範囲を受け入れません。

私は何をしないのですか？

アップデート1：

私はcodepen中のindex.htmlを追加しました：あまりにもcodepenでIndex.html

そしてHeader.html：header.html

出典

2016-03-25 Arnau Guadall

あなたはindex.htmlを表示できますか？ – amanuel2

はい、angular.jsはどこにプラグインしますか？ –

ブラウザのdevツールネットワークを確認してください。そのファイルのようなサウンドは読み込まれません。角度のスクリプトタグやアプリスクリプトは表示されません – charlietfl

はあなたの応答オブジェクトは、あなたが何を考え実行しませんします。

angular's docsから、応答には返されたオブジェクトに複数のプロパティが付いていることがわかります。

あなたがV1.4.4以降

$scope.mystats = JSON.parse(response.data);

出典

2016-03-25 12:43:11 Wainage

JSON.parse（response.data）で何も変更されていません。おそらくAPIが既にJSONを正しく返しているからでしょうか？ –

コールバックで 'console.log（response）'を実行しましたか？ – Wainage

はい私はしたし、areqエラーだけを表示します。私はそれが正しい方法で宣言することだと思う。しかし、私はどこを見つけません。また、ng-appをタグの内側に配置しました。 –

これはあなたの問題がある場合はわからないが、$http.success（および$http.error）されているdepreciatedをしたいです。代わりに、成功とエラーのためにコールバック関数を使用してください

var url = "https://restcountries.eu/rest/v1/alpha/co"; 
$http.get(url).then(
    function successCallback(response) { 
    $scope.mystats = response; 
    $scope.show = true; 
    console.log("inside success controller"); 
    }, function errorCallback(error) { 
    console.log(error); 
});

出典

2016-03-25 15:49:20 sjokkogutten

コードを改善しました。私は非難されていないものが欲しい。しかし問題は続く。 –

$ httpサービスでAPIデータをリクエストする方法

答えて

関連する問題