AngularJS和REST服務

我最近開始與AngularJS試驗。我建立一個簡單的HTML5應用程序更新一個的MySQL數據庫。AngularJS和REST服務

[index.html的]

<!DOCTYPE html> 
<html ng-app="MyProject"> 
<head> 
    <title>My Project</title> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
    <script src="lib/angular-1.0.1.js"></script> 
    <script src="lib/angular-resource-1.0.1.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/services.js"></script> 
</head> 
<body> 
    <div id="main-content" ng-view> 
</body> 
</html>

我使用的超薄框架創建REST接口。我的數據庫目前有一個名爲location_types的表，其中有兩列id和title。我已經在瀏覽器中測試的REST服務，以便在API/locationtypes我得到以下JSON：

[{"id":"1","title":"Airport"},{"id":"2","title":"Bus Station"}]

我創建使用下面的代碼在AngularJS服務：

[services.js]

angular.module('myDB', ['ngResource']). 
factory('LocationTypes', function($resource) { 
    var LocationTypes = $resource('http://localhost/project/api/locationtypes', {}, { query: {method: 'GET', isArray: true}}); 
    return LocationTypes; 
});

我也使用下面的代碼來創建該應用模塊：

[控制研究ers.js]

angular.module('MyProject', ['myDB']). 
config(function($routeProvider) { 
    $routeProvider. 
     when('/locationtypes', {controller: LocationTypesCtrl, templateUrl:'forms/locationtypes.html'}). 
     otherwise({redirectTo:'/locationtypes'}); 
}); 


function LocationTypesCtrl($scope, LocationTypes) 
{ 
    $scope.locationTypes = LocationTypes.query(); 
}

的問題是，我沒有得到任何結果查詢售後服務。當我調試時，locationTypes數組的長度爲零。我正在使用最新的AngularJS版本[1.0.1]。我錯過了什麼？

來源

2012-06-28 user1173403

是您的URL真正的 'http：//本地主機/項目/ API/locationtypes' 或者是外部服務器？如果它的外部，那麼你有一個CORS（跨源）問題。除非我錯過了一些東西，否則它對我來說是正確的

來源

2012-06-28 21:48:59

像Dan說的可能是一個CORS問題。您可以通過將以下內容添加到模塊配置中來繞過此操作。

.config(function($httpProvider){ 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
})

刪除由Angular設置的標頭應解決CORS問題。你也應該在您的API文件夾中添加一個.htaccess文件。並補充一點：

Header set Access-Control-Allow-Origin "*"

來源

2013-08-13 07:46:41 vdclouis

AngularJS和REST服務

回答

相關問題