Come potrei avere un router che utilizza un collegamento esterno, come google.com?

Per esempio:

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

url presume che questo sia uno stato interno. Voglio che sia come href o qualcosa del genere.

Ho una struttura di navigazione che costruirà dagli itinerari ui e ho bisogno di un link per accedere a un link esterno. Non necessariamente solo google, questo è solo un esempio.

Non cercarlo in un collegamento o come $ state.href (‘ http://www.google.com ‘). Serve in modo dichiarativo nelle rotte di configurazione.

Angular-ui-router non supporta l’URL esterno, è necessario redirect l’utente utilizzando $location.url() o $window.open()

Ti suggerisco di usare $window.open('http://www.google.com', '_self') che aprirà l’URL sulla stessa pagina.

Aggiornare

Puoi anche personalizzare l’ ui-router aggiungendo parametri external , può essere true / false .

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

Quindi configura $stateChangeStart nel tuo stato e $stateChangeStart la parte di reindirizzamento lì.

Esegui blocco

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

Campione Plunkr

Nota : apri Plunkr in una nuova finestra per farlo funzionare, perché google non si apre in iFrame a causa di alcuni motivi di sicurezza.

È ansible utilizzare il callback onEnter :

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

modificare

Basandosi sulla risposta di pankajparkar, come ho detto penso che dovresti evitare di ignorare un nome param esistente. ui-router ha fatto un grande sforzo per distinguere tra stati e url, quindi usare sia url che externalUrl potrebbe avere senso …

Quindi, implementerei un parametro externalUrl modo:

 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 usalo in questo modo, con o senza url interno:

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

Come accennato nel comportamento del collegamento angular.js – disabilitare il deep linking per URL specifici che è necessario utilizzare

 link to external 

questo disabiliterà il routing angularJS su un link specifico desiderato.

Ho trasformato la risposta accettata in una che presuppone l’ultima versione di AngularJS (attualmente 1.6), ui-router 1.x , Webpack 2 con Babel transpilation e il plugin ng-annotate per 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 }) }) 

Ed ecco come lo stato può essere configurato:

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

Uso:

 To Google