I'm having trouble connecting to my RESTful API within my AngularJS application. Despite my efforts, I'm not seeing any data being displayed on the screen.
It seems like I might be misunderstanding the usage of $http with promises. Any suggestions on what could be causing this issue?
This is the code snippet from my factory:
angular.module('mycompany.resources').factory('Forms', ['$http', '$q', function($http, $q) {
var Forms = {};
Forms.all = function() {
var deferred = $q.defer();
$http.get('/api/forms.json').then(function(response) {
console.log(response.data);
return response.data;
});
return deferred.promise;
};
return Forms;
}]);
And here's how my controller looks like:
angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
'use strict';
$scope.forms = Forms.all();
}]);
Finally, here's a snippet from my template:
<div ng-controller="formListController">
<ul class="form-list">
<li ng-repeat="form in forms">
<a class="form" href="#/forms/{{form._id}}">
<span class="title">{{form.title}}</span>
<span ng-if="form.lastPublished">Last published {{form.lastPublished | date:'M/d/yy'}}</span>
</a>
</li>
</ul>
</div>
When I manually input data into the scope, it shows up without a problem:
angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
'use strict';
$scope.forms = [
{
"_id": "530f69046c5a65ed1b5a3809",
"archived": false,
"lastPublished": new Date("2014-02-20 14:21:09 UTC"),
"title": "New Student Registration (2014 - 2015)"
}
];
}]);
After reviewing this example and this article, I believe that I should be able to utilize promises when fetching data using $scope.forms = Forms.all().