AngularJS, creating a resource hash

Question

Trying to take a url and in an AngularJS controller redirect that request to the best place to get the json data. The VideoSearchCtrl is bound to the search form. The url generated is correct for the template so I'm using the controller to redirect it to the place for the json data.

GuideControllers.controller('VideoSearchCtrl', ['$scope', 'VideoSearch',
    function($scope, VideoSearch) {
        var pattern = new RegExp(".*/search\\?=(.*)");
        var params = pattern.exec( document.URL )[1];//redirect to videos to execute the search for the data
        $scope.videos = VideoSearch.query({ resource: "videos", action: "search", q: params });
    }
]);

This sends /videos/search?q=xyz in to the query. The factory creates the resource:

var VideoSearchServices = angular.module('VideoSearchServices', ['ngResource']);

VideoSearchServices.factory('VideoSearch', ['$resource',
    function($resource){
        return $resource("/:resource/:action:params", {resource: "@resource", action: "@action", params: "@params"}, {
            query: {
                isArray: true,
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "X-Requested-With": "XMLHttpRequest"
                }
            }
        });
    }
]);

But the server gets the url as /videos/search%fq=xyz, not /videos/search?q=xyz and therefore the "show" method is being invoked instead of a custom "search" action. Obviously there is some escaping somewhere? Or maybe the "?" is also a special pattern the resource factory looks for? Probably obvious to someone used to AngularJS or javascript for that matter.

I have a template for search and the json is retrieved from a different location. Both work but I can't ask for the json with the above code.

apneadiving · Accepted Answer · 2013-10-18 21:57:01Z

1

First, do:

return $resource("/:resource/:action", {resource: "@resource", action: "@action"}, {

Then:

$scope.videos = VideoSearch.query({ resource: "videos", action: "search", q: params });

The point is params are not a part of the url you have to declare to the resource, you just declare resource and action then you add params which is natural for all routes

edited Oct 18, 2013 at 21:57

answered Oct 18, 2013 at 21:49

apneadiving

116k26 gold badges225 silver badges215 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

pferrel Over a year ago

Got it, thanks. Actually you need to exclude "?=" from the 'params' so the regex has been updated in my question. The "?=" will be added by the resource query, just pass the key values pairs.

apneadiving Over a year ago

Yes params is just an object

apneadiving Over a year ago

see jquery-howto.blogspot.be/2009/09/…

pferrel Over a year ago

Sorry, I did +1. I'll figure it out. Anyway in the case above I removed the "?q=" so did: $scope.videos = VideoSearch.query({ resource: "videos", action: 'search', q: params }); This seems to imply I'll have to parse more complex prams in my controller and pass them in as separate key-value pairs? Seems like I'm doing things the wrong way? Is there some way to get that whole param string parsed into a param hash? Something that works for /videos/search?q=xyz&genre=horror&prec=true...

pferrel Over a year ago

Ah, the jquery-howto link may be the answer, thanks.

pferrel · Accepted Answer · 2013-10-19 20:43:57Z

0

Actually there is a better way to do this with $location from Angular and jQuery's extend that should work with any future params that are added. Will only have to add the new params to the query factory.

GuideControllers.controller('VideoSearchCtrl', ['$scope', '$location', 'VideoSearch',
   function($scope, $location, VideoSearch) {
      var route = jQuery.extend(
         { resource: "videos", action: 'search' },
         $location.search()
      );
      $scope.videos = VideoSearch.query(route);
   }
]);

answered Oct 19, 2013 at 20:43

pferrel

5,7006 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

AngularJS, creating a resource hash

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related