AngularJS：怎么让$ locationProvider.html5Mode与deeplinking [英] AngularJS: how to enable $locationProvider.html5Mode with deeplinking

问题描述

当通过 $ locationProvider.html5Mode使在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 结果
  当我浏览到根，我可以点击网站中的所有链接，角的 $ 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 结果
但是，当我浏览这个URL（或打刷新，当我像上面的一个深层链接...）这个导航是不工作，我希望它。
首先，我们作为<一个href=\"http://docs.angularjs.org/guide/dev_guide.services.%24location#htmllinkrewriting\">Documentation为$ locationProvider.html5Mode 指定，我们赶上在服务器上的所有URL，类似于角的，否则路线，并返回相同的HTML作为根域。但是，如果我再从中检查 $位置物体的角运行函数，它告诉我， http://www.site.com 是我的主机和 /存档是我的路径。在 $ routeProvider 到达了。否则（）子句，因为我只有 /新闻/存档作为一个有效的途径。和应用程序做古怪的东西。

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.

也许在服务器上重写需要以不同的完成，或者我需要的角度来指定的东西，但我目前无能，为何角度看是不带路径 /新闻段包括在内。

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：

// 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作为根本途径。
因此，它基本上是服务路线deeplinked在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
寻找到这个问题后，我们注意到该路由工作正常，因为它是对角1.0.7稳定，但显示了角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.

我已经检查了变化日志，但没有发现任何有用的，到目前为止，我想我们可以提出它作为一个bug，或链接到他们做了一定的变化不必要的行为，否则只能等待，看看它是否得到的固定在晚些时候发布稳定版。

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 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 VS 1.0.7当这个问题得到解决。

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

这篇关于AngularJS：怎么让$ locationProvider.html5Mode与deeplinking的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！