Angular отображение маршрутов

490

28 декабря 2016, 05:56

Начал использовать 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

Answer 1

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