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);
}]);

回答1:

AngularJS loads the page once, then only loads the missing data from the server (as JSON data). MVC loads the complete page on every request.

Based on this, you can't use the same routing for you MVC and AngularJS application, you have to decide for one of the concepts.

This means you either us angular for advanced client UI features (like filtering) and make the routing entirely on the server, or you deliver only a single MVC page and provide interface for accessing your date(e.g. as described here: https://stackoverflow.com/a/16837181/639035).

Using the same routing for AngularJS and MVC would mean you have to implement a Controller which returns the views (complete HTML pages), and a controller which provides the JSON data for the AngularJS routing. This results in a lot of work, is not easy to maintain and as far as I see it doesn't provide any advantages.

MVC Page concept (traditionell conecpt)