AngularJS:如何通过深层链接启用 $locationProvider.html5Mode [英] AngularJS: how to enable $locationProvider.html5Mode with deeplinking

问题描述

当通过 $locationProvider.html5Mode(true) 在 AngularJS 中启用 html5Mode 时，当您登陆网站更深处的页面时，导航似乎会倾斜.

When enabling the html5Mode in AngularJS via $locationProvider.html5Mode(true), navigation seems to be skewed when you land on a page deeper in the site.

例如:

• http://www.site.com
  当我导航到根目录时，我可以单击站点中的所有链接，Angular 的 $routeProvider 将接管整个站点的导航并加载正确的视图.

• http://www.site.com
  when i navigate to the root, i can click all links in the site, Angular's $routeProvider will take over navigating through the site and loading the correct views.

http://www.site.com/news/archive
但是当我导航到这个网址时(或者当我在上面的深层链接上时点击刷新......)这个导航没有像我期望的那样工作.首先，我们的 $locationProvider.html5Mode 文档 指定，我们捕获服务器上的所有 url，类似于 angular 中的 otherwise 路由，并返回与根域相同的 html.但是，如果我然后从 angular 的 run 函数中检查 $location 对象，它会告诉我 http://www.site.com 是我的 host 而 /archive 是我的 path.$routeProvider 到达 .otherwise() 子句，因为我只有 /news/archive 作为有效路由.该应用程序会做一些奇怪的事情.

http://www.site.com/news/archive
but when i navigate to this url (or hit refresh when I'm on a deeplink like the above one...) this navigation is not working as I expect it to. first of all, our as the Documentation for $locationProvider.html5Mode specifies, we catch all urls on the server, similar to the otherwise route in angular, and return the same html as the root domain. But if I then check the $location object from within the run function of angular, it tells me that http://www.site.com is my host and that /archive is my path. the $routeProvider arrives in the .otherwise() clause, since i only have /news/archive as a valid route. and the app does weird stuff.

也许服务器上的重写需要以不同的方式完成，或者我需要以 angular 指定内容，但目前我不知道为什么 angular see 的路径没有包含 /news 段.

Maybe the rewriting on the server needs to be done differently, or I need to specify stuff in angular, but currently i'm clueless as to why angular see's the path without the /news segment included.

示例 main.js:

example main.js:

// Create an application module
var App = angular.module('App', []);

App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) {

    $routeProvider
        .when(
        '/', {
            redirectTo: '/home'
        })
        .when('/home', {
            templateUrl: 'templates/home.html'
        })
        .when('/login', {
            templateUrl: 'templates/login.html'
        })
        .when('/news', {
            templateUrl: 'templates/news.html'
        })
        .when('/news/archive', {
            templateUrl: 'templates/newsarchive.html'
        })
        // removed other routes ... *snip
        .otherwise({
            redirectTo: '/home'
        }
    );

    // enable html5Mode for pushstate ('#'-less URLs)
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

}]);

// Initialize the application
App.run(['$location', function AppRun($location) {
    debugger; // -->> here i debug the $location object to see what angular see's as URL
}]);

编辑根据请求，服务器端的更多详细信息:服务器端由 Zend 框架的路由组织，它处理自己的路由(用于在特定的 /api url 上向前端提供数据，最后，有一个包罗万象的路由如果没有绑定特定的其他路由，则它提供与根路由相同的 html.所以它基本上在该深层链接路线上提供主页 html.

Edit as per request, more details on the server side: the server side is organised by the routing of zend framework, and it handles it's own routes (for serving data to the frontend on specific /api urls, and at the end, there is a catch-all route if no specific other route is bound, it serves the same html as the root-route. so it basically serves the homepage html on that deeplinked route.

更新 2在调查了这个问题之后，我们注意到这个路由在 Angular 1.0.7 稳定版上运行良好，但在 Angular 1.1.5 不稳定版中显示了上述行为.

Update 2 after looking into the problem we noticed this routing works fine as it is, on Angular 1.0.7 stable, but shows the above described behaviour in the Angular 1.1.5 unstable.

我已经检查了更改日志，但到目前为止还没有发现任何有用的信息，我想我们可以将其作为错误提交，或者与他们所做的某些更改相关的不需要的行为，或者只是等待看看它是否get 已修复，稍后发布稳定版.

I've checked the change-logs but haven't found anything useful so far, I guess we can either submit it as a bug, or unwanted behaviour linked to a certain change they did, or just wait and see if it get's fixed in the later to be released stable version.

推荐答案

这个问题是由于使用了 AngularJS 1.1.5(它是不稳定的，显然有一些 bug 或者路由的实现与 1.0 不同.7)

This problem was due to the use of AngularJS 1.1.5 (which was unstable, and obviously had some bug or different implementation of the routing than it was in 1.0.7)

将其转回 1.0.7 立即解决了问题.

turning it back to 1.0.7 solved the problem instantly.

已经尝试了 1.2.0rc1 版本，但还没有完成测试，因为我不得不重写一些路由器功能，因为他们把它从核心中取出来了.

have tried the 1.2.0rc1 version, but have not finished testing as I had to rewrite some of the router functionality since they took it out of the core.

无论如何，这个问题在使用 AngularJS 和 1.0.7 时得到了解决.

anyway, this problem is fixed when using AngularJS vs 1.0.7.

这篇关于AngularJS:如何通过深层链接启用 $locationProvider.html5Mode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！