直接调用partial时，Angular会加载主模板

Question

我正在用AngularJS和Laravel构建一个应用程序，用于API交互。我有一个主模板文件，比如index.html，里面有ng-view。

客户列表视图URL: http://example.com/#customers，其中客户为部分视图URL。

后来我将应用程序切换到html5模式，这样我就可以在没有#部分的情况下调用它，例如。http://example.com/customers .

问题

如果在Angular范围内调用它，它是可以工作的，但如果我直接调用URL，它只会加载客户列表视图的HTML片段(没有主模板和脚本)，并破坏应用程序。

有办法解决这个问题吗?

Answer 1

好吧，我试着给出一个答案，因为评论有点长。

我自己是AngularJS的新手，但就我所能解释的你的描述而言，你在你的前端应用程序中使用了与API中相同的url。不同之处在于，你的API是由web服务器提供的，而前端页面是由Angular提供的。

所以为了简单起见，我假设你的初始Angular页面(index.html)可以通过你的主URL(例如www.example.com)访问。example.com的所有子域仅用于API调用。这意味着如果你在前端应用中切换页面，Angular会捕捉到这个URL状态变化，并通过后台请求(AJAX)来提供你所请求的任何内容，但这也意味着你的index.html仍然存在于浏览器中(与另一个子视图ofc一起)。

通过刷新页面(或直接调用URL)，您向服务器请求一个完全不同的资源。很明显，www.example.com提供的服务与www.example.com/api/random/resource不同。在你的浏览器中没有加载index.html之前，Angular也没有加载，无法捕捉URL状态的变化来防止默认的浏览器行为(即从服务器请求这个资源)。所以从服务器的角度来看，你请求的不是主页，而是一个API资源。

所以我建议的解决方案是非常直接的。正如我已经提到的，我自己是AngularJS的新手，但据我所知(可以在web上阅读)，Angular在后台与AJAX调用一起工作(有意义，不是吗?)因此，您可以简单地在Laravel应用程序中使用中间件来决定请求是否基于AJAX。如果没有AJAX调用，那么这个中间件可以提供主页面(不需要更改实际的URL!)。接下来，Angular应用仍然会把被请求的URL作为状态，并且可以提供任何你想要它提供的服务。

我不能提供给你任何代码，因为我现在没有时间，但我认为你真的不需要那么多，据我所知，已经有一个中间件处理一些AJAX的东西…也许你可以看看这个。如果您在代码中找到了解决方案，请随意分享!

Answer 2

经过研究，我发现最合适的方法是使用.htaccess路由到主模板。下面的代码可以完成这项工作。

RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) index.html [NC,L]