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>