7

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.

Programmer
  • 175
  • 1
  • 2
  • 17
  • is the `DashboardController` correct name? for the other controller you are using small case like for the first word `unitController`. Are there any errors on the js console? – kachhalimbu May 19 '15 at 01:14
  • I dont think the issue is related to the name of controller, I made sure of that. There are no js console errors. – Programmer May 19 '15 at 05:56

2 Answers2

0

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

kachhalimbu
  • 2,190
  • 17
  • 14
  • Thanks for the demo, I tried adding the code but it still has the same behavior. – Programmer May 19 '15 at 18:11
  • To add more context, the dashboard uses a js library highchart for some data representation. Do you think it might not be loading on time? Well, I even tried moving the library file so that it loads first but no luck. – Programmer May 19 '15 at 18:37
  • have you tried having an simple dashboard.html with a single div like `
    {{DashboardController.message}}` and in your controller you init this message `DashboardController.message = "some test msg"`?
     – kachhalimbu May 20 '15 at 01:12
  • I have tried having a simple dashboard with just a message and that too shows up only when I refresh the page, but does not show when a redirect happens the first time. – Programmer May 21 '15 at 22:26
  • can you try disabling html5Mode by setting `enabled: false` in above config? also how are you accessing /test url? it should be `http://whateveryourdomain/#/test`. – kachhalimbu May 22 '15 at 01:35
  • There is no change when I disable html5Mode. The navigations happen correctly, but the page is empty. The application url is http://whatever_my_domain/test which redirect to http://whatever_my_domain/test/dashboard with html and the javascript loading (as I see it in the Network tab) but nothing is displayed in content area. – Programmer May 22 '15 at 21:26
  • Have you tried without having ng-class on your li elements? – kachhalimbu May 22 '15 at 21:32
  • The plnkr demo does not load now but if I remember correctly, it was more or less the same as the demo. I also tried removing ng-class and there is no change in the behavior. The only reason for ng-class is to highlight which tab is active at a given point. – Programmer May 22 '15 at 21:38
0

It works if you remove -

$locationProvider.html5Mode(true);

Or, going by a similar question's answer you could add -

<base href="/" />

to your <head />.

Vivek
  • 322
  • 1
  • 13