How to redirect pages in ASP MVC using AngularJS?

Question

I went through the process of starting a new ASP.NET MVC no-user authentication process, and have already began integrating AngularJS with C# code.

My _ViewStart.cshtml uses _Layout.cshtml to @RenderBody() for each of my Views found under Views->Home. I have my two views, Index.cshtml and SignUp.cshtml.

In the Index partial view, I have a form that has an action controlled by this AngularJS function:

.controller('LoginController', function ($scope, $location, LoginService) {
    $scope.LoginData = {
        CID: '',
        Email: ''
    };

    $scope.Login = function ($window) {
        $scope.Submitted = true;
        if ($scope.IsFormValid) {
            LoginService.GetUser($scope.LoginData).then(function (d) {
                if (d.data.CID != null) {
                    loginCID = d.data.CID;
                    loginEmail = d.data.Email;
                    $scope.Message = "Successfully logged in. Welcome " + d.data.CID;
                    $location.path("/Home/SignUp");
                }
                else {
                    alert("Invalid Creds");
                }
            });
        }
    };
})

I've omitted in included any extra code that wasn't entirely necessary for this question so extra variables/factories/services have been excluded. The code all works except for this line:

$location.path("/Home/SignUp");

Once the form is filled out, $scope.Message changes to what's in the if statement, and the URL changed from http://localhost:61660/ to http://localhost:61660/Home/SignUp But the partial view for Index still shows. Meaning, I'm still seeing Index.cshtml being rendered in the body and not SignUp.cshtml. How can I change this to actually redirect?

Answer 1

Try this approach instead of $location.path("/Home/SignUp"):

window.location.pathname = 'Home/SignUp';

It is caused, because angular intercepts $location's redirections and process them by means of own's routing infrastructure, preventing your's expected behavior.