Faire un lien externe dans une application AngularJS est très simple, mais quand ce lien pointe dans une partie de votre site en dehors d’AngularJS, c’est tout de suite plus compliqué.

CAS 1 : Faire un lien externe classique

Vous voulez faire un lien vers le site Wikipédia par exemple, c’est très simple. Vous faites comme n’importe quel lien externe et mettez l’url absolue.

<a href="https://fr.wikipedia.org/">Mon lien</a>

La navigation ne sera pas gérée par AngularJS et vous serez redirigé vers le lien.

CAS 2 : Faire un lien vers une partie de son site en dehors d’AngularJS

Pour naviguer en dehors d’AngularJS mais dans le même nom de domaine il faut procéder différemment.

J’ai codé mon portfolio avec AngularJS. J’ai utilisé le système de route et tout marchait super bien, jusqu’au jour où j’ai voulu ajouter un blog WordPress.
En mettant sagement un lien vers mon blog, impossible d’y accéder, je bouclais sur la même page.

En cherchant un peu, j’ai trouvé la solution : utiliser une directive.

<a href="http://www.catherineplichon/blog/" go-to>Blog</a>

.directive('goTo', function ($window) {
  return function(scope, element, attrs) {
      element.on('click', function(event) {
          event.stopPropagation(); 
          scope.$on('$locationChangeStart', function(ev) {
              ev.preventDefault(); 
          });
          var location = attrs.href;
          $window.location.href = location;
      });
  }
})

Que fait ma directive ?

l’événement $routeChangeStart est déclenché quand un changement de route est détecté.

Pour annuler le changement de route et empêcher la page courante de se recharger on utilise les méthodes stopPropagation() et preventDefault().

On récupère dans une variable l’url définie dans l’attribut href du lien.

Enfin, on utilise le service $window en modifiant sa propriété location.href afin de nous rediriger vers la bonne page.

Et voilà !