How to handle page refresh in AngularJS using ui.router with ASP.NET MVC

Question

We are creating a single-page ASP.NET MVC application which uses AngularJS ui.router for client-side routing.

Currently, the back/forward buttons work as expected, but when the user clicks the browser's refresh button, the partial view is loaded without the layout page.

For example:

1. User navigates to "http://localhost/MyApp/", MVC returns the layout page and then we navigate to the default state.
2. User clicks on a link on the page and is navigated to that particular state via client side routing, url is now "http://localhost/MyApp/UserManagement/EditUser"
3. User clicks on browser's refresh button, it loads the "UserManagement/EditUser" partial view without the layout

What else do we need to do in order for the layout to be reloaded when the user clicks the browser's refresh button?

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

var baseFrameworkApp = angular.module("BaseFrameworkApp", ['ui.router'])
    .config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider',
        function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider) {
            $locationProvider.hashPrefix("!").html5Mode(true);
            $urlRouterProvider.otherwise("/");
            $stateProvider
                .state('Default', {
                    url: '/{controller}/{action}',
                    views: {
                        "mainContainer": {
                            templateUrl: function (params) { return params.controller + '/' + params.action; }
                        }
                    }
                });
        }]);

Answer 1

Your MVC RouteConfig.cs file should be like this,

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "angular",
            url: "{*.}",
            defaults: new { controller = "Home", action = "Index"}
        );

        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
        );
    }
}

As for your state configuration it is different to how I implement my states. Example below,

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

$stateProvider
.state('home', { url: '/', templateUrl: 'Angular/views/home.html', controller: '' })
.state('login', { url: '/login', templateUrl: 'Angular/views/account/login.html', controller: 'LoginController' });

I hope this helps.