AngularJs $ locationProvider.html5Mode(true);删除哈希到URL不起作用

时间:2016-09-07 18:04:20

标签: angularjs routing

我的函数$ locationProvider.html5Mode(true)有问题,这是设置:

var app = angular.module("app", [
"ngRoute",
"ngAnimate"
]);


// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){

$routeProvider.
    when("/archive", {
      templateUrl: "archive.php",
      controller: "archiveCtrl",
      animate: "slide-left"
    }).
    when("/single", {
      templateUrl: "single.php",
      controller: "singleCtrl",
      animate: "slide-left"
    }).
    otherwise({
      redirectTo: "/archive"
    });

$locationProvider.html5Mode(true);

});

在head标签中:

<head>
    <base href="/">
</head>

网站的根目录是

site.com/main.php

其中main.php包含div ng-view

知道为什么它不起作用?

1 个答案:

答案 0 :(得分:0)

这是我在JSFiddle上创建的一个工作示例,我删除了templateUrl并使用了模板,但在这种情况下它不应该重要(你问的是html5mode和base是如何工作的)

的HTML

<div ng-controller="mainCtrl">
  <a href="/single">single</a>
  <a href="/archive">archive</a>
  <div ng-view></div>
</div>

的Javascript

var app = angular.module("myApp", [
    "ngRoute"
  ])
  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
      .when("/archive", {
        template: "<p>archive</p>"
      })
      .when("/single", {
        template: "<p>single</p>"
      })
      .otherwise({
        redirectTo: "/archive"
      });

    $locationProvider.html5Mode(true);

  }])
  .controller("mainCtrl", function mainCtrl($scope, $location) {
    $scope.$location = $location;
  });

JSFiddle