AngularJS GET请求烧瓶/ rest API

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控制台上看到一个错误，并指出。我一直在使用Google，但看起来可能有几件事。

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使用正确的参数调用并检索数据。最后，阅读文档（再次！）并寻求别人的帮助:)