Problems extending HotTowel Dataservice to consume REST using restangular

Question

I am using Angular and Hottowel for the first time and I wanted to extend the dataservice to leverage the functionality of restangular to provide REST data into the rest of the hottowel app.

I have included restangular and have it making a successful REST get.

I realise that the restangular docs discuss using the promise directly within a controller so i am now wondering whether including it in the dataservice is viable.

The problematic function is getJobs. Its the only function that uses restangular. Its defined in dataservice as a function and also added to the dataservice variable to expose it. It has a matching function in the dashboard controller. Its also added to the list of promises in the dashboard controller. I have confirmed the function returns a list of objects within the restangular function. I get nothing in the dashboard controller even though the promise executes the then clause.

Any guidance gratefully appreciated.

Thanks

Simon

Code below:-

dataservice.js

(function () {
'use strict';

angular
    .module('app.core')
    .factory('dataservice',dataservice);

dataservice.$inject = ['$q','Restangular'];
/* @ngInject */
function dataservice($q,Restangular) {
    var service = {
        getPeople: getPeople,
        getMessageCount: getMessageCountXXX,
        getJobs: getJobs
    };

    return service;



    function getJobs() {
        var jobs = [];
        var baseJobs = Restangular.all('jobs');

        baseJobs.getList().then(function(jobs) {
            console.log("Within dataservice.getJobs");
            console.log(jobs);

        });
        return $q.when(jobs);
        console.log("EndofgetJobspost return shouldnt get here");       
    }


    function getMessageCountXXX() { return $q.when(72); }

    function getPeople() {
        var people = [
            {firstName: 'John', lastName: 'Papa', age: 25, location: 'Florida'},
            {firstName: 'Ward', lastName: 'Bell', age: 31, location: 'California'},
            {firstName: 'Colleen', lastName: 'Jones', age: 21, location: 'New York'},
            {firstName: 'Madelyn', lastName: 'Green', age: 18, location: 'North Dakota'},
            {firstName: 'Ella', lastName: 'Jobs', age: 18, location: 'South Dakota'},
            {firstName: 'Landon', lastName: 'Gates', age: 11, location: 'South Carolina'},
            {firstName: 'Haley', lastName: 'Guthrie', age: 35, location: 'Wyoming'}
        ];
        return $q.when(people);
    }
}   
})();

dashboard.Controller.js

(function () {
'use strict';

angular
    .module('app.dashboard')
    .controller('DashboardController', DashboardController);

DashboardController.$inject = ['$q', 'dataservice', 'logger'];
/* @ngInject */
function DashboardController($q, dataservice, logger, api) {
    var vm = this;
    vm.news = {
        title: 'helloWorld',
        description: 'Hot Towel Angular is a SPA template for Angular developers.'
    };
    vm.messageCount = 0;
    vm.people = [];
    vm.jobs = [];
    vm.title = 'Dashboard';


    activate();

    function activate() {
        var promises = [getMessageCount(), getPeople(), getJobs() ];
        return $q.all(promises).then(function() {
            logger.info('Activated Dashboard View');
        });
    }

    function getMessageCount() {
        return dataservice.getMessageCount().then(function (data) {
            vm.messageCount = data;
            return vm.messageCount;
        });
    }

    function getPeople() {
        return dataservice.getPeople().then(function (data) {
            vm.people = data;
            return vm.people;
        });
    }

    function getJobs() {
        console.log("Within getJobs");
        return dataservice.getJobs().then(function (data) {
            vm.jobs = data;
            console.log(data);
            return vm.jobs;
        }, function (reason){
            console.log(reason);
        });
    }
}



})();

Relevant part of dashboard.html:-

 <div class="row">
            <div class="col-md-6">
                <div class="widget wviolet">
                    <div ht-widget-header title="Jobs"
                         allow-collapse="true"></div>
                    <div class="widget-content text-center text-info">
                        <table class="table table-condensed table-striped">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Status</th>
                                    <th>Category</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="p in vm.jobs">
                                    <td>{{p.name}}</td>
                                    <td>{{p.description}}</td>
                                    <td>{{p.status}}</td>
                                    <td>{{p.category}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>    

Answer 1

The problem is, in your dataservice getJobs() function, you are not returning the jobs list that is coming from ajax call. Change that function with below code.

function getJobs() {

        var baseJobs = Restangular.all('jobs');

        return baseJobs.getList().then(function(jobs) {
            console.log("Within dataservice.getJobs");
            console.log(jobs);
            return jobs;

        });
    }