angularjs view loads only on hard refresh and not on redirect
I am working on my angular app and have setup the routes like so
angular.module('app', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
template : "",
controller : function($window) {
$window.location.href = '/';
}
}).when('/test', {
redirectTo : '/test/dashboard'
}).when('/test/dashboard', {
templateUrl : '../partials/dashboard.html',
controller : 'DashboardController'
}).when('/test/unit', {
templateUrl : '../partials/unit.html',
controller : 'unitController'
});
$locationProvider.html5Mode(true);
});
HTML is
<body ng-app="app">
...
<div id="sidebar-wrapper" class="fill-height sidebar-nav">
<ul class="tabRow nav nav-stacked">
<li ng-class="{active: isActive('dashboard') }"><a id="dashboardLink" ng-href="#test/dashboard">Dashboard</a>
</li>
<li ng-class="{active: isActive('unit') }"><a id="unitLink" ng-href="#test/unit">Unit</a>
</li>
</ul>
</div>
...
</body>
Problem:
This code will redirect the URL to "/test/dashboard" when I enter "/test" but the html for that page does not show up. However when I refresh the page with that route, it displays the html in the content area of the page.
When I toggle between links, the dashboard shows up, just does not load the first time it is navigated to.
Also, when I change the redirect to /test/unit, it redirects correctly and displays the unit.html.
Not sure what is causing this behavior.
Any help would be appreciated.
I think you need to specify requireBase: false while configuring html5Mode for your $locationProvider
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Here is a working plnkr demo
For more context relative to your deployment you should be aware of this form angular docs
It works if you remove -
$locationProvider.html5Mode(true);
Or, going by a similar question's answer you could add -
<base href="/" />
to your <head /> .