angularjs - template - ¿Cómo haría que ui-router vaya a un enlace externo, como google.com?

ui router angularjs template

Question

Por ejemplo:

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

url supone que este es un estado interno. Quiero que sea como href o algo por el estilo.

Tengo una estructura de navegación que se construirá a partir de las rutas ui y necesito un enlace para ir a un enlace externo. No necesariamente solo google, eso es solo un ejemplo.

No lo busco en un enlace o como $ state.href ('' http://www.google.com ''). Lo necesita declarativamente en la configuración de rutas.

Answer 1

Angular-ui-router no admite URL externa, debe redirigir al usuario usando $location.url() o $window.open()

Te sugiero que uses $window.open(''http://www.google.com'', ''_self'') que abrirá la URL en la misma página.

Actualizar

También puede personalizar ui-router agregando parámetros external , puede ser true / false .

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

Luego configure $stateChangeStart en su estado y maneje la parte de redirección allí.

Ejecutar bloque

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

Plunkr de muestra

Nota : Abra Plunkr en una nueva ventana para que funcione, porque google no se abre en iFrame por alguna razón de seguridad.

Answer 2

Como se menciona en el comportamiento del enlace angular.js: deshabilite el enlace profundo para URL específicas que solo necesita usar

<a href="newlink" target="_self">link to external</a>

esto deshabilitará el enrutamiento angularJS en un enlace deseado específico.

Answer 3

Puede usar la onEnter llamada onEnter :

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

Editar

Sobre la base de la respuesta de pankajparkar, como dije, creo que debería evitar anular un nombre de parámetro existente. ui-router hizo un gran esfuerzo para distinguir entre estados y url, por lo que usar url y externalUrl podría tener sentido ...

Entonces, implementaría un parámetro externalUrl así:

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

Y úsalo así, con o sin url interna:

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

Answer 4

Transformé la respuesta aceptada en una que asume la última versión de AngularJS (actualmente 1.6), ui-router 1.x , Webpack 2 con la transpilación de Babel y el complemento 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
})
})

Y así es como se puede configurar el estado:

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

Uso:

<a ui-sref="there">To Google</a>