Angular html5mode 无法按预期工作

Question

In my angular app all the URLs are like this:

testsite.com/#/standard-page

And I would like them to be like:

testsite.com/standard-page

I have read about adding the html5mode to my config, I now have this:

angular.module('myApp').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', config]);

function config($stateProvider, $urlRouterProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: siteInfo.templateRoot + '/startPage.html',
        })
        .state('standard-page', {
            resolve: {
                standardPageData: getStandardPageData
            },
            url: '/standard-page',
            templateUrl: siteInfo.templateRoot + '/standardPage.html',
            controller: 'StandardPageController',
            controllerAs: 'StandardPageCtrl'
        });
};

and I added <base href="/"> to the head of my head, but it does not work completely as expected yet.

When I go to testsite.com/#/standard-page in my browser it loads the page, then it modifies the URL to testsite.com/standard-page in the address bar. However, if I type in directly ``testsite.com/standard-page`, it gives me a 404.

So I'm almost there, just not quite yet. Any ideas what I might have forgotten to do here?

Answer 1

Angular can't do all the job. When you write testsite.com/standard-page , your server must handle the request and respond correctly. Your server respond 404 so your browser can't display anything.