SPA Refresh page using routing, 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?

sylwester · Accepted Answer · 2014-07-08 11:50:59Z

2

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("~/");
                }
            }
        }

edited Jul 8, 2014 at 11:50

answered Jul 7, 2014 at 15:29

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hackp0int Over a year ago

I do not have any controllers. It's giving me this: The matched route does not include a 'controller' route value, which is required.

hackp0int Over a year ago

Default route is url: index.html

Community · Accepted Answer · 2017-05-23 12:13:47Z

0

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)

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Jul 7, 2014 at 15:02

user3684749

111 silver badge1 bronze badge

2 Comments

hackp0int Over a year ago

It's implemnted and doesn't helps.

Hades Over a year ago

I would assume that the whole point of the OP is that he doesn't want the ugly # in his URL's

Chetan Buddh · Accepted Answer · 2016-05-13 10:13:07Z

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 -->

Collectives™ on Stack Overflow

SPA Refresh page using routing, AngularJS

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related