Angular Routing within an ASP.NET MVC application

Question

I have a link as follows:

<a href="#/Home">view</a>

And a div that's going to load Home.html as below:

<div class="col-md-8">
    <ng-view></ng-view>
</div>

My angular config is:

myApp = angular.module("myApp", ["ngRoute"])
    .config(function ($routeProvider) {
        $routeProvider
        .when("/Home", {
            templateUrl: "Templates/Home.html",
            controller: "HomeController"
        })
    })
    .controller("BlogController", function ($scope, $http) {
        $http.get("/Home/GetBlogEntries")
            .then(function (response) {
                $scope.data = response.data;
            });
        $scope.removeBlogEntry = function (index) {
            $scope.data.Data.splice(index, 1);
        };
    })
    .controller("HomeController", function ($scope, $http) {

    });

Before I click the link, the URL is showing http://localhost:58679/#/Home and after I click it, the address bar goes to http://localhost:58679/#!#%2FHome

Basically nothing happens and my home.html doesn't get rendered where it is supposed to.

Answer 1

Include $locationProvider.hashPrefix(''); in your config.

myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider,$locationProvider) {
        $locationProvider.hashPrefix('');
        $routeProvider
        .when("/Home", {
            templateUrl: "Templates/Home.html",
            controller: "HomeController"
   })
})