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 '^'.
Related
Below is my code for ui.router states :
$urlRouterProvider.otherwise("/");
$stateProvider.state('account', {
templateUrl: "/assets/views/app.html",
abstract: true
})
.state('account.home', {
templateUrl: "/assets/views/index.html",
url: '/home'
})
When the user tries to go to mydomain.com/ the state resolves to account.
But when user tries to go to mydomain.com/home/ the state resolves to invalid state and therefore the user is redirected to mydomain.com/ instead of account.home state.
Expected Result :
URL: mydomain.com to resolve to account state
URL: mydomain.com/ to resolve to account state
URL: mydomain.com/home to resolve to account.home state
URL: mydomain.com/home/ to resolve to account.home state
you can define ui-view in abstract state url, then you can use nested states using that view. Please see the following.
$stateProvider
.state('account', {
abstract: true,
url: "",
template: '<div ui-view="access">',
})
.state('account.home', {
url: '/home',
views: {
'access': {
templateUrl: '/assets/views/index.html'
}
}
}
also you can define this
<div ui-view="access">
in you app.html as well.
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'm developing an AngularJs application using UI-Router(-extras) in which I use the following setup:
.state('root', {
url: '/{language:(?:nl|en)}',
views: {
'root': {
templateUrl: 'app/root/root.html',
controller: 'RootController'
}
}
})
.state('root.main', {
views: {
'main': {
templateUrl: 'app/main/main.html',
controller: 'MainController'
}
},
sticky: true
})
.state('root.modal', {
url: '/{locale:(?:nl|fr)}',
views: {
'modal': {
templateUrl: 'app/modal/modal.html',
controller: 'ModalController'
}
}
})
The root state defines the language in the URL. Furthermore I have several modal and main states which have their own URL (i.e. root.main.home => /en/home).
Now I want to have some modal states that have no URL. How can I make a state ignore his parent's URL?
To answer:
how can a state ignore his parent's URL?
we have
Absolute Routes (^)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
$stateProvider
.state('contacts', {
url: '/contacts',
...
})
.state('contacts.list', {
url: '^/list',
...
});
So the routes would become:
'contacts' state matches "/contacts"
'contacts.list' state matches "/list". The urls were not combined because ^ was used.
Also check this: how to implement custom routes in angular.js?
In ui-router, when you call state.go, you can define options to prevent the location from changing by passing {location:false}. However, how do I define a state using $stateProvider.state so it doesn't change the location? I've defined a rule for custom URL handling, but now it is changing the location value.
I have foo state -
$stateProvider
.state('foo', {
url: '/foo'
templateUrl: '',
controller: function($scope) {
console.log('made it!');
}
});
I have a custom rule -
$urlRouterProvider.rule(function ($injector, $location) {
// some logic
return '/foo';
});
This works exactly how I want it to except that is changes the location and appends #/foo to the location. I don't want it appended.
I created working example here. It is extended version of the solution presented here: How not to change url when show 404 error page with ui-router
There is a snippet of code, which should show how to use "foo" state without url change.
Firstly, there is our rule, which will redirect to 'foo' state - just in case if the /home is passed as url (an example of decision)
$urlRouterProvider.rule(function($injector, $location) {
if ($location.path() == !"/home") {
return false;
}
var $state = $injector.get("$state");
// move to state, but do not change url
$state.go("foo", {
location: false
})
return true;
});
Here are our example states, which do have url setting
// States
$stateProvider
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
})
.state('parent', {
url: "/parent",
templateUrl: 'tpl.html',
})
.state('parent.child', {
url: "/child",
templateUrl: 'tpl.html',
controller: 'ChildCtrl',
})
Foo does not have url
.state('foo', {
//url: '/foo',
templateUrl: 'tpl.html',
});
Check it here
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