Reload not working after AngularJs routing

Question

I am facing a number of troubles related to AngularJs routing. I have already tried to find answers online but I still am not very clear with the solutions provided.

First of all, here is my routing block:

var myApp = angular.module('myApp', ["ngRoute", "ngAnimate"]);
myApp.config(function($routeProvider, $locationProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider
            .when("/", {
                templateUrl: "../view/home.html",
                controller: "slideShowController",
            })

            .when("/business&consumer", {
                templateUrl: "../view/govnservices.html",
                controller: "productController",
            })

            .when("/about", {
                templateUrl: "../view/about.html",
                controller: "pagController",
            })

            .when("/project", {
                templateUrl: "../view/projects.html",
                controller: "projController",
            })

            .when("/service", {
                templateUrl: "../view/services.html",
                controller: "servController",
            })

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

});

And this is how I am passing the reference to my links:

<a href="/">Home</a>

Another link:

 name: "About Us",
 templateUrl: "/about",

Now everywhere it is specified as:

<a href="#/">Home</a>

But on using '#' my links are not working (still don't know why.)

Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found.

Someone please help me out with this and please mention in comment if any part is not clear. Also please mention any good source to learn routing.

you are using $locationProvider.html5Mode(true);, which removes hash-bangs - # from your URL. Using <a href="#/">Home</a> will go to an unknown location, so it will redirect you to whatever .otherwise is pointing to. I suggest removing html5Mode, it's not very beginner friendly — Aleksey Solovey
– Aleksey Solovey, Commented Feb 21, 2018 at 10:02
$router.reload() function is also not working. But i might be using it in the wrong way. — Navneet Priya
– Navneet Priya, Commented Feb 21, 2018 at 10:02
@AlekseySolovey Thanks for the explanation. I cant remove it though but please explain how to reload the page? — Navneet Priya
– Navneet Priya, Commented Feb 21, 2018 at 10:03
then don't use # anywhere with your links. To fix the issue with the reloading, where it goes to 404 page, you need to fix the routing manually. Because # was helping you with that, but now it's gone. Here is a solution if you have .htaccess file on your server — Aleksey Solovey
– Aleksey Solovey, Commented Feb 21, 2018 at 10:05
if you want to use html5Mode then you have to remove from everywhere else comment this section from the route. or need to update server config. — Rahul Sharma
– Rahul Sharma, Commented Feb 21, 2018 at 10:05

Jens · Accepted Answer · 2018-03-15 09:19:31Z

Your question is not entirely clear where you state: "Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found."

So are you using the # or not? Since we are talking html5mode I will assume not for now (Because you have to not use it in that mode)...

So I assume the symptom your seeing is that you

Navigate to "http://wheremyappishosted/" This loads your app and everything is fine...
Now you click "About", This changes your location to "http://wheremyappishosted/about" and again everything works just fine.
Now you hit Refresh in your browser and suddenly you get a 404

Sounds about right? If so... The problem is your server and not the AngularJS routing...

This is what happens from the servers perspective:

A request for "http://wheremyappishosted/" is received, the server responds with the main page for the app. Everything is fine...
AngularJS handles the route change, the server does not receive any requests for "http://wheremyappishosted/about" It DOES however receive a request for the template "../view/about.html" which it can find and responds with.
Everything is fine...
A request for "http://wheremyappishosted/about" is received, but the server does not know what to respond for that so it gives a 404...

The solution is that you need your to deliver your main page as a fallback route... You may wan't to have certain filters in place so that a unknown route under the parent route "api" may still fail with a 404 etc...

But the essence of it is that the server doesn't know what to respond with for "http://wheremyappishosted/about", so you need to configure it so it knows that.

Collectives™ on Stack Overflow

Reload not working after AngularJs routing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related