AngularJS pretty-url not working on page refresh if base href is set to other than '/'

问题

I am new to AngularJS. I am currently facing problem in writing pretty urls for my views.I have set $locationProvider.html5Mode(true); to remove # from the urls displayed in the address bar. However,upon doing so I am unable to reroute to desired views. I keep getting the error Cannot GET /login

I get the home page /login when the app is launched first time , but when I refresh the page I get the same error.

Here the main page of application (index.html)

<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
<!-- endbuild -->
</head>
<body ng-app="F1FeederApp" class="col-md-8">

<ng-view></ng-view>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/loginHttpBackend.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/driver.js"></script>
<script src="scripts/controllers/drivers.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->

My app.js file(where rerouting takes place) looks like this

angular.module('F1FeederApp.controllers', []);

angular.module('F1FeederApp',
    [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ])
    .config([ '$routeProvider','$locationProvider',     function($routeProvider,$locationProvider,$location) {
            console.log('---------------inside config----------------');
        console.log($routeProvider);
        $routeProvider.when("/login", {
            templateUrl : "views/login.html",
            controller : "loginController"
        }).when("/drivers", {
            templateUrl : "views/drivers.html",
            controller : "driversController"
        }).when("/drivers/:id", {
            templateUrl : "views/driver.html",
            controller : "driverController"
        }).otherwise({
            redirectTo : "/login"
        });
        $locationProvider.html5Mode(true);

    } ]);

I also made following important observation

If I set the base href on index.html to point to the root as <base href='/'>

and perform rerouting as

$routeProvider.when("/", {
        templateUrl : "views/login.html",
        controller : "loginController"
    }).when("/drivers", {
        templateUrl : "views/drivers.html",
        controller : "driversController"
    }).when("/drivers/:id", {
        templateUrl : "views/driver.html",
        controller : "driverController"
    }).otherwise({
        redirectTo : "/"
    });

my app works fine here.But I want '/login' to be my default page. Kindly guide me on where I am going wrong or is it an issue with AngularJS itself.

回答1:

Other than enabling html5Mode on, you also need to update your server-side to redirect all the request like /login or /home etc to a single entry-point, like an index.html.

Server side

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

Search for "Server side" on this documentation page:

angular $location docs

来源：https://stackoverflow.com/questions/24730654/angularjs-pretty-url-not-working-on-page-refresh-if-base-href-is-set-to-other-th

标签

javascript

angularjs

single-page-application

angularjs-routing