从angularjs中删除#并使url漂亮

时间:2015-12-14 11:32:55

标签: javascript php jquery html angularjs

我想删除网址中的#

我使用过locationProvider并且已经在index.html

中使用了

Locationprovider为

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

所以,我在about

中有这个链接
localhost/test/angular/about

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

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

由于

1 个答案:

答案 0 :(得分:2)

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

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

<base href="/">

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