通过Angular服务使用RESTful响应

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']);

Answer 1

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 ;))

Answer 2

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!')
    });        

});