{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 地球回转人心会变 的问题《AngularJS and Rest Service》','https://www.manongdao.com/q-543223.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I've recently started experimenting with AngularJS. I am building a simple html5 application that updates a MySQL database.
[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>
I used the Slim framework to create a Rest Interface. My database has currently one table named location_types with two columns id and title. I have tested the Rest service in the browser so under api/locationtypes I get the following JSON:
[{"id":"1","title":"Airport"},{"id":"2","title":"Bus Station"}]
I create the service in AngularJS using the following code:
[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;
});
I also use the following code to create the app module:
[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();
}
The problem is that I get no results after querying the service. The locationTypes array is of zero length when I debug. I am using the latest AngularJS release [1.0.1]. What do I miss?
Probably a CORS issue like Dan said. You can bypass this by adding the following to your module config.
Deleting the headers set by Angular should resolve the CORS issue. You should also add a .htaccess file in your api folder. And add this:
Is your URL really 'http://localhost/project/api/locationtypes' or is it an external server? If its external, then you have a CORS (cross origin) issue. Unless I'm missing something it looks correct to me.