AngularJS routing in MVC application with templates

I have 3 MVC controllers :

• Dashboard (the one by default)
• Customer
• Employee For each, only the "Index" action is available with only the "Index" view.

In the layout, I have a simple menu with 3 entries : "Dashboard","Customer" and "Employee" (@Html.ActionLink("Dashboard", "Index", "Dashboard"))

No problem, I can change view via the menu.

No I added 3 angularjs controllers ("/App/Controllers/CustomerController",...) these controllers has been added to a bundle. In the layout page, there is a link to this bundle.

For the dashboard view /Views/Dashboard/Index.cshtml, I have this :

<div ng-controller="DashboardController" ng-cloak>
    <div ng-view></div>
</div>

For the Employee view /Views/Employee/in Index.cshtml, I have this :

<div ng-controller="EmployeeController" ng-cloak>
    <div ng-view></div>
</div>

For /Views/Customer/Index.cshtml :

<ul class="nav navbar-nav">
    <li><a href="#/Customer/List">List customers</a></li>
    <li><a href="#/Customer/5">Detail</a></li>
</ul>
<div ng-controller="CustomerController" ng-cloak>
    <!-- this is where content will be injected -->
    <div ng-view></div>
</div>

When I start the application (F5), I hit the MVC "Index" of "Dashboard", but the URL look like :

http://localhost:2638/#/dashboard

I click "Employee" link, I see the right content but the URL look like :

http://localhost:2638/Employee#/dashboard

I click "Customer" link, I see the right content but the URL look like :

http://localhost:2638/Customer#/dashboard

I clik "List Customer", I see the template content but the URL look like :

http://localhost:2638/Customer#/Customer/List

I clik "Detail", I see the template content but the URL look like :

http://localhost:2638/Customer#/Customer/5

All the contents are correct the behavior too, the URL are strange (even if I can live with).

I tied to used : $locationProvider.html5Mode(true); and remove the # in my menu but in this case when click on "List customers" I get an error because "/Customer/List" action is missing in MVC controller. I'd like have only on Index file.

When I remove otherwise section in the routing, the URL from the menu "look better" :

http://localhost:2638/Employee

In an App.js file I set the routing see below.

How can I solve this ?

Routing :

myAppModule.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
    .when('/Employee/List', {
        templateUrl: 'App/Templates/Employee/List.html',
        controller: 'MyEmployeeController',
        caseInsensitiveMatch: true
    })
    .when('/Employee/:id?', {
        templateUrl: 'App/Templates/Employee/Detail.html',
        controller: 'MyEmployeeController',
        caseInsensitiveMatch: true
    })
    .when('/Customer/List', {
        templateUrl: 'App/Templates/Customer/List.html',
        controller: 'MyCustomerController',
        caseInsensitiveMatch: true
    })
    .when('/Customer/:id?', {
        templateUrl: 'App/Templates/Customer/Detail.html',
        controller: 'MyCustomerController',
        caseInsensitiveMatch: true
    })
    .otherwise({
        redirectTo: '/dashboard'
    });

    //$locationProvider.html5Mode(true);
}]);