Passing params from Angular to Rails

Question

I have a Rails application, and am exposing an API to be used by an Angular front-end. I am using the will-paginate gem for paging my large dataset. The gem expects a :page to be passed via the params.

The buttons on the page are working fine, and calling the nextPage or prevPage functions, but for some reason the params with the page number are not being passed to the Rails controller.

When the user presses the next or previous buttons, I wish to have the paeg of data delivered from the rails controller and refreshed on screen.

Related question: Rails will_paginate gem with angular.js to do pagination

app/controllers/api/data_sources_controller.rb

class Api::DataSourcesController < Api::BaseController
  def index
    Rails.logger.debug("index: datasources, page: #{params[:page]}")
    render json: Cosmic.paginate(:page => params[:page], :per_page => 50)
  end
end

app/assets/javascripts/controllers/DatasetController.js.coffee

angular.module('assaypipelineApp').controller "DatasetController", ($scope, $routeParams, $location, DataSet) ->
  $scope.currentPage = 1

  $scope.init = ->
    @panel_id = $routeParams.panel_id
    console.log("dataset init: #{@panel_id}")
    @datasetsService = new DataSet(serverErrorHandler)
    $scope.datasets = @datasetsService.all({page: $scope.currentPage})


  # pagination
  $scope.prevPage = ->
    console.log("prev #{$scope.currentPage}")
    $scope.currentPage-- if $scope.currentPage > 0
    $scope.datasets = @datasetsService.all({page: $scope.currentPage})


  $scope.nextPage = ->
    console.log('next')
    $scope.currentPage++
    $scope.datasets = @datasetsService.all({page: $scope.currentPage})

app/assets/javascripts/services/DataSetService.js.coffee

angular.module('assaypipelineApp').factory 'DataSet', ($resource, $http) ->
  class DataSet
    constructor: (errorHandler) ->
      console.log('dataset constructor')
      @service = $resource('/api/data_sources/:id',
        {id: '@id'},
        {update: {method: 'PATCH'}})
      @errorHandler = errorHandler

      # Fix needed for the PATCH method to use application/json content type.
      defaults = $http.defaults.headers
      defaults.patch = defaults.patch || {}
      defaults.patch['Content-Type'] = 'application/json'

    all: ->
      @service.query((-> null), @errorHandler)

    find: (id, successHandler) ->
      @service.get(id: id, ((data_set)->
        successHandler?(data_set)
        data_set),
       @errorHandler)

In the view

<ul class="pagination pull-right">
    page {{currentPage}}
    <li ng-class="{disabled: currentPage == 0}">
        <a href ng-click="prevPage()">« Prev</a>
    </li>
    <li ng-repeat="n in range(pagedItems.length)"
        ng-class="{active: n == currentPage}"
    ng-click="setPage()">
        <a href ng-bind="n + 1">1</a>
    </li>
    <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
        <a href ng-click="nextPage()">Next »</a>
    </li>
 </ul>

Answer 1

Well I solved it, with the help of this book: https://leanpub.com/angularails

The answer was actually quite simple.

# pagination
$scope.setPage = (newPage) ->
  newPage = 1 if newPage < 1
  $scope.currentPage = newPage
  $scope.getPage() 

$scope.getPage = () ->
  http =
     method: "GET"
     url: "/api/data_sources"
     params: 
         page: $scope.currentPage
  $http(http)
     .success (response) ->
       console.log(response)
       $scope.datasets = response