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

angular-ui-router, angularjs, angularjs-routing, routes, single-page-application

Solution

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.

Problem

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.

Original source

Related problems