CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
user7210105
user7210105

Reputation:

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

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?

Upvotes: 0

Views: 786

Answers (2)

Ved
Ved

Reputation: 12093

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

Upvotes: 2

Sheikz
Sheikz

Reputation: 317

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});

Upvotes: 0

Related Questions