如何使用$ http服务请求API数据

Question

I'm developing an app with Riot Games API but this example it's done with REST Countries API . 我正在使用Riot Games API开发应用程序，但此示例是使用REST国家API完成的。 https://restcountries.eu/rest/v1/alpha/co https://restcountries.eu/rest/v1/alpha/co

I use a MEAN.IO stack and this is my code: 我使用MEAN.IO堆栈，这是我的代码：

test.html 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 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");
    });
};                
});

When I refresh the page the code is executed until "before controller" console.log. 当我刷新页面时，代码将执行到“控制器之前” console.log。 It can't get inside lolData.controller. 它无法进入lolData.controller。 And in the browser console displays the following error. 并在浏览器控制台中显示以下错误。

And html doesn't accept the embeded javascript scope. 而且html不接受嵌入的javascript范围。

What am I missing? 我想念什么？

Update 1: 更新1：

I added the index.html in a codepen: Index.html 我在代码笔中添加了index.html： Index.html

And Header.html in a codepen too: header.html 还有一个Codepen中的Header.html： header.html

Answer 1

Not sure if this is your problem, but $http.success (and $http.error ) has been depreciated since v1.4.4. 不知道这是否是您的问题，但是$http.success ， $http.success （和$http.error ）已贬值。 Instead, use callback functions for success and error 而是使用回调函数来获取成功和错误

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

Answer 2

Your response object doesn't do what you think it does. 您的响应对象没有执行您认为的操作。

From angular's docs you see the response has multiple properties attached to the returned object. 从angular的文档中，您可以看到响应具有附加到返回对象的多个属性。

You want 你要

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

如何使用$ http服务请求API数据

问题描述

2 个解决方案

解决方案1
1 2016-03-25 15:49:20

解决方案2
0 2016-03-25 12:43:11

如何使用$ http服务请求API数据

问题描述

2 个解决方案

解决方案1 1 2016-03-25 15:49:20

解决方案2 0 2016-03-25 12:43:11

解决方案1
1 2016-03-25 15:49:20

解决方案2
0 2016-03-25 12:43:11