Hiding parameter from URL ui-sref (ui.router)

Question

My HTML is as follows:

<a ui-sref="videoParent.Display.video({videoName:'[[sVid.slug]]', videoId:'[[sVid.videoID]]'})"><p>[[sVid.name]]</p></a>

I then retrieve the parameters videoName and videoId in my js file as follows

.state("videoParent.Display.video", { 
            url: "/video/:videoName/:videoId", 
            views: {
                'video_info@videoParent': { 
                    templateUrl: "/partials/starred_video.html", 
                    controller: "starredVideoController",
                    controllerAs: "starredVidsCtrl",
                    resolve: {
                        retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                            if ($stateParams.videoId) {                                   
                                var video = videosService.getVideoById($stateParams.videoId);
                                return video;
                            }
                        }]
                    }
                },

In my url I get a result like this:

../video/data-statistician/5

However, I do not wish to show the videoId (5) and would rather have my output as:

../video/data-statistician

I can achieve the desired result by writing the url part of my state as:

url: "/video/:videoName

but the problem is that if I write my code as above, the videoId will not be included in the $stateparams object.

How can I pass the video ID to the state without showing in the URL?

@lin could you kindly show me what you mean with a code illustration? Thank you for your response. — user7210105
– user7210105, Commented Feb 3, 2017 at 10:21

Ved · Accepted Answer · 2017-02-03 10:24:31Z

2

If you dont wish to show ID in URL but need to pass ID using stateparams, try this

.state("videoParent.Display.video", { 
            url: "/video/:videoName",
           params:{videoId:null}, 
            views: {
            'video_info@videoParent': { 
                templateUrl: "/partials/starred_video.html", 
                controller: "starredVideoController",
                controllerAs: "starredVidsCtrl",
                resolve: {
                    retrivedVideo: ['videosService', '$stateParams', function(videosService, $stateParams) {
                        if ($stateParams.videoId) {                                   
                            var video = videosService.getVideoById($stateParams.videoId);
                            return video;
                        }
                    }]
                }
                }

NOTE: Declaration of params in a state definition has changed to params: { id: {} } from params: ['id']

<a ui-sref="videoParent.Display.video({videoName:{sVid.slug}, videoId:{sVid.videoID}})"><p>[[sVid.name]]</p></a>

UI-router version: ~v.0.2.10

edited Feb 3, 2017 at 10:24

answered Feb 3, 2017 at 10:17

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

1 Comment

user7210105 Over a year ago

Worked like a charm. Thank you!

Sheikz · Accepted Answer · 2017-02-03 10:19:48Z

0

As you suggested, you can pass parameters without having them show in the URL by setting the url to

url: "/video/:videoName

You can add additional parameters (not in the URL) by specifying:

    params: {
        videoId: null
    }

If you want to navigate to the state and pass the parameters, you can do either:

In HTML:

<a ui-sref="videoParent.Display.video({videoName: 'Rambo', videoId: 5})">Go to video</a>

In Javascript:

$state.go('videoParent.Display.video', {videoName: 'Rambo, videoId: 5});

edited Feb 3, 2017 at 10:19

answered Feb 3, 2017 at 10:14

Sheikz

3171 silver badge8 bronze badges

4 Comments

user7210105 Over a year ago

That is what I am doing, Im using the HTML solution. Read the question carefully again and see were my problem is. Thank you for responding though.

lin Over a year ago

@Tatenda its mug to downvote the guys who try to help ya. This is the same approach that you marked as right answer (above).

user7210105 Over a year ago

@lin my reputation is 24 and less than the 125 needed for me to be able to downvote. It was not me who downvoted

Sheikz Over a year ago

Yes I forgot this important part when I first wrote it @Tatenda

Collectives™ on Stack Overflow

Hiding parameter from URL ui-sref (ui.router)

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related