AngularJS:如何启用$locationProvider.html5Mode与深层链接

前端之家收集整理的这篇文章主要介绍了AngularJS:如何启用$locationProvider.html5Mode与深层链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当通过$ locationProvider.html5Mode(true)在AngularJS中启用html5Mode时,导航似乎是倾斜的,当你登陆页面更深的网站。

例如:

> http://www.site.com
当我导航到根,我可以单击网站中的所有链接,Angular的$ routeProvider将接管导航通过网站和加载正确的视图。
> http://www.site.com/news/archive
但当我导航到这个网址(或当我在一个深层链接像上面的一个打击刷新…)这个导航不工作,我期望它。
首先,我们作为Documentation for $locationProvider.html5Mode指定,我们捕获服务器上的所有url,类似于否则路由在角,并返回相同的html作为根域。但是如果我然后检查$ location对象从运行函数的角度,它告诉我,http://www.site.com是我的主机,和/ archive是我的路径。 $ routeProvider到达.otherwise()子句,因为我只有/ news / archive作为有效的路由。和应用程序做奇怪的东西。

也许在服务器上的重写需要做不同的,或者我需要指定东西在角度,但目前我无能为力角看到的路径没有/新闻段包括

示例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 urls上向前端提供数据),并且在末端,如果没有特定的其他路由被绑定,则存在全捕获路由,它提供与根路由相同的html。
所以它基本上服务于那个深层链接路线上的首页html。

更新2
在查看问题后,我们注意到这个路由工作正常,在Angular 1.0.7稳定,但显示上述行为在Angular 1.1.5不稳定。

我检查了更改日志,但还没有发现任何有用的东西到目前为止,我想我们可以提交它作为一个错误,或不必要的行为链接到他们做了一定的更改,或只是等待,看看它是否固定后来被发布稳定版本。

发现有没有bug。
只需添加
<base href="/" />

到您的< head /&gt ;.

原文链接:https://www.f2er.com/angularjs/146669.html

猜你在找的Angularjs相关文章