Passing additional parameters in Angular

Question

I have a list of hotels and I am passing a URL friendly slug for the hotel in the parameter in the URL hotel/nice-hotel.

This is ok and fine.

I want to also pass the hotel ID to the next page but don't want pass it in the URL. What is the best way of doing this?

 .state('hotels', { 
 title: 'Hotels page',
 url: '/hotels',
 controller: 'HotelsController',
 templateUrl: 'app/components/hotels/hotelsView.html'
 })
 .state('hotel', { 
 title: 'Hotel page',
 url: '/hotel/:hotelName',
 controller: 'HotelController',
 templateUrl: 'app/components/hotel/hotelView.html'
 params:{hotelId:hotelId};
 })

The link I'm passing

<a type="button" ui-sref="hotel({hotelId:{{hotel.hotelId}},hotelName:{hotel.hotelName}})" href="/hotel/{{hotel.name | slugify}}" class="ach-hl-btn btn btn-warning">Select</a>

• Tarun Dugar: are you using ui-router?
• ottz0: yes i'm using ui-router
• Sergio Tulentsev: @ottz0: well, show your route for the "next page" then

Answer 1

Since you are using ui-router, you can use params:

.state('stateName', {
 //other config
 params: {
 id: id_value
 }
})

And you can access the value in your controller using $stateParams:

app.controller('Ctrl', ['$scope', '$stateParams', function($scope, $stateParams) {
 console.log($stateParams);
}]

• ottz0: how do I use it in the link. href="/hotel/{{hotel.name | slugify}}

Answer 2

.state('stateName', {
//other config
controller:stateNameControler,
params: {
 id: id_value
}})

this may raise some errors if you son't accept the stateParams in the controller of that state

app.controller('stateNameControler', ['$scope', '$stateParams', function($scope, $stateParams) {
console.log($stateParams);}]

If you don't want your params at the link,you can use params in the sateprovider like this

.state('playgame',{
 url: "/play",
 params:{ src :null,
 gameName:null} ,
 templateUrl: "partials/play.html",
 controller:'gamePlayController'
 })

Now on your corresponding controller

mainApp.controller('gamePlayController', ['$scope','$state','$http','Game','Facebook','$stateParams', function($scope,$state,$http,$Game,Facebook,$stateParams){
 var imageElement=document.getElementById("image");
 imageElement.src=$stateParams.src;
 // $scope.dagi=$stateParams.data;
 console.log($stateParams.gameName);
 $scope.goBack=function(){
 $state.go($stateParams.gameName);
 }
 }]);

In your mark up

<button ng-click="onClick()"></button>

and your function `

$scope.onClick(){$state.go('stateName',{'src':dataURL,'gameName':$scope.gameName}); }

• ottz0: How do I use it in the link?
• ottz0: How do you use the link though? <a type="button" ui-sref="hotel({hotelId:{{hotel.hotelId}},hotelName:{hotel.hotelName}})" href="/hotel/{{hotel.name | slugify}}" class="ach-hl-btn btn btn-warning">Select</a>
• Dagm Fekadu: oh okay you can call a function on button click and do this , inject $state, in the controller $state.go("stateName",{param:value,param:value}) I will update the answer for you
• Dagm Fekadu: dont forget to inject $state
• Dagm Fekadu: How does it go for you?

Answer 3

Seeing the hotel name was being passed in the URL, it is not needed in the params. It can still be accessed in the subsequent page using $stateParams

Using ui-router

 .state('hotels', { 
 title: 'Hotels page',
 url: '/hotels',
 controller: 'HotelsController',
 templateUrl: 'app/components/hotels/hotelsView.html
 })
 .state('hotel', { 
 title: 'Hotel page',
 url: '/hotel/:hotelName',
 controller: 'HotelController',
 templateUrl: 'app/components/hotel/hotelView.html',
 params:{
 hotelId:{key:'value'},
 }
 })

The link was passed using ui-sref

<a type="button" ui-sref="hotel({hotelId:hotel.hotelId, hotelName:hotel.name})" >Select</a>

This can be accessed in the controller of the hotel pages by using $stateParams

console.log($stateParams);