Sinatra, AngularJS and HTML5Mode
The Sinatra Part
get "/*" do
File.read(File.join("public", "index.html"))
endPut this at the bottom of your application file and this will serve your
AngularJS application at any endpoint. This, of course, will read the
public/index.html file every time that you head that endpoint. Better if you
memoize it.
get "/*" do
render_index
end
def render_index
@index ||= File.read(File.join("public", "index.html"))
endImportant note
Any other route that you register after this snippet won’t be triggered as "/*" matches everything. Put any route definition before it.
A decent example would look something like this:
class MyApp < Sinatra::Base
# - Get list of countries - #
get "/api/v1/countries" do
# whatever
end
# - Get a single country - #
get "/api/v1/countries/:id" do
# whatever
end
# - Point anything else to the AngularJS app - #
get "/*" do
render_index
end
def render_index
@index ||= File.read(File.join("public", "index.html")
end
endThe AngularJS part
Put this in your AngularJS application definition and you should be ready to go:
(function() {
"use strict";
var deps = [];
angular.module("fooApp", deps).
config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
}());