Como eu teria o ui-router para um link externo, como o google.com?

Por exemplo:

$stateProvider .state('external', { url: 'http://www.google.com', }) 

url assume que este é um estado interno. Eu quero que seja como href ou algo nesse sentido.

Eu tenho uma estrutura de navegação que irá construir a partir das rotas de ui e eu tenho a necessidade de um link para ir para um link externo. Não necessariamente apenas o google, isso é apenas um exemplo.

Não está procurando em um link ou como $ state.href (‘ http://www.google.com ‘). Precisa declarativamente na configuração de rotas.

Angular-ui-roteador não suporta URL externo, você precisa redirect o usuário usando $location.url() ou $window.open()

Sugiro que você use $window.open('http://www.google.com', '_self') que abrirá o URL na mesma página.

Atualizar

Você também pode personalizar o ui-router adicionando parâmetros external , pode ser true / false .

  $stateProvider .state('external', { url: 'http://www.google.com', external: true }) 

Em seguida, configure $stateChangeStart em seu estado e manipule a parte de redirecionamento.

Executar bloco

 myapp.run(function($rootScope, $window) { $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { if (toState.external) { event.preventDefault(); $window.open(toState.url, '_self'); } }); }) 

Amostra Plunkr

Nota : Abra o Plunkr em uma nova janela para que ele funcione, porque o google não é aberto no iFrame devido a algum motivo de segurança.

Você poderia usar o retorno de chamada onEnter :

  $stateProvider .state('external', { onEnter: function($window) { $window.open('http://www.google.com', '_self'); } }); 

Editar

Com base na resposta do pankajparkar, como eu disse, acho que você deve evitar a substituição de um nome de parâmetro existente. ui-router fez um grande esforço para distinguir entre estados e url, portanto, usar tanto url e externalUrl poderia fazer sentido …

Então, eu implementaria um externalUrl param assim:

 myApp.run(function($rootScope, $window) { $rootScope.$on( '$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { if (toState.externalUrl) { event.preventDefault(); $window.open(toState.externalUrl, '_self'); } } ); }); 

E use-o assim, com ou sem url interna:

 $stateProvider.state('external', { // option url for sref // url: '/to-google', externalUrl: 'http://www.google.com' }); 

Como mencionado no comportamento do link angular.js – desative a vinculação profunda para URLs específicos que você precisa apenas usar

 link to external 

isso desabilitará o roteamento angularJS em um link específico desejado.

Transformei a resposta aceita em uma que assume a versão mais recente do AngularJS (atualmente 1.6), ui-roteador 1.x , Webpack 2 com transpilação Babel e o plugin ng-annotate para Babel .

 .run(($transitions, $window) => { 'ngInject' $transitions.onStart({ to: (state) => state.external === true && state.url }, ($transition) => { const to = $transition.to() $window.open(to.url, to.target || '_self') return false }) }) 

E aqui está como o estado pode ser configurado:

 .config(($stateProvider) => { 'ngInject' $stateProvider .state({ name: 'there', url:'https://google.com', external: true, target: '_blank' }) }) 

Uso:

 To Google