SPA刷新页面使用路由，AngularJS

Question

I have SPA, when I'm using routing and want to refresh a page I get 404 because it Client side routing.

How do I handle this?

Here is my routing:

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl: 'index.html'
        })
        .when('/category/gifts/', {
            templateUrl: 'tpl/categories/category-gifts.html',
            controller: 'giftsCtrl'
        })
        .when('/category/gifts/:id', {
            templateUrl: 'tpl/categories/category-gifts.html',
            controller: 'giftsCtrl'
        })

        .otherwise({ redirectTo: '/' });

    $locationProvider.html5Mode(true);
});

For example: http://www.localhost After I enter into http://www.localhost/category/gifts/ and do CTRL + R or hit F5, I get 404, how should I take care about it?

Answer 1

The problem commes from your MVC RouteConfig please update your RegisterRoutes (/app_Start/RouteConfig.cs like below to fix that:

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

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




        }
    }

or option B) if you don't have any controllers you can handle 404 error in your Global.asax just add Application_Error method to it.

 protected void Application_Error(Object sender, EventArgs e)
        {
            Exception ex = Server.GetLastError();
            HttpException httpException = ex as HttpException;

            if (ex != null)
            {
                int errorCode = httpException.GetHttpCode();

                if (errorCode == 404)
                {

                    Response.Redirect("~/");
                }
            }
        }

Answer 2

Can you tried to put # between? Instead of: http://www.localhost/category/gifts/ you can put http://www.localhost/#/category/gifts/

You can read about that: Removing the fragment identifier from AngularJS urls (# symbol)

Answer 3

I have also this problem before I try this solution in config file.

config file

myapp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

// Specify the three simple routes ('/', '/About', and '/Contact')
$routeProvider.when('/', {
    templateUrl: '/Home/Home',
    controller: 'homeCtrl',
});
$routeProvider.when('/Login', {
    templateUrl: '/account/Index',
    controller: 'loginCtrl',
});
$routeProvider.when('/About', {
    templateUrl: '/Home/About',
    controller: 'aboutCtrl',
});
$routeProvider.when('/Contact', {
    templateUrl: '/Home/Contact',
    controller: 'contactCtrl'
});
$routeProvider.when('/First', {
    templateUrl: '/account/First',
    controller: 'firstCtrl'
});
$routeProvider.when('/Fullpage', {
    templateUrl: '/Home/Fullpage',
    controller: 'fullpageCtrl'
});
$routeProvider.otherwise({
    redirectTo: '/'
});

// Specify HTML5 mode (using the History APIs) or HashBang syntax.
//$locationProvider.html5Mode({ enabled: true, requireBase: false });
$locationProvider.html5Mode(false);}]);

index.cshtml file

 <a class="brand" href="#/">Simple Routing</a>
        <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="active"><a href="#/">Home</a></li>
                <li><a href="/#/About">About</a></li>
                <li><a href="/#/Contact">Contact</a></li>
                <li><a href="/#/Login">Login</a></li>
                <li><a href="/#/First">first</a></li>
                <li><a href="/#/Fullpage">fullpage</a></li>
            </ul>
        </div><!--/.nav-collapse -->