Rails routing + AngularJS routing

Question

I have the following code in my angular app.

app.config(function($routeProvider, $locationProvider) {
   $locationProvider.html5Mode(true);
   $routeProvider
     .when("/users/:u_id/restaurants/:r_id/menus/:m_id/sections/:sec_id/items", { templateUrl: "/assets/menus/items.html", controller: "MenuItemCtrl" })
});

It works fine when I navigate to the path using

<a href="./sections/{{section.id}}/items">View Items</a>

But when I refresh the page or go directly to the url it throws a rails routing error

No route matches [GET] "/users/3/restaurants/3/menus/4/sections/4/items"

If I create this route in routes.rb it just returns the JSON associated with the response and does not route to the correct template.

Does anyone know how to fix this issue?

Answer 1

In the rails route you must redirect that request to the angular base url, so angular can be executed.

Without that, the rails responds to the request. That's how html5mode routes work.

Edit:

Let's say that your angular is served from application#home . You want all the GET requests to be redirect to there, so angular can work.

Adding this route get '*path', to: 'application#home' will make all the GET requests the angular page.