我们将 AngularJS 嵌入到我们的 Django 应用程序中,并通过 AngularJS 处理 URL 路由 ui-router .使用 ui-sref 在各部分之间导航并在应用程序内四处点击,一切正常。
return $stateProvider.state('root.dashboard', {
abstract: true,
url: 'dashboard/'
}).state('root.dashboard.profile', {
url: 'profile/',
views: {
'@': {
templateUrl: Urls['dashboard:profile'](),
controller: 'ProfileController'
}
}
}).state('root.dashboard.home', {
url: '',
views: {
'@': {
templateUrl: Urls['dashboard:dashboard_home'](),
controller: 'DashboardController'
}
}
...
问题是当用户导航到非根页面(例如 http://example.com/dashboard/profile/
),并且用户刷新浏览器,重新-加载浏览器的 URL 或直接将非根 URL 粘贴到浏览器中。在这种情况下,用户将被重定向到根页面 (http://example.com/dashboard/
),而不是在浏览器中加载保留相同 URL 的页面。
由于路由是由 Angular 处理的,在服务器端我们没有为那些非根 URL 定义任何 url 路由;相反,我们有将 404 重定向到根页面的中间件:
class Redirect404(object):
def process_response(self, request, response):
if response.status_code != 404 or request.method != 'GET':
return response
return HttpResponsePermanentRedirect('/dashboard')
我们希望路由器能够保持原始 URL 并将用户带回原始页面(即“dashboard/profile
”)。请注意,我们在 Angular 中设置了 HTML5Mode,如下所示:
$locationProvider.html5Mode = true;
我们的理解和/或设置存在一些错误,希望得到澄清。
最佳答案
我们希望路由器能够保持原始 URL 并将用户带回原始页面。
这是误解。
这是事件的顺序:
- 用户在地址栏中键入
http://example.com/dashboard/profile/
。 - 浏览器向服务器发送一个
GET
请求以获取该 URL。 - 您的服务器响应
301
重定向响应。 - 浏览器看到该响应并向
http://example.com/dashboard/
发送一个新的GET
请求。 - 服务器响应您的 Angular 页面。
- Angular 应用程序启动并查看
window.href
以查看当前路由是什么。它会看到根路由并做出适当的响应。
换句话说,当您重定向时,您会丢失原始 URL。
解决方案很简单:无需重定向,只需返回您的页面以响应任何(有效的)URL。这样,请求的 URL 就会得到维护,并且当 Angular 启动时,它将能够找出正确的路径。 (这假定在 Angular 中正确设置了路由,但听起来你已经成功了。)
实现也很简单。只需将您的 Django urls.py
从以下内容更改为:
urlpatterns = [
url(r'^dashboard/$', my_view),
]
像这样:
urlpatterns = [
url(r'^dashboard/.*$', my_view),
]
关于javascript - AngularJS + Django : URL refresh or direct access not loading correctly,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31586692/