angularjs - Sinatra + Angularjs 路由

Question

我有一个在 Sinatra 上运行的 Angularjs 应用程序。

如果我单击应用程序中的链接，我的 Angular 路由正在工作，但是如果我直接访问该 url，我会从 Sinatra 获得 404。

有没有办法将路由从 Sinatra 传递到 Angular？

目前 Sinatra 所做的只是加载 index.html

get '/' do
  File.read "#{Dir.pwd}/app/index.html"
end

Answer 1

您可以这样做的一种方法是使用 Sinatra 设置一条包罗万象的路线，以将请求传递到您的 Angular 应用程序。我对 sinatra 框架不是很熟悉，但是对于烧瓶，这就是你的做法：

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def index(path):
    return make_response(open('templates/index.html').read())

只需找到 Sinatra 的等价物，您就可以开始使用了。

---

编辑：我意识到设置一条包罗万象的路线可能不是最好的主意，特别是如果您正在构建一个网站（并使用“$locationProvider.html5Mode(true)”与构建单页 webapp），对于返回正确的 404 对搜索引擎索引等很重要。

相反，我会为您的 Angular 应用程序中的每条路线注册一个烧瓶路线。在烧瓶中，这就是你的做法。

@app.route('/')
@app.route('/about')
def index(path):
    return make_response(open('templates/index.html').read())

在 sinatra 中，我想它会是这样的：

get '/' do
get '/about' do
    File.read "#{Dir.pwd}/app/index.html"
end

编辑：这真的取决于你要做什么。一些网站希望他们的整个网站成为一个 Angular 应用程序（并且不优先考虑 SEO、正确的 404 等），而另一些网站希望为他们的 Angular 应用程序保留一个特定部分。例如，您可能会看到“/app/OTHER_STUFF”。在这种情况下，catch all 会很好用。

Answer 2

感谢@Ryan，我最终实现了一个可行的解决方案。

get '/*' do
  File.read "#{Dir.pwd}/app/index.html"
end