Question

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

GET to / materials /：id获取材质对象。

GET / materials /：id HTTP / 1.1主机：api.teech.io Teech-Application-Id：   [app 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对象（我认为已经很清楚了）

Answer 1

在您的Controller（注入此工厂的地方）中，您可以使用名为$ 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>

我希望我没有理解你的排错。

Answer 2

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

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

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

然后在控制器内执行：$api.get( ... );调用“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。您可能还希望每次都重新查看默认对象，以确保每个函数调用都使用一个干净的对象。

然后说不正确，我会更新我的答案：）

在angularjs中使用restful api发出get请求

2 个答案: