Is there any way to handle both /silukin/:start and /silukin, with condition if :start param not passed, then use '1' by default?
.state('app.silukin', {
url: "/silukin/:id",
views: {
'menuContent1': {
templateUrl: "templates/silukin.html",
controller: 'SilukinCtrl',
}
}
})
Check this API Reference. (click the $state - Provider). With latest UI-Router we can use new attributes for state defintion:
.state('app.silukin', {
url: "/silukin/:id",
views: {
'menuContent1': {
templateUrl: "templates/silukin.html",
controller: 'SilukinCtrl',
}
},
// define a parameter's default value
params: {
id: { value: "defaultValue" }
}
Check the API reference for more details
params (optional) object
A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.
Each parameter configuration object may contain the following properties:
value
array
squash
-- (see more in that resource)
Related
I have a state with url parameter.
Something like:
.state('MyState', {
url: '/contacts/{personName}',
templateUrl: '/app/templates/contacts.html',
controller: 'ContactsController',
params: {
personName: null
}
})
now, I want to use the $state.go syntax and to be able to pass the personName param to the url with the parameter.
So for example, if I call:
$state.go('MyState', {personName: 'john'});
The address bar will show: http://localhost:8080/#!/contacts/john
Right now the address bar is showing http://localhost:8080/#!/contacts/ and I don't know how to force the url to contain the personName. Other than that it works fine.
Just add your parameters with a default value on your state definition. Your state can still have an Url value.
$stateProvider.state('MyState', {
url : '/url',
templateUrl : "/app/templates/contacts.html",
controller : 'ContactsController',
params: {personName: 'defaultName'}
});
and add the param to $state.go() and navigate
$state.go('MyState',{personName: "MIT"});
Refer this:$state.go() with Parameter
Hope it helps..!
In your state definition, when you define "params" you don't have to add param in the url so replace :
url: '/contacts/{personName}',
with
url: '/contacts',
While defining state use the following syntax
.state('myState', {
url: '/contacts/:personName',
templateUrl: '/app/templates/contacts.html',
controller: 'ContactsController',
params: {
personName: {
array: false
}
}
})
Note: "Person Name be visible in url"
Ref: https://ui-router.github.io/ng1/tutorial/helloworld
I have a state like this in $stateProvider
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
});
and I must pass param section programmatically without using ui-sref or $state.go. Due to project choises I'm constrained to use this:
route: 'rubricacontatti.home'
How can I pass param to route?
I'm not sure how you are programmatically getting the value but the stateConfig has a params property that takes an object with any number of properties. Should be able to set it their.
$stateProvider.state('rubricacontatti.home', {
url: '/home/:section',
templateUrl: 'rubricacontatti/static/html/rubricacontatti.home.html',
params: {
myParam1: "programmatically set value"
}
});
See the $stateProvider docs.
I'm using AngularJD ui-router to capture my URL and send two parameters from that URL to my controller. Here are my requirements:
The first parameter is a mandatory integer (id)
The second parameter is an optional string (slug)
The two parameters are separated by a /
I want it to ignore any single trailing /
Currently, I'm doing this:
$stateProvider.state('mystate',
{
url: '/mystate/{id:int}{slug:(?:/[^/]+)?}',
params: {
slug: {value: null}
},
templateUrl: 'partials/mystate.html',
controller: function($stateParams) {
console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
}
}
For URL: mystate/1 This correctly captures:
$stateParams.id=1, $stateParams.slug=null
For URL: mystate/1/myslug This captures the wrong value for slug:
$stateParams.id=1, $stateParams.slug=/asdad
For URL: mystate/1/ This doesn't capture anything.
For URL: mystate/1/myslug/ This doesn't capture anything.
How can I write this so that it captures all four of the aforementioned URLs properly but doesn't pass any of the /s to the controller?
For optional trailing slash, you need to set strict mode to false in a config block:
angular.module('yourModule').config(['$urlMatcherFactoryProvider', function($urlMatcherFactoryProvider) {
$urlMatcherFactoryProvider.strictMode(false);
}]);
For having optional parameters, there's a long discussion here. At the end, they suggest using squash:
$stateProvider.state('mystate',
{
url: '/mystate/{id:int}/:slug',
params: {
slug: {value: null, squash: true}
},
templateUrl: 'partials/mystate.html',
controller: ['$stateParams', function($stateParams) {
console.log('$stateParams.id=',$stateParams.id, ' $stateParams.slug=',$stateParams.slug);
}]
}
squash has good documentation, if you set it to true, it omits the parameter from URL when it has the default value.
I would have a question concerning ui-router: when I invoke my router only with parameters all works fine.
My question now would be if it is possible to transfer also javascript- objects from my html to my router?
the invokaction of the router looks like this:
ui-sref="auth.name({parameter1: '{{parameter1}}', parameter2: '{{parameter2}}'})"
and this is my router:
function getScheduleConfirmationState() {
var state = {
name: 'auth.name',
url: '/url/:parameter1/:parameter2',
templateUrl: 'url/to/html/my.html',
controller: 'MyController',
controllerAs: 'vm',
resolve: {
myService: 'myService',
dataForController: function myFunction(myService, $stateParams) {
return myService.getDataFromBackend();
}
}
}
return state;
};
Yes you can, but you cannot supply them as parameter in the URL:
First of all you can put the object as it is into ui-sref:
ui-sref="auth.name({parameter1: parameter1, parameter2: parameter2})"
Your state would have to add one property params:
params: {
parameter1: null,
parameter2: null
}
Remove the parameters from the URL, since objects can only be transferred hidden:
url: '/url'
In the controller of the target state auth.name you would need to inject the $stateParams service. Then you can access these parameters by:
$stateParams.parameter1
$stateParams.parameter2
I hope the concept is clear enough for you. If not just let me know.
I have a state defined as such:
.state('dashboard.poor-calls', {
url: '/voice-quality/{callType}/{categoryTypeId}/{:categoryEntityId}/?{:tableView}',
template: '<poor-calls></poor-calls>',
reloadOnSearch: false
})
Notice that categoryEntityId is optional.
Is there a way to specify a default value for categoryEntityId if it's not provided in the state() definition, or does the controller of my <poor-calls> directive have to check for a missing categoryEntityId and assume the default value?
Yes, we can use params : {} configuration property:
.state('dashboard.poor-calls', {
url: '/voice-quality/{callType}/{categoryTypeId}/{:categoryEntityId}/?{:tableView}',
params: {categoryEntityId: 1}
template: '<poor-calls></poor-calls>',
reloadOnSearch: false
})
and we can even set what to do if that default value is provided, for example skip it from url (the squash setting):
params: {
categoryEntityId: {
value: 1,
squash: false,
},
},
See all the details here:
Angular ui router passing data between states without URL
How to pass parameters using ui-sref in ui-router to controller