Почему эта маршрутизация AngularJS не работает, когда включен режим html5?

Я хотел бы использовать маршрутизацию AngularJS. Я использую AngularJS-seed-master в качестве старта, и маршрутизация работает по умолчанию. Однако он перестал работать после того, как я включил html5mode. Ниже приведен html-код, когда маршрутизация работает;

  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>    
  <div ng-view></div>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

Код Javscript app.js при работе роутинга;

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',  
  'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) 
{
    //configuration for $routeProvider
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});

}])

Затем я включил html5mode, добавив это в app.js.

.config(['$locationProvider', function($locationProvider)
{        
    $locationProvider.html5Mode(true);
}])

Именно в этот момент маршрутизация AngularJS перестает работать. Что я сделал не так? Как заставить маршрутизацию AngularJS работать после включения html5Mode?


javascript html angularjs url-routing angular-routing
person user781486    schedule 27.04.2014    source источник
comment
stackoverflow.com/a/23311886/189756   -  person Mohammad Sepahvand    schedule 27.04.2014
comment
возможный дубликат $location/переключение между html5 и режимом hashbang/ссылка переписывание   -  person rvignacio    schedule 23.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Что вам нужно сделать, так это в «app.js» установить для «html5mode» значение true:

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
   $locationProvider.html5Mode(true).hashPrefix('!');
   $routeProvider.otherwise({redirectTo: '/view2'});
}]);

В index.html добавьте под заголовком:

<head>
      <base href="/" />
      <meta name="fragment" content="!">
</head>

И изменить ссылку:

<body>
  <ul class="menu">
    <li><a href="/#!/view1">view1</a></li>
    <li><a href="/#!/view2">view2</a></li>
  </ul>
</body>

И это основной URL: http://localhost:8000

Будет перенаправлен на: http://localhost:8000/view1

И ссылка будет работать, показывая сексуальный адрес.

person Community    schedule 05.08.2016