对Flask / rest API的AngularJS GET请求

Question

如果可能，我需要一些帮助。 我们正在构建一个内部Web应用程序，并已决定使用AngularJS。 一切都进行得很好，但是现在我们正在尝试集成/测试对Flask REST API的调用。 以下是我的数据，并在我的API中进行了模拟。

machine_data = {
    "machine1": {
        "machine_name": 'LX1host',
        "machine_model": '12345678',
        "machine_serial": '87654321'
    }
}

我试图从我的观点传递一个变量，以返回上述结构。 这是API方法。

@app.route(v1_root_machine, methods=['GET'])
def machine_list():

    try:
        if 'hostname' in request.args:
           target = request.args['hostname']
    except:
        target = None

    machines = machine_data

    if not target:
       return general_error(error="No machines...")

    message = {"status": 200,
           "message": machines
           }

    resp = jsonify(message)
    return resp

我看到该呼叫进入并在Flask端收到200，但在JS控制台上确实看到一个错误，它指出。 我一直在谷歌搜索，但看起来可能是几件事。

 ConsoleAgent: Error: [$resource:badcfg] http://errors.angularjs.org/1.3.15/$resource/badcfg?p0=query&p1=array&p2=object
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417
    at q.then.p.$resolved (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js:9:330)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:112:113
    at n.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:15)
    at n.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:123:106)
    at n.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:293)
    at l (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:81:240)
    at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:85:342)
    at XMLHttpRequest.F.onload (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:86:367) (url: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js) in :327

这是我的观点摘要。

<tr ng-repeat="machine in data_table.message | filter:searchText">
 <td><a ui-sref="machineRoute({hostname: machine.hostname">machine.hostname </a></td>

我的角度模块和配置。

var app = angular.module("app", ['ui.router','ngResource','testServices']);

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('machineRoute', {
            url: '/machineRoute/:hostname',
            templateUrl: './machines.html',
            controller: 'machinesController'
        })
});

控制器：

app.controller('machinesController', function ($scope, machineService) {
    $scope.data_table = MachineService.query();
});

service.js

    var boxServices = angular.module('boxServices', ['ngResource']);

    boxServices.factory('MachineService', ['$resource',
      function($resource){
        return   $resource('http://127.0.0.1:5000/v1.0/machineroute/:hostname',                  {hostname: "@hostname"}, {
 query: {method:'GET', params: {}, isArray:false}
    });
  }]);

我也可以使用成功的httpie进行此调用，因此我很确定这是我的角度设置，但是我无法弄清楚如何正确地传递变量。

http GET http://127.0.0.1:5000/v1.0/machineroute/ hostname=testhost

这是我从httpie电话回来的包裹。

HTTP/1.0 200 OK
Access-Control-Allow-Headers: Cont
Access-Control-Allow-Methods: GET,
Access-Control-Allow-Origin: *
Content-Length: 1685
Content-Type: application/json
Date: Mon, 11 May 2015 22:50:41 GM
Server: Werkzeug/0.10.4 Python/2.7

{
    "message": {
       "machine1": {
           "machine_name": 'LX1host',
           "machine_model": '12345678',
           "machine_serial": '87654321'
        }
    },
    "status": 200
}

提前致谢..

Answer 1

因此，我相信我们找到了我的问题，并且这似乎是一个简单的理解问题。

总的来说，这似乎是我理解$ scope和$ stateParams用法的方式。 由于我一直在尝试使用ui-router解决方案，因此我一直没有找到解决方案。 从快速参考。

$stateParams
A service that is populated by the current state's parameters. Useful for injecting into your own controllers or services to access the parameters. It will have one key per url parameter.

Note: it must be injected into a controller directly attached to the desired state

所以这个控制器方法不对

app.controller('machinesController', function ($scope, machineService) {
    $scope.data_table = MachineService.query();
});

使用$ stateParms，外观正常。

app.controller('machinesController', function ($scope, $stateParams, machineService) {
    $scope.data_table = machineService.get({hostname:$stateParams.hostname});
});

那么我的工厂就可以简化它。

snip..
  boxServices.factory('MachineService', ['$resource',
      function($resource){
        return   $resource('http://127.0.0.1:5000/v1.0/machineroute/:hostname',   {});
    };
..snip

完成这些更改后，我可以看到使用正确的参数调用了我的API并检索了数据。 最后，再次阅读文档并寻求他人的帮助：）