Routing AngularJS in MVC Application Using Templates

I have 3 MVC controllers:

• Control panel (default)
• Customer
• Employee For each of them, only the "Index" action is available with only the "Index" view.

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

)

No problem, I can change the view through the menu.

No, I added 3 angularjs controllers ("/ App / Controllers / CustomerController", ...) these controllers are added to the bundle. The build page has a link to this package.

To view the dashboard /Views/Dashboard/Index.cshtml

, I have the following:

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

      

        
        
        
      

    

For Employee view /Views/Employee/in Index.cshtml

, I have the following:

<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 run the application (F5) I click MVC Index Dashboard, but the url looks like this:

http://localhost:2638/#/dashboard

      

        
        
        
      

    

I click on the "Employee" link, I see the correct content, but the url looks like this:

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

      

        
        
        
      

    

I click on the Client link, I see the correct content, but the url looks like this:

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

      

        
        
        
      

    

I clik "Customer List", I can see the content of the template, but the url looks like this:

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

      

        
        
        
      

    

I clik "Detail", I can see the content of the template, but the url looks like this:

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

      

        
        
        
      

    

All content also matches the behavior correctly, the url is weird (even if I can live).

I tied to the used: $locationProvider.html5Mode(true);

and removed the # in my menu, but in this If I click on "Client List" I get an error because the MVC controller is missing the "/ Client / List" action. I would like to only have an index file.

When I remove the otherwise section of the routing, the URL from the "looks better" menu:

http://localhost:2638/Employee

      

        
        
        
      

    

In the App.js file, I am setting the routing 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);
}]);