How would I have ui-router go to an external link, such as google.com?
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.
You could use the onEnter
callback:
$stateProvider .state('external', { onEnter: function($window) { $window.open('http://www.google.com', '_self'); } });
Edit
Building on pankajparkar's answer, as I said I think you should avoid overriding an existing param name. ui-router put a great deal of effort to distinguish between states and url, so using both url
and externalUrl
could make sense...
So, I would implement an externalUrl
param like so:
myApp.run(function($rootScope, $window) { $rootScope.$on( '$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { if (toState.externalUrl) { event.preventDefault(); $window.open(toState.externalUrl, '_self'); } } );});
And use it like so, with or without internal url:
$stateProvider.state('external', { // option url for sref // url: '/to-google', externalUrl: 'http://www.google.com'});
As mentioned in angular.js link behaviour - disable deep linking for specific URLsyou need just to use
<a href="newlink" target="_self">link to external</a>
this will disable angularJS routing on a specific desired link.