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使用正確的參數調用並檢索數據。最後，閱讀文檔（再次！）並尋求別人的幫助:)