At the moment, the url localhost/view/titles will use the route, controller and service below, and the server will return a list of all title objects. How do I extend the service to allow for additional query params, such as a result limit etc?

// main app module with route
var app = angular.module('app', ['ngResource']).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.when(
            '/view/:obj/:limit',
            {
                templateUrl: '/static/templates/titles.html',
                controller: 'titlesController'
            }
        )})

// list service
var listService = app.factory('listService', function ($q, $resource) {
        return {
            getList: function (obj) {
                var deferred = $q.defer();

                $resource('/api/view/' + obj).query(
                    function (response) {
                        console.log('good')
                        deferred.resolve(response);
                    }
                    ,
                    function (response) {
                        console.log('bad ' + response.status)
                        deferred.reject(response);
                    }
                )
                return deferred.promise;
            }
        }
    }
)


// controller
var titlesController = bang.controller('titlesController', function($scope, listService, $routeParams){
    $scope.titles = listService.getList($routeParams.obj);
})

At the moment, the url localhost/view/titles will use the route, controller and service below, and the server will return a list of all title objects. How do I extend the service to allow for additional query params, such as a result limit etc?

// main app module with route
var app = angular.module('app', ['ngResource']).
    config(function ($routeProvider, $locationProvider) {
        $routeProvider.when(
            '/view/:obj/:limit',
            {
                templateUrl: '/static/templates/titles.html',
                controller: 'titlesController'
            }
        )})

// list service
var listService = app.factory('listService', function ($q, $resource) {
        return {
            getList: function (obj) {
                var deferred = $q.defer();

                $resource('/api/view/' + obj).query(
                    function (response) {
                        console.log('good')
                        deferred.resolve(response);
                    }
                    ,
                    function (response) {
                        console.log('bad ' + response.status)
                        deferred.reject(response);
                    }
                )
                return deferred.promise;
            }
        }
    }
)


// controller
var titlesController = bang.controller('titlesController', function($scope, listService, $routeParams){
    $scope.titles = listService.getList($routeParams.obj);
})

• javascript
• angularjs

2 Answers 2

Below is the sample code:

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
  return $resource('phones/:phoneId.json', {}, {
    query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
  });
});

This is a broader answer to the question of how to pass params to your backend api with a query string using the ngResource module since I couldn't find straight forward instructions anywhere else.

ngResource Setup: Install the ngResource package from the mand line with bower or npm bower install angular-resource.

In the head element of the index.html page add the angular-resource script

<script src="lib/angular-resource/angular-resource.min.js"></script>

js/app.js: Add the dependencies. I'm leaving out the routes since I use ui-router which is a separate topic.

angular.module('app', ['app.controllers', 'app.services', 'ngResource'])

The view: templates/list.html

<input type="search" ng-model="filters.title" placeholder="Search">
<button ng-click="searchList(filters)">Submit</button>

<div ng-repeat="item in list">
  <p>{{item.title}} - {{item.description}}</p>
</div>

The controller: js/controllers.js

.controller('ListCtrl', function($scope, ListService) {
  $scope.searchList = function(filters){
    $scope.filters = { title: '' }; //This will clear the search box.
    $scope.list = ListService.query({title: filters.title});   
  }
})

The factory: js/services.js. Assumes you also will be doing get requests by the item id. If not leave out /:id, {id: '@id'}

.factory('ListService', function($resource) {
  return $resource('http://localhost:3000/api/view/:id', { id: '@id' });
})