0

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.

Navneet Priya
  • 23
  • 6
  • you are using `$locationProvider.html5Mode(true);`, which removes hash-bangs - `#` from your URL. Using `Home` 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 Feb 21 '18 at 10:02
  • $router.reload() function is also not working. But i might be using it in the wrong way. – Navneet Priya Feb 21 '18 at 10:02
  • @AlekseySolovey Thanks for the explanation. I cant remove it though but please explain how to reload the page? – Navneet Priya Feb 21 '18 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**](https://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes) if you have `.htaccess` file on your server – Aleksey Solovey Feb 21 '18 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 Feb 21 '18 at 10:05
  • `$route.reload()` is to reload page in AngularJS, you mentioned `$router.reload()` – Ankit Vadi Feb 21 '18 at 13:29
  • My code has $route.reload() only. – Navneet Priya Feb 21 '18 at 15:12
  • try to add links like this About – Arun Feb 27 '18 at 18:55

1 Answers1

0

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

  1. Navigate to "http://wheremyappishosted/" This loads your app and everything is fine...
  2. Now you click "About", This changes your location to "http://wheremyappishosted/about" and again everything works just fine.
  3. 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:

  1. A request for "http://wheremyappishosted/" is received, the server responds with the main page for the app. Everything is fine...
  2. 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...
  3. 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.

Jens
  • 3,353
  • 1
  • 23
  • 27