How to redirect to a route in SPA?

Question

I have authentication done using external provider in Ids3. After the user authenticates, my MVC home page is loaded, which bootstraps the angular app as such:

@section AppScripts {
    @Scripts.Render("~/bundles/Swagger")
    @Scripts.Render("~/bundles/DevPortalApp")
}

When the user authenticates through one of the external providers, I am supposed to redirect to a specific page in angular:

https://myaddress/DevPortalApp/something

The problem is that with regular redirects I am stuck in the authentication loop. How can I redirect from my Home controller to a specific angular page?

 var externalLogin = accessToken.externalLogin;

 // Check if its from external
 if (externalLogin.Value != null)
 {
     var isValid = await externalLoginService.ValidateAccessToken(accessToken);
     RedirectToAction("~/#/myURLRedirect");
 }

Answer 1

You need to use angular router from here, in shortly you can use $state.go('your-new-view')

In your app.js file create the states list-

$stateProvider
.state('someState', {
   url: '/someState',

   templateUrl: 'templates/Swagger.html',
   controller: 'Swagger'
})

And in your home controller you can just add redirect with $state.go('someState')

Answer 2

There are few multiple ways to integrate ASP.Net MVC Route with Angular Route.

I personally like Miguel Castro's approach which uses *catchall in ASP.Net MVC, and then pass it to Angular. Then let Angular handle at client-side.

You can fork my working sample code at GitHub.

MVC Route

routes.MapRoute(
   name: "Users",
   url: "users/{*catchall}",
   defaults: new { controller = "Users", action = "Index" });

Angular Route

$routeProvider
   .when(rootPath + "users", {
      template: "<user-list></user-list>",
      caseInsensitiveMatch: true
   })
   .otherwise({ redirectTo: (rootPath + "users") });