Consuming RESTful response via Angular service

Question

I'm following scotch.io's tutorial on building a RESTful API while trying to get familiar with the MEAN stack.

I've followed pretty much everything so far, and got my RESTful API sending out JSON as intended. Should I try to access it via browser address bar or try it out with Postman it works.

I'm having problems with the consumption of said JSON response.

According to the tutorial, the Angular app is divided in controllers and services. The service uses $http to call the RESTful endpoint. My doubt is where and how should I use that service to call for the data.

Is it in the controller? Is the service exposed in a way that I can add its response to $scope?

I'm new to Angular/client-side routing, so please be gentle:) My code is below.

(Blog) Controller:

angular.module('BlogCtrl', []).controller('BlogController', function($scope, $http) { $scope.tagline = 'Blog page!'; // can and should I call the service here? });

Service:

angular.module('BlogService', []).factory('Post', ['$http', function($http) { return { // call to get all posts get : function() { return $http.get('/api/blog'); } }]);

Routes:

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider // blog page that will use the BlogController .when('/blog', { templateUrl: 'views/blog.html', controller: 'BlogController' }) $locationProvider.html5Mode(true); }]);

Angular App:

angular.module('myApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'BlogCtrl', 'BlogService']);

akn · Accepted Answer · 2016-01-19 17:51:41Z

Yes, you can make $http call in your BlogController.

However if you want to use your 'Post' factory, you should inject it to controller

angular.module('BlogCtrl', []).controller('BlogController', function($scope, Post) {...}

and make the request

Post.get().then( function(response){console.log(response.data)}, function(errorResponse){/*...*/} );

(I think you should also read about $resource (https://docs.angularjs.org/api/ngResource/service/$resource). Maybe it is something what you could use to replace your Post factory ;))

no need to create new instance, factory doesn't return this like a service does
Thank you for replying! Unfortunately, it isn't working. Nothing shows up at console, either response or errorResponse. Any thoughts?

charlietfl · Accepted Answer · 2016-01-19 17:55:21Z

You want to inject the service into controller ( or anywhere else you would use it) and then make the function call using the injected service object

angular.module('BlogCtrl', []) .controller('BlogController', function($scope, Post) { $scope.tagline = 'Blog page!'; // Use service to get data Post.get().then(responsePromise){ $scope.someVariable = responsePromise.data; }).catch(function(err){ console.warn('Ooops error!') }); });

Note that BlogService is a module name and Post is his factory name, so it probably won't work ;)
Thank you for replying! sadly it's not working. If I assign responsePromise.data to $scope.posts, wouldn't ng-repeat be able to use x in posts? Also, I think something could be wrong with your syntax. could you please check?

Collectives™ on Stack Overflow

Consuming RESTful response via Angular service

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related