Search code examples
angularjsadminlte

AngularJs Routing isn't working as expected

Please find my demo example on plunker.

I tried to combine the AdminLTE template with AngularJs Routing. So far I defined the routing rules as usual (app.js)

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "subpage0.html"
        })
        .when("/subpage1", {
              templateUrl: "subpage1.html"
        })
        .when("/subpage2", {
            templateUrl: "subpage2.html"
        })
 ...

And I set the corresponding links in my sidebar (index.html)

<ul class="nav sidebar-menu">
                <li class="active"><a href="#subpage1"><i class="fa fa-circle-o"></i> Menu1</a></li>
                <li><a href="#subpage2"><i class="fa fa-circle-o"></i> Menu2</a></li>
                <li><a href="#subpage3"><i class="fa fa-circle-o"></i> Menu3</a></li>
</ul>

But unfortunately the angular app always routes to the first case -> subpage0.html

Any suggestions?

Solution

  • See this https://stackoverflow.com/a/41213016/4314952. It is necessary to add the following config:

    app.config(['$locationProvider', function($locationProvider) {
 $locationProvider.hashPrefix('');
}]);

    Updated plunker.