AngularJS和REST服务(AngularJS and Rest Service)

2019-07-30 04:16发布

我最近开始尝试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>

我用了超薄框架来创建一个REST接口。 我的数据库拥有目前有两列ID和一个标题命名表location_types。 我已经在浏览器中测试的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; 
});

我也用下面的代码来创建应用程序模块:

[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://本地主机/项目/ API / locationtypes”或者是外部服务器? 如果它的外部,那么你有一个CORS(跨源)问题。 除非我失去了一些东西,它看起来正确的给我。



Answer 2:

可能是CORS问题就像丹说。 您可以通过添加以下到您的模块配置绕过这一点。

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

删除由角设定的标题应该解决的问题CORS。 你也应该在您的API文件夹中添加一个.htaccess文件。 并补充一点:

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


文章来源: AngularJS and Rest Service