javascript - 从 angularjs 中删除 # 并使 url 变得漂亮

Question

我想从网址中删除#

我已经使用了locationProvider并在index.html中

位置提供者给出为

scotchApp.config(function($routeProvider, $locationProvider) {
..
$locationProvider.html5Mode(true);

这是我的 script.js

// create the module and name it scotchApp

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

// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
    // route for the home page
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl : 'pages/contact.html',
        controller  : 'contactController'
    });

        $locationProvider.html5Mode(true);
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

这是这个问题的后续。我仍然没有得到解决方案。如果得到回答，我会接受这两个答案。

这是plunkr我想做的例子。

注意:

This is my project folder

localhost/test/angular

所以，我在“关于”中有这个链接

localhost/test/angular/about

请求:请从plunkr下载源码并尝试一下。

我没有收到任何错误，但正文部分中没有出现任何内容

谢谢

Answer 1

要使用相对链接来链接您的应用程序，您需要在文档的头部设置此 html 代码。

<base href="/your-base-if-needed"> 

或

<base href="/">

但是 HTML5 模式设置为 true 应该会自动解析相对链接