Question

我最近开始尝试 AngularJS 。我正在构建一个简单的html5应用程序来更新 MySQL 数据库。

[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>

我使用Slim框架创建了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; 
});

我还使用以下代码创建app模块：

[controllers.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]。我错过了什么？

Answer 1

您的网址确实是“http：// localhost / project / api / locationtypes”还是外部服务器？如果它是外部的，那么你有一个CORS（交叉原点）问题。除非我遗漏了一些东西，否则它对我来说是正确的。

Answer 2

可能像Dan这样的CORS问题说。您可以通过将以下内容添加到模块配置来绕过此步骤。

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

删除Angular设置的标头应解决CORS问题。您还应该在api文件夹中添加.htaccess文件。并添加这个：

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

AngularJS和休息服务

2 个答案: