I am having an infuriating issue regarding ui-router. Everything works as I want, where all bad urls are sent to the 404 state. However, even though my default state is correctly rendered when the url is /#/, the url of / is redirected to /404/. How can I server the default state to both / and /#/?
app.js
MyApp.config( function ($stateProvider, $urlRouterProvider) { // For any unmatched url, send to 404 $urlRouterProvider.otherwise("/404/"); $stateProvider // Home (default) .state('default', { url: '/', resolve: { ... }, } });
Any help much appreciated.
I think this will accomplish your needs -
MyApp.config(function($stateProvider, $urlRouterProvider) { // the known route $urlRouterProvider.when('', '/'); // For any unmatched url, send to 404 $urlRouterProvider.otherwise('/404'); $stateProvider // Home (default) .state('default', { url: '/', resolve: { // ... } // .... }); });
I refered to this post. You may need to use a regular expression to handle routes with data.
Instead of the # in your URL you can use a query string too and grab it via $stateParams in a state.
Here is how you can do that -
// .... $stateProvider .state('default', { url: '/?data', templateUrl: 'templates/index.html', controller: 'defaultCtrl' })
And then you can use this below to go to home with data -
var toStateData = { key1: 'value1', key2: 'value2' } $state.go('default', {data: JSON.stringify(toStateData)});
You don't have to stringify the data in $stateParams but this will allow more options with one parameter. In the defaultCtrl controller you can get the passed query string like this -
var stateData = JSON.parse($stateParams.data); var key1 = stateData.key1; // ....
I wanted to do this only with states, so no url provider involved. I found the following solution which I think is good:
(sorry it's coffeescript)
$stateProvider. state('base.public.notFound', url: '^*path' templateUrl: 'views/layouts/404.html' )
Put this as the last state and you are done!
