AngularJS routing doesnt work

Question

I'm new to AngularJS and I'm currently building a small application. I want my URL's like this /index (without the .html). I tried to use NgRoute for that, but it doesn't seem to work out well. When i go to /establishments, it says the route doesn't exists. Here is my code:

app.js

var app = angular.module('khApp', ['ngRoute','establishmentModule', 'queryModule', 'buildingBlockModule', 'categoryModule']);
app.config(['$routeProvider', function($routeProvider)
{
  $routeProvider
    .when('establishments', {controller:'testController', templateUrl: '../html/establishments.html'})

}]);

app.controller('testController', ['$http', function($http)
{


}]);

index.html

    <div  ng-controller="testController as test" class="container">
        hi 
        <a href="establishments">
            <button class="btn btn-default">Start</button>
        </a>
    </div>

  <ng-view></ng-view>

<script type="text/javascript" src="../../bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="../../bower_components/angular-route/angular-route.js"></script> 
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/buildingblock.js"></script>
<script type="text/javascript" src="../js/category.js"></script>
<script type="text/javascript" src="../js/establishment.js"></script>
<script type="text/javascript" src="../js/query.js"></script> 


</body>
</html>

What am i doing wrong? Thanks in advance!

Answer 1

Depending on how your router is configured, typically you need to target routes beginning with a slash like so:

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider
            .when('establishments', {
                controller:'testController',
                templateUrl: '../html/establishments.html'
            });
}]);

In addition, in your HTML, I think your HTML anchor tags need to begin with the hash navigation like so:

<a href="#/establishments">
    <button class="btn btn-default">Start</button>
</a>

Reference: AngularJS Documentation Tutorial 7 - Routing & Multiple Views

Answer 2

AngularJS routing utilizes the fragment identifier (the # in the URL) to get its routes. That's because it can't manipulate the full URL without causing the browser to request a new page, thus making it not a SPA.

So the URL you need to request should be the form of <path to root>#/establishments . Assuming index.html is in /application/app/html , the URL to request would be:

/application/app/html/index.html#/establishments

If you also want to support the URL localhost:port/application/app/html/establishments then you need to configure your server side routing to perform a redirect to /application/app/html/index.html#/establishments .

Answer 3

#/establishments is what you need in your anchor tag

<a href="#/establishments">
<button class="btn btn-default">Start</button>
</a>

your route will be something like this:

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('establishments', {
            controller:'testController',
            templateUrl: '../html/establishments.html'
        });
}]);