ASP MVC url with angularjs

Question

In asp web api i have an index.html with angularjs framework.

In angularjs i have the following route:

gestionale.config(function ($routeProvider, $locationProvider) {     
  $routeProvider.
    when('/', {
        templateUrl: 'View/people.html',
        controller: 'mainController'
    }).
    when('/ruoli', {
        templateUrl: 'View/ruoli.html',
        controller: 'ruoliController'
    });
});

When i start the project with visual studio, it opens the index.html at the following url:

http://localhost:49375/index.html#/

and the view "View/people.html" is correctly showed.

1)How can i put, in the index.html, a static link to the ruoli.html page? I have tried

<a href="/ruoli">

but doesn't work because it load the page

http://localhost:49375/ruoli

instead of

http://localhost:49375/index.html#/ruoli

Answer 1

You need to put the hashbang before the slash.

So you setup your href attribute like this :

    <a href="#/ruoli">

that will properly navigate to:

    http://localhost:49375/index.html#/ruoli

Check this hashbang routing article/cookbook:

http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/client-side-routing-with-hashbang-urls.html