angular routes with rails

Question

I'm going through the Pro Angular tutorial. I have a question about resolving rails routes with angular routes.

I have the following code:

$urlRouterProvider.otherwise("/products");

$stateProvider
.state('root', {
  url: "/stores",
  abstract: true,
  template: '<ui-view/>'
})
.state('products', {
  url: "/products",
  templateUrl: "<%= asset_path('store/templates/productList.html') %>",
  controller: "productListCtrl as plCtrl"
})
.state('checkout', {
  url: "/checkout",
  templateUrl: "<%= asset_path('store/templates/checkoutSummary.html') %>"
})

When I go to localhost:3000 my url automatically goes to /products and displays the correct page. However, when I hit reload on my browser I get a rails error page saying that missing template products/index.

routes.rb

resources :stores, only: :index
get 'stores/*app', to: 'stores#index'

resources :products, only: :index

namespace :api, constraints: {format: :json}, defaults: {format: :json} do
  namespace :v1 do
    resources :products
  end
end

root 'stores#index'

app/views/stores/index.html.slim

base href="/stores"

div ng-app="storeApp"
  ui-view autoscroll="top"

apneadiving apneadiving · Accepted Answer · 2015-09-01T12:35:10

Your server is willing to handle the routing but you deferred the task to the client.

So you should always render the base template from the server and let the client handle the routing itself.

At the end of your routes.rb, add:

  get  '*a', to: 'stores#index'

where your_controller and your_action match what you use for root_path

angular routes with rails

1 Answers