1

So, I'm pretty new to AngularJS and I'm trying to use AngularJs ngRoute in my application.

It all works smoothly when I start at the application homepage:

http://localhost:8080/appName/

And when I click on links from this point it works smoothly.

However, when I type a URL that I know exists/works, it gives me a 404 error. If I go to that link by using the application instead of the url it loads fine, even though it has the same url.

Eg. http://localhost:8080/appName/search

will give a 404, even though that is the same url that is the default redirect.

Indeed, the only url that will load by typing in the location is the base URL I mentioned above.

My app.js looks like this: 

app.config( ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  $routeProvider
    .when("/search", {
      templateUrl: "search.html",
      controller: "SearchController"
    })
  .when("/results", {
    templateUrl: "results.html",
    controller: "ResultsController"
  })
  .when("/browse", {
    templateUrl: "browse.html",
    controller: "BrowseController"
  })
  .otherwise({redirectTo:"/search"});

//This gets rid of the # on the urls to the templates  
$locationProvider.html5Mode(true);

}]);

I am hosting this on a glassfish4 server.

Is there something obvious I am missing/misunderstanding about how ngRoute works? Is there some setting that I am missing?

All help appreciated...

EDIT 1: As @Matthew Green below says, I need to configure the webserver to return the index.html for all pages below

http://localhost:8080/appName

I know I am being completely dense here, but where abouts is this configured? I am hosting the code in a MAVEN Jersey-Quickstart-Webapp.

Steve Campbell
  • 3,385
  • 1
  • 31
  • 43
Tom O'Brien
  • 1,741
  • 9
  • 45
  • 73
  • I think we'll need a little more information -- at least the $routeProvider configuration and the specific urls you are using. – Beartums Jan 26 '16 at 17:24
  • 1
    Perhaps it'll help you: http://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes – t3__rry Jan 26 '16 at 17:41
  • I've updated the question to show the basic $routeProvider setup, and the urls in question – Tom O'Brien Jan 26 '16 at 18:46

1 Answers1

3

When you use ngRoute, you are using javascript to handle routing to create a SPA. That means you need to hit a real page that loads your routing for your application to know what page to route to.

For example, your http://localhost:8080/appName/ should be routing to your index.html which would contain the javascript for your routing. With that page loaded it knows how to handle the links you have in your application. However, if you were to go directly to http://localhost:8080/appName/pageName you also need that to load index.html, as it is the one that loads your routing. Once your routing is loaded it should direct you to the correct page in your application. Without redirecting in place, http://localhost:8080/appName/pageName is not a real page and therefore correctly returns a 404.

Knowing this, the thing you have to figure out is what kind of server setup you have to configure the appropriate redirects for everything under http://localhost:8080/appName/ to go to your index.html page.

Matthew Green
  • 10,161
  • 4
  • 36
  • 54
  • Thanks - that makes a good bit of sense. I am hosting the site on a glassfish4 server. Where exactly would I have to configure this? – Tom O'Brien Jan 26 '16 at 18:53
  • I don't have a clue. I'm sure you can find something easily enough now that you know what you are looking for though. Worst case, you can start a new question here on SO. – Matthew Green Jan 26 '16 at 19:01