2

Начал использовать Angular недавно и сразу столкнулся с такой проблемой при использовании маршрутизации: когда я подключаю на сайт библиотеку angular-route.min.js, то у меня все маршруты вида #/route превращаются в #%2Froute, то есть из за того, что символ / кодируется в %2F всё перестаёт работать. Как это можно исправить? Вот пример:

<!DOCTYPE html>

<html ng-app="myApp">

<head>
  <title>Angular Routes Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
</head>

<body>
  <a href="#/">Home</a>
  <a href="#/test">Test</a>
  <a href="#/route">MoreTest</a>
  <div ng-view></div>

  <script type="text/javascript">
    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($routeProvider, $locationProvider) {
      $routeProvider
        .when('/', {
          template: '<h1>Home</h1>'
        });
      $routeProvider.when('/test', {
        template: '<h2>Test</h2>'
      });
      $routeProvider.when('/route', {
        template: '<h1>MoreTest</h1>'
      });
      $routeProvider.otherwise({
        redirectTo: '/'
      });
    });

    app.controller('testController', function($scope) {});
  </script>
</body>

</html>

До примера использовал angular версии 1.6.0, в примере 1.6.1

2
  • ошибка не воспроизводится. Предоставленный код полностью рабочий. Ищи ошибку где-то еще
    – Grundy
    Commented 26 дек. 2016 в 15:19
  • и еще добавь версии используемых библиотек
    – Grundy
    Commented 26 дек. 2016 в 15:27

1 ответ 1

0

Проблема заключается в неверном указании ссылок. Вместо #/ нужно использовать #!/. Это происходит потому, что по умолчанию значение hashPrefix - !.

Пример:

<!DOCTYPE html>

<html ng-app="myApp">

<head>
  <title>Angular Routes Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js"></script>
</head>

<body>
  <a href="#!/">Home</a>
  <a href="#!/test">Test</a>
  <a href="#!/route">MoreTest</a>
  <div ng-view></div>

  <script type="text/javascript">
    var app = angular.module('myApp', ['ngRoute']);

    app.config(function($locationProvider, $routeProvider, $locationProvider) {
      console.log('hash prefix', $locationProvider.hashPrefix());
      $routeProvider
        .when('/', {
          template: '<h1>Home</h1>'
        });
      $routeProvider.when('/test', {
        template: '<h2>Test</h2>'
      });
      $routeProvider.when('/route', {
        template: '<h1>MoreTest</h1>'
      });
      $routeProvider.otherwise({
        redirectTo: '/'
      });
    });

    app.controller('testController', function($scope) {});
  </script>
</body>

</html>

Что интересно в ранних версиях работает и вариант из вопроса, так как в них по умолчанию hashPrefix - пустая строка. Почему-то данное значение по умолчанию было изменено с версии 1.6.0:

var app = angular.module('myApp', ['ngRoute']);

app.config(function($locationProvider, $routeProvider, $locationProvider) {
  console.log('hash prefix:', $locationProvider.hashPrefix())
  $routeProvider
    .when('/', {
      template: '<h1>Home</h1>'
    });
  $routeProvider.when('/test', {
    template: '<h2>Test</h2>'
  });
  $routeProvider.when('/route', {
    template: '<h1>MoreTest</h1>'
  });
  $routeProvider.otherwise({
    redirectTo: '/'
  });
});

app.controller('testController', function($scope) {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular-route.min.js"></script>
<div ng-app="myApp">
  <a href="#/">Home</a>
  <a href="#/test">Test</a>
  <a href="#/route">MoreTest</a>
  <div ng-view></div>
</div>

Установить свой собственный hashPrefix можно с помощью одноименной функции в $locationProvider

1
  • Спасибо, как раз совершенно случайно обнаружил это и решил проблему) Commented 27 дек. 2016 в 10:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.