I am new to AngularJS. I am currently facing the problem of writing good urls for my views. I set $locationProvider.html5Mode(true);to remove #from the URLs displayed in the address bar. However, by doing this, I cannot redirect the required views. I keep getting an errorCannot GET /login
I get the home page /loginwhen the application starts for the first time, but when I refresh the page, I get the same error.
Here is the main page of the application (index.html)
<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
</head>
<body ng-app="F1FeederApp" class="col-md-8">
<ng-view></ng-view>
<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>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<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>
My app.js file (where the redirect occurs) is as follows:
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 the following important observation
- If I set base href to index.html, pointing to the root as
<base href='/'>
$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 : "/"
});
. , "/login" . , , AngularJS.