For example:
$stateProvider
.state('external', {
url: 'http://www.google.com',
})
url assumes that this is an internal state. I want it to be like href or something to that effect.
I have a navigation structure that will build from the ui-routes and I have a need for a link to go to an external link. Not necessarily just google, that's only an example.
Not looking for it in a link or as $state.href('http://www.google.com'). Need it declaratively in the routes config.
Angular-ui-router doesn't support external URL, you need redirect the user using either $location.url()
or $window.open()
I would suggest you to use $window.open('http://www.google.com', '_self')
which will open URL on the same page.
Update
You can also customize ui-router
by adding parameter external
, it can be true
/false
.
$stateProvider
.state('external', {
url: 'http://www.google.com',
external: true
})
Then configure $stateChangeStart
in your state & handle redirection part there.
Run Block
myapp.run(function($rootScope, $window) {
$rootScope.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams) {
if (toState.external) {
event.preventDefault();
$window.open(toState.url, '_self');
}
});
})
Note: Open Plunkr in a new window in order to make it working, because google doesn't get open in iFrame due to some security reason.