Route to different View(use @Html.ActionLink and ng-view in View) in Asp.Net MVC with AngularJS, ng-view only work one time, location url strange

Question

In my case, I need use @Html.ActionLink to Route to different View with AngularJS.In each view1/index.cshtml in asp.net has <div ng-view></div> that will load its html template.

the following link image is my project structure:
click

My problem is: it only route success first time.I think it cause wrong location url.

Views/Share/_Layout.cshtml:

<ul>
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("Device Management", "Index", "DeviceManagement")</li>
</ul>

Views/Home/index.cshtml:

@{
    ViewBag.Title = "Home Page";
    ViewBag.InitModule = "homeIndex";
}
@section Scripts {
    <script src="~/app/home/homeIndex.js"></script>
}
<div ng-view><div>

app/home/homeIndex.js

var homeIndex = angular.module('homeIndex', ["ngRoute"]);

homeIndex.config(["$routeProvider", function($routeProvider){
    $routeProvider
        .when("/home",{
            templateUrl:"app/home/homeIndex.html",
            controller:"homeCtrl"

        })

        .otherwise({
            redirectTo:"/home"
        });
}]);

app/home/homeIndex.html

<a href="#/home2">HOME2</a>

app/deviceManagement/deviceManageIndex.js

var deviceManageIndex = angular.module('deviceManageIndex', ["ngRoute"]);

deviceManageIndex.config(["$routeProvider", function($routeProvider) {
    $routeProvider
        .when("/device", {
            templateUrl: "app/deviceManagement/deviceManagementIndex.html",
            controller: "deviceManageCtrl"

        })
        .otherwise({
            redirectTo:"/device"
        });

}]);

the web site has sidebar, Home and Device Management Buttons in the sidebar.

when I click Home, it will redirect right location, it can load homeIndex.html successful:

location is:

http://localhost:13060/#/home

but when I click Home Button second time, it can't load homeIndex.html anymore.

location will change to:

http://localhost:13060/#

the same problem is happened in another Button Device Management

when I click Device Management, it will redirect right location, it can load deviceManagementIndex.html successful:

location is:

http://localhost:13060/DeviceManagement#/device

but when I click Device Management Button second time, it can't load deviceManagementIndex.html anymore.

location will change to:

http://localhost:13060/DeviceManagement#

I think the location is quite strange,in first time,it should be :

http://localhost:13060/DeviceManagement/#/device

I guess that is main reason not to load html template correctly...

But why the location url can't show correctly, Please Help me solve the headache problem....

Answer 1

Thanks to Shawn tip!In my case, I should use angular routing in client side, $routeProvider with templateUrl to trigger servier side controller to load server side View,That's I found solution, in this way actionlink behavior could through server side, it will follow server side route rule to chose appropriate View. It shoud be work...:D