在angularjs中使用restful api发出获取请求答案

【问题标题】：Make a get request with restful api in angularjs在angularjs中使用restful api发出获取请求
【发布时间】：2013-10-15 23:05:21
【问题描述】：

这是我在这里的第一个问题，如果已经讨论过我要问的问题，请提前抱歉。我是 angularjs 的新手，我很确定这不是一个大问题，但我不明白我必须做什么。我正在使用 API teech.io，我想获得一些经验来学习如何使用它们。我的问题是：通过 http 发出 GET 请求（每个用户都有一个应用程序密钥和一个应用程序 ID），例如对材料。材料的文档是这样说的：

对 /materials/:id 的 GET 获取材料对象。

GET /materials/:id HTTP/1.1 主机：api.teech.io Teech-Application-Id： [应用 ID] Teech-REST-API-Key：[API 密钥]

<!DOCTYPE html>
<html>
<head>

<!-- INCLUDE REQUIRED THIRD PARTY LIBRARY JAVASCRIPT AND CSS -->
    <script type="text/javascript" src="js/angular.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="teechpadController2.js"></script>
</head>
<body>

app.js 就是这个

var app = angular.module('TeechTest',[]);

teechpadController是这个

teechpad.factory('$api', function($http) {
  var defaults = {
   method: null,
   url: null,
   headers: {
    'Teech-REST-API-Key': api.teech.io.apikey,
    'Teech-Application-Id': api.teech.io.appid.
   }
  };

  var req = function(method, url, config) {
   defaults.method = method;
   defaults.url = 'http://api.teech.io' + url;
   var h = angular.extend({}, defaults, config);
   console.log(heart);     
   return $http(heart);
  };

  return {
   get: function(url, config) {
    return req('GET', url, config);
   },

   put: function(url, data, config) {
    defaults['Content-Type'] = 'application/json';
    defaults['data'] = data;
    return req('PUT', url, config);
   },

   post: function(url, data, config) {
    defaults['Content-Type'] = 'application/json';
    defaults['data'] = data;
    return req('POST', url, config);
   },

   delete: function(url, config) {
    return req('DELETE', url, config);
   }
  }



 });

到目前为止我所理解的是 teechpadcontroller 重新定义了 PUT-POST-DELETE-GET 方法。现在，我如何在控制器中使用例如 get 方法？或者我应该创建一个其他控制器然后在那里使用 $app 吗？再次抱歉，我在这里和 angularjs 都很新。最后但并非最不重要的一点是，我使用 JSON 对象（我认为这已经很清楚了）

【问题讨论】：

您所称的teechpadController 看起来像服务或工厂。当您创建一个名为h 的变量时，您还记录了heart。如果您要使用 REST，我建议您使用 ngResource 而不是 $http。最后，如果您创建一个包含您最佳尝试的 jsfiddle.net 或 plnkr.co 或 jsbin.com，您将获得更快的答案。
我是新手，不知道 jsfiddle 或 plnkr.co。

标签： javascript api http angularjs

【解决方案1】：

在你的控制器（你注入这个工厂的地方）你可以使用这个名为 $api 的工厂。

这个$api暴露的函数是returncaluse中返回的四个函数：

return {
    get: function(url, config) {
      ...
    },

    put: function(url, data, config) {
      ...
    },

    post: function(url, data, config) {
      ...
    },

    delete: function(url, config) {
      ...
    }
}

所以在你自己的控制器中你可以像这样使用它：

JavaScript

angular.module('myModule',['TechTest']).controller('myCtrl',function($api){
    var customUrl = "/PATH/TO/ENDPOINT",
        customConfig = {}; // might not be needed.
    $api.get(customUrl, customConfig).success(function(data){
        $scope.apiResult = data;
    });
})

HTML（通常需要了解您的控制器）

 <!-- include scripts -->
 <body ng-app="myModule">
    <div ng-controller="myCtrl">
        <div>{{apiResult}}</div>
    </div>
</body>

希望我没有误解你的问题。

【讨论】：

然后，我想在我的 index.html 上查看请求的结果，所以，只是看看是否一切正常。我必须做什么？只有 {{api}} 在索引中？
我希望我的编辑对于如何在标记中使用结果数据对您有意义。
首先，谢谢！其次，我按照你说的做了。我已根据您的指示更改了 html。然后，我更新了 teechpadController.js，添加了你写的内容（我的意思是你写 javascript 的地方）。此时，当我尝试查看结果时，在 index.html 中，我只能看到 {{apiResult}}。事实上，控制台（萤火虫）向我返回了一个错误，例如：错误：未定义 api，然后有很多行都提到了@http。所以我认为我对 customUrl 变量以及 appkey 和 app id 有误。你能再帮我一次吗？
如果您需要更多关于rest api文档的信息，请随时问我
plnkr.co/edit/xQRN1XYmfhthvmkTbJy8?p=preview 尽我所能帮助你，由于安全原因，这个 plunkr 不起作用，但如果你在本地获取代码，你可以测试它并尝试理解这些概念.. 当然，您还需要修复 id 以及 Teech-API-keys/Teech-id（参见 3 TODO）

【解决方案2】：

现在，我如何在控制器中使用例如 get 方法？

您可以在您定义的任何控制器中使用您的“$api”，方法是将其添加到该控制器的可注射剂中

var app = angular.module('TeechTest',[]).factory('$api', function($http){ ... });
var controller = app.controller('ctrl', ['$api', function($api){ ... }]);

然后在你的控制器中调用你的“get”方法：$api.get( ... );。

请注意，您在两条不同的行中定义了“h”和“heart”，这可能只是一个错字，但它可能会绊倒您！

您对$api.get( ... ); 的函数调用将异步返回，您将在其中得到结果：

$api.get( ... ).success(function(response){ console.log(response); }); //success
$api.get( ... ).error(function(response){ console.log(response); }); //failure

这是一个延迟回调 - 请查看promise API 了解更多详细信息。您可能还想考虑每次都重置默认对象，以确保每次函数调用都使用干净的对象。

任何不正确的地方然后说，我会更新我的答案:)

【讨论】：

对不起，我完全不明白你的回答。我要做的第一步是创建一个文件“mycontroller.js”，然后复制并粘贴 var app = angular.module('TeechTest',[]).factory('$api', function($http){ ... }); var controller = app.controller('ctrl', ['$api', function($api){ ... }]); ?