Search code examples
javascriptangularjsangularjs-resourceangularjs-factoryangularjs-ng-route

$routeParam does not pass variable through url with $resource factory


Code

var app= angular.module('myApp', ['ngRoute', 'ngResource']);

app.factory('Greeter', ['$resource',function($resource){
  return $resource(
    'http://123.com/processor-url.php',{
      /*inputName:inputName,*/
      callback: 'JSON_CALLBACK'
    },{
      query: {method:'GET',isArray:true}
    });
}]);

app
.controller('appointmentController', ['$scope','routeParams', 'Greeter',
  function($scope,$routeParams,Greeter){
    /*alert("yes");*/
    alert($routeParams);
    var x = Greeter.query({
        myvar: $routeParams
    });
    $scope.output = x;
}]);

app.controller('homeController', ['$scope', function($scope){
}])


/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
  $routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
  $routeProvider.otherwise({redirectTo: '/home'});
}]);

Data (from http://123.com/processor-url.php when myvar=1066)

[
    {
        "myCodeId": "1066",
        "myCodeName": "session test",
        "myCodeOwner": "dvg",
        "myCodeBody": "",
        "myCodeTimesUsedCount": "0",
        "myCodeValueAsMins": "0",
        "myCodeCreateDate": "2014-07-30 11:04:58",
        "myCodeLastEditDate": "2014-07-30 11:05:43",
        "isSnippet": "0",
        "isDeleted": "0",
        "isMyFavorite": "0"
    }
]

I ran with this code + the data that suppose to be the result of myvar=1066. There will be error of

TypeError: Cannot read property 'query' of undefined
    at new <anonymous> (.../urlTest/:29:24)

on the line where is

var x = Greeter.query({

I wonder where the mistake is? As I did inject Greeter inside the controller itself.

==Update 1]===

I updated the code by fixing all routeParam into routeParams.

Previous error is resolved. However, now the error becomes

Error: [$injector:unpr] Unknown provider: routeParamsProvider <- routeParams
http://errors.angularjs.org/1.2.0-rc.3/$injector/unpr?p0=routeParamsProvider%20%3C-%20routeParams

I maybe using the routeParams in a wrong way? Since what I wanted to do is that I assume routeParams will be the value of 1066 as thats what after the '/' symbol. Am I wrong in understanding its functionality?

Thanks


Solution

  • One issue i clearly see is the parameter mismatch for DI. This

     .controller('appointmentController', ['$scope', 'Greeter',
          function($scope,$routeParam,Greeter){
    

    should be

     .controller('appointmentController', ['$scope','$routeParam', 'Greeter',
          function($scope,$routeParams,Greeter){
    

    Also the service name is $routeParams