How to remove redirects in Rails/Angularjs html5 mode

Question

How can I avoid the performance hit each time a user refreshes an angularjs page when using html 5 mode with rails? I am using Angularjs html5 mode Ruby on Rails route redirects. With my setup if I visit http://localhost:3000/users the url immediately becomes http://localhost:3000/?goto=users which then redirects to http://localhost:3000/users. What can I do to avoid redirects of this nature when using html5 mode?

Rails Routes

myApp::Application.routes.draw do
 namespace :api, defaults: {format: :json} do
   namespace :v1 do
    resources :users
   end
 end

# Re-route all angular requests to the angular router
get "/*path" => redirect("/?goto=%{path}")
root to: 'application#home'

end

Angular Routes

myApp.config(function($routeProvider, $locationProvider, $httpProvider) {
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = 
    $('meta[name=csrf-token]').attr('content');
    $routeProvider.
        when('/', {
            templateUrl: '../assets/mainIndex.html',            
            controller: 'MainController',
            redirectTo:
                function(current, path, search){
                  if(search.goto){
                    // if we were passed in a search param, and it has a path
                    // to redirect to, then redirect to that path
                    return "/" + search.goto;
                  }
                  else{
                    // else just redirect back to this location
                    // angular is smart enough to only do this once.
                    return "/";
                  }
                }
        }).when('/users', {
            templateUrl: '../assets/users/userIndex.html',          
            controller: 'UsersController'
        }).otherwise({
            redirectTo:'/'
        });
    $locationProvider.html5Mode(true);
});

The above is from this blog: http://omarriott.com/aux/angularjs-html5-routing-rails/

LightBox · Accepted Answer · 2014-06-15 15:25:45Z

5

Simply use this rails route:

  # Route all valid requests to AngularJS
  root to: 'application#home'
  get "*path" => "application#home"

And rails action_controller:

  # We'll just use this as a launch point for our App
  def home
    # Render just the layout since this application is Angular driven
    # our layout/application has all the angular logic and our controllers
    # have no views for themselves. We just need a place to launch from
    # and this happens to be it. So we have no view (thus :nothing => true)
    # but we still want the layout (since it has the App bootstrap code)
    render :layout => 'application', :nothing => true
  end

Now there is no need to handle redirects from the angularjs router. Just make plain routes to your pages.

answered Jun 15, 2014 at 15:25

LightBox

3,4354 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Gray · Accepted Answer · 2016-12-19 03:51:51Z

0

Here's another way to skin this cat:

# Gemfile
gem 'rack-rewrite'

# config.ru
# This file is used by Rack-based servers to start the application.
use Rack::Rewrite do
  rewrite %r{^(?!.*(api|\.)).*$}, '/index.html'
end

require ::File.expand_path('../config/environment',  __FILE__)
run Rails.application

Source: https://www.angularonrails.com/get-html5-pushstate-working-angular-rails/

answered Dec 19, 2016 at 3:51

Aaron Gray

11.8k8 gold badges58 silver badges61 bronze badges

Collectives™ on Stack Overflow

How to remove redirects in Rails/Angularjs html5 mode

Rails Routes

Angular Routes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Rails Routes

Angular Routes

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related