1

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

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

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

<!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 对象（我认为这已经很清楚了）

4

2 回答 2

2

在你的控制器（你注入这个工厂的地方）你可以使用这个名为 $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>

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

于 2013-10-08T20:37:04.620 回答
0

现在，我如何在控制器中使用例如 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以获得更深入的细节。您可能还希望每次都重置默认对象，以确保每次函数调用都使用干净的对象。

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

于 2013-10-08T20:45:34.397 回答