Маршрутные ссылки следуют за URL вместо того, чтобы быть направленным Angular

0

Я пытаюсь создать простую навигационную систему в угловом режиме. Всякий раз, когда я нажимаю вкладку, она отправляет меня на вкладку/в отличие от загрузки содержимого на страницу.

Демо-версия: http://lintonball.com/blog

Код ниже, спасибо заранее!

angular.module('app', ['ngRoute'])

.directive('languageSelector', function() {
  return {
    restrict: 'E',
    templateUrl: 'includes/directives/language-selector.html'
  }
})

.config(function($routeProvider) {
  $routeProvider.when('/blog/it', {
      templateUrl: 'includes/it/header.html'
    })
    .when('/blog/fr', {
      templateUrl: 'includes/fr/header.html'
    })
    .when('/blog/es', {
      templateUrl: 'includes/es/header.html'
    })
    .when('/', {
      templateUrl: 'includes/it/header.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});
<!doctype html>
<html ng-app="app">

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>
  <script src="js/app.js"></script>
</head>

<body>
  <header>
    <div ng-view></div>
    <a href="/blog/it" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="it-white" class="shape" height="40" width="40" stroke="#ffffff" />
        <rect id="it-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="it-green" class="shape" height="40" width="40" stroke="#009949" />
        <text x="10" y="28" fill="#fff" class="text">IT</text>
      </svg>
    </a>

    <a href="/blog/fr" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="fr-white" class="shape" height="40" width="40" stroke="#ffffff" />
        <rect id="fr-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="fr-blue" class="shape" height="40" width="40" stroke="#3a3dd9" />
        <text x="5" y="28" fill="#fff" class="text">FR</text>
      </svg>
    </a>

    <a href="/blog/es" class="svg-wrapper">
      <svg height="40" width="40" xmlns="http://www.w3.org/2000/svg">
        <rect id="es-red" class="shape" height="40" width="40" stroke="#ed2939" />
        <rect id="es-yellow" class="shape" height="40" width="40" stroke="#ffc400" />
        <text x="5" y="28" fill="#fff" class="text">ES</text>
      </svg>
    </a>
  </header>
</body>


</html>
  • 0
    замените все URL на префикс # like href="#/blog/it"
Теги:
angular-routing

1 ответ

1
Лучший ответ

Измените конфигурацию маршрутизации следующим образом:

$routeProvider.when('/it', {
  templateUrl: 'includes/it/header.html'
})
.when('/fr', {
  templateUrl: 'includes/fr/header.html'
})
.when('/es', {
  templateUrl: 'includes/es/header.html'
})
.when('/', {
  templateUrl: 'includes/it/header.html'
})
.otherwise({
  redirectTo: '/'
});

и ссылки на это:

<a href="#/fr" class="svg-wrapper">
    ...
 </a>
  • 0
    Потрясающие! Это работает как шарм, не уверен, что я понимаю, что делает #, хотя, я пойду на Google.
  • 0
    stackoverflow.com/a/14320468/1834329 Возможно, вы смогли использовать $locationProvider.html5Mode(true) вместо #. Знак # указывает браузеру игнорировать остальную часть URL. Angular использует это для обеспечения работы маршрутизации в браузерах, отличных от HTML 5.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню