I am using states to go from page to page. From one of URLs I am reading parameter from URL (id) and I can easily do this when defining state.
.config(function($stateProvider) {
$stateProvider
.state("testing", {
url: "/testSession/:id",
controller: "UserTestSessionController",
templateUrl: "./app/components/userTestSession/user-test-session.html",
controllerAs: "vm"
})
})
My URL looked like this: localhost:8000\testSession\id
If I change URL to look like this: localhost:8000\testSession\id?otp="someStringValue" can I somehow define otp in url param of state? Or do I need to change it totally?
You can just add ?opt to the url
If you need to have more than one, separate them with an '&'
.config(function($stateProvider) {
$stateProvider
.state("testing", {
url: "/testSession/:id?otp",
controller: "UserTestSessionController",
templateUrl: "./app/components/userTestSession/user-test-session.html",
controllerAs: "vm"
})
})
Related
Decently new to Angular, trying to figure out the correct way to use $stateProvider.
here is my current setup
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders_edit', {
url: '/users/:userId/orders/:orderId/edit',
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
})
}])
This setup works fine, but what i would like to do is something like this.
$stateProvider
.state('users_orders', {
url: '/users/:userId/orders',
templateUrl: '/assets/orders/users/index.html',
controller: 'UserOrdersController'
})
.state('users_orders.edit', {
url: '/:orderId/edit',
views: {
edit: {
templateUrl: '/assets/orders/users/edit.html',
controller: 'UserOrderController'
}
}
})
}])
This setup doesnt work though, when i click on my edit link it changes the url, but stays on the same page. Am I doing the setup wrong?
In order to make the second solution work you should have in index.html a
<div ui-view="edit"></div>
I have the following code for states:
.config(function ($stateProvider, $urlRouterProvider, CONSTANTS) {
$urlRouterProvider.otherwise('/cyo');
$stateProvider.state('pri', {
url: '/pri',
controller: 'priController',
templateUrl: CONSTANTS.PRI_TEMPLATES.PRI_TEMPLATE_URL,
redirectTo: 'pri.size'
}).state('rec', {
url: '/rec',
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
});
The URL is being generated is http://adc.com/REC/1440/#
1440 being a ID that changes depending upon a prod Cat. the template is not loaded with this url. but as soon I add '/rec/' after the current url the template is loaded - http://adc.com/REC/1440/#/rec/ the page loads correctly
I am not able to understand how to get this fixed.
Ayush
You should define the state paramaters when you define the state.
Try this:
.state('rec', {
url: '/rec/:id',
params: {id: 'defaultValue'}, // optional
controller: 'recController',
controllerAs: 'recCtrl',
templateUrl: CONSTANTS.REC_TEMPLATES.REC_TEMPLATE_URL
})
And the html code:
<a ui-sref='rec({id: 123})'>Go to rec</a>
I am arriving on bookDetails state form some other link. Here bookDetails state's template has links for different tabs (or templates). And associated controller EditBookController has a json file using which I am building forms in different tabs with states like bookDetails.basic and bookDetails.publisher which use parent EditBookController. It's working fine. How to directly display the default bookDetails.basic instead of making user click the link? If I make bookDetails abstract(abbstract:true) and provide an empty link to bookDetails.basic I get following error Cannot transition to abstract state 'bookDetails'
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url:'/home',
controller: 'HomeController',
templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
})
.state('books', {
url:'/books',
controller: 'BooksController',
templateUrl: '/static/publisher/views/Book_Listing_Template.html'
})
.state('bookDetails', {
url : '/books/:b_id',
controller: 'EditBookController',
templateUrl: '/static/publisher/views/Product_Page_Template.html'
})
.state('bookDetails.basic', {
url : '/basic',
templateUrl: '/static/publisher/views/tab1.html'
})
.state('bookDetails.publisher', {
url : '/publisher',
templateUrl: '/static/publisher/views/tab2.html'
})
A plunk with similar problem. but code is different On clicking form it should land on the profile profile form.
I created working example here
There is similar question: Redirect a state to default substate with UI-Router in AngularJS
The solution comes from a cool "comment" related to an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)
https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373
In the state definition I added ONLY one setting to bookDetails state, the: redirectTo: 'bookDetails.basic',. Let's have a look:
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url:'/home',
controller: 'HomeController',
templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
})
.state('books', {
url:'/books',
controller: 'BooksController',
templateUrl: '/static/publisher/views/Book_Listing_Template.html'
})
.state('bookDetails', {
// NEW LINE
redirectTo: 'bookDetails.basic',
url : '/books/:b_id',
controller: 'EditBookController',
templateUrl: 'static/publisher/views/Product_Page_Template.html'
})
.state('bookDetails.basic', {
url : '/basic',
templateUrl: '/static/publisher/views/tab1.html'
})
.state('bookDetails.publisher', {
url : '/publisher',
templateUrl: '/static/publisher/views/tab2.html'
})
And now - only these few lines will do the miracle:
app.run(['$rootScope', '$state',
function($rootScope, $state) {
$rootScope.$on('$stateChangeStart',
function(evt, to, params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo, params)
}
}
);
}]);
This way we can adjust any of our states with its default redirection...Check it here
From Directing the user to a child state when they are transitioning to its parent state using UI-Router:
Either change the bookDetails.basic state to:
.state('bookDetails.basic', {
url : '',
templateUrl: '/static/publisher/views/tab1.html'
})
Or add the following routing:
$urlRouterProvider.when('/books/{b_id}', '/books/{b_id}/basic');
Try to add $state.go('bookDetails.basic') inside EditBookController. If I understood you< this will help.
Can someone see why this is not working? /series is not loading the Gallery, however the /series/:id/seasons part is working. (Its not a missing ng-view problem see working code below!)
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
if i change it to this it works but thats not what i want:
angular.module('xbmcremoteApp')
.config(function ($stateProvider) {
$stateProvider
.state('series', {
url: '',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
}).state('series.gallery', {
url: '/series',
templateUrl: 'app/series/series-gallery/series-gallery.html',
controller: 'SeriesGalleryCtrl'
}).state('series.seasons', {
url: '/series/:id/seasons',
templateUrl: 'app/series/seasons/seasons.html',
controller: 'SeasonsCtrl'
});
});
EDIT and soltuion:
My post lacked some information. To make that clear: I want to display a gallery when the /seriesurl is called. And i want to display the seasons with the seasons url. No more views!
Found an very easy solution. Setting the abstract property to true forces the stateprovider to use the child view.
....
.state('series', {
abstract:true, //adding this line makes the states work as expected
url: '/series',
templateUrl: 'app/series/series.html',
controller: 'SeriesCtrl'
})
....
In the first definition the url /series is evaluated as a root state 'series'
.state('series', {
url: '/series', // url evaluation will stop here, because
... // there is a match for /series
}).state('series.gallery', { // this will never be reached via url
url: '', // but ui-sref="series.gallery" will work
...
While the second mapping does distinguish both states, and '/series' will navigate to 'series.gallery' state :
.state('series', {
url: '', // url like "#" will navigate there
...
}).state('series.gallery', { // url /series will trigger this child state
url: '/series',
...
In general, if states should be unique by url, each of them should have some defintion. So mostlikely this should be working as inteded:
.state('series', {
url: '/', // url like "#/" will navigate to series
...
}).state('series.gallery', { // url '/series' will trigger this
url: '^/series',
...
check the magical sign: ^:
Absolute Routes (^) (cite:)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
I have states in 2 languages, like this:
$stateProvider
.state('contacts', {
url: "/contacts",
templateUrl: 'contacts.html'
});
$stateProvider
.state('contacts.edit', {
url: "/edit",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos', {
url: "/contatos",
templateUrl: 'contacts.html'
})
$stateProvider
.state('contatos.editar', {
url: "/editar",
templateUrl: 'contacts.html'
})
Right now I'm looping an array to push all my states.
Is there another way to do that?
Sure. Your state name isn't used for what the user does, so that doesn't need to be translated. Only the URL does. Unfortunately ui-router doesn't yet support having multiple URLs in a single state, but somebody has a solution using urlMatcherFactory decoration here:
https://github.com/angular-ui/ui-router/issues/185#issuecomment-48124930