How would I have ui-router go to an external link, such as google.com? How would I have ui-router go to an external link, such as google.com? angularjs angularjs

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');      }    });})

Sample Plunkr

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.