$routeProvider / $locationProvider 不是 AngularJS 路由中的函数

Question

我正在尝试在 AngularJS.

中创建所谓的 'SEO-friendly' URL

在我的 script.js 路由中，我有：

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.html5Mode(true);
    when('/blog', {
        templateUrl: 'blog.html',
        controller: 'BlogController'
    }).
    when('/page/ideas', {
        templateUrl: 'ideas.html',
        controller: 'IdeasController'
    }).
    otherwise({
        templateUrl: 'home.html'
    });
}]);

app.controller("BlogController", function($scope) {
    $scope.title = 'Blog';
});

app.controller("IdeasController", function($scope) {
    $scope.title = 'Ideas';
});

要从 URL 中删除 #，我将启用 html5 模式：

$routeProvider.html5Mode(true);

但是，这会导致以下错误：

Failed to instantiate module exampleApp due to: TypeError: $routeProvider.html5Mode is not a function

有人能解决这个问题吗？这意味着内容不会因此而显示在视图中。

编辑：对于任何想知道的人，工作代码是：

app.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/blog', {
            templateUrl: 'blog.html',
            controller: 'BlogController'
        }).
        when('/page/ideas', {
            templateUrl: 'ideas.html',
            controller: 'IdeasController'
        }).
        otherwise({
            templateUrl: 'home.html'
        });
        $locationProvider.html5Mode(true);
    }]);

Answer 1

html5mode 方法在 $locationProvider 供应商那里可用。

您应该在配置阶段包含 $locationProvider 以使该依赖项在配置块中可用，然后为 # 免费 URL 启用 html5mode。

代码

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

   //$routerProvider code here

   $locationProvider.html5Mode(true);

}]);

此外，您还必须在 index.html 页面上添加 <base href="/"> 标签

$routeProvider / $locationProvider 不是 AngularJS 路由中的函数

$routeProvider / $locationProvider not a function in AngularJS Routing

javascript

angularjs

url-routing

angularjs-routing