I am working on my angular app and setting up routes this way
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
<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 redirects the URL to "/ test / dashboard" when you enter "/ test", but the html for this page is not displayed. However, when I refresh the page using this route, it displays html in the content area of the page.
When I switch between links, the control panel appears, it just does not load the first time I enter it.
Also, when I change the redirection to / test / unit, it redirects correctly and displays unit.html.
Not sure what causes this behavior.
Any help would be appreciated.
source share