AngularJS:如何通过深度链接启用 $locationProvider.html5Mode

2023-11-30

当通过 AngularJS 启用 html5Mode 时$locationProvider.html5Mode(true),当您到达网站较深处的页面时,导航似乎会倾斜。

例如:

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

  • http://www.site.com/news/archive
    但是当我导航到这个网址时(或者当我在像上面这样的深层链接上时点击刷新......)这个导航无法按照我的预期工作。 首先,我们作为$locationProvider.html5Mode 的文档指定,我们捕获服务器上的所有 url,类似于otherwise以角度路由,并返回与根域相同的 html。但如果我随后检查$location对象从内部run角度的函数,它告诉我http://www.site.com is my host然后/archive is my path. the $routeProvider到达在.otherwise()条款,因为我只有/news/archive作为有效路线。该应用程序做了一些奇怪的事情。

也许服务器上的重写需要以不同的方式完成,或者我需要以角度指定内容,但目前我不知道为什么角度看到的路径没有/news包括部分。

示例 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
}]);

Edit根据请求,服务器端的更多详细信息: 服务器端由 zend 框架的路由组织,它处理自己的路由(用于在特定的情况下向前端提供数据)/apiurls,最后,如果没有绑定特定的其他路由,则有一个包罗万象的路由,它提供与根路由相同的html。 所以它基本上在深度链接的路线上提供主页 html。

Update 2研究问题后,我们注意到该路由在 Angular 1.0.7 stable 上运行良好,但在 Angular 1.1.5不稳定版中显示了上述行为。

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


发现没有bug。 只需添加:

<base href="/" />

to your <head />.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:如何通过深度链接启用 $locationProvider.html5Mode 的相关文章

  • 如何将 .env 文件变量传递给 webpack 配置?

    我是 webpack 的新手 几乎完成了所有构建部分 但现在的问题是我想将环境变量从 env 文件传递 到 webpack 配置 以便我可以通过以下方式将该变量传递到我的构建文件webpack DefinePlugin plugin 目前我
  • 如何在 AngularJS 中刷新/使 $resource 缓存失效

    我有一个简单的 User resource 它使用默认的 http 缓存实现 如下所示 factory User function resource return resource endpoint user current project
  • Angularjs $http 似乎不理解响应中的“Set-Cookie”

    我有一个带有 Passport 模块的 Nodejs Express REST api 用于身份验证 登录方法 GET 在标头中返回一个 cookie 当我从 Chrome 调用它时 它工作正常 我的 cookie 已在我的浏览器中设置 但
  • 为什么 AngularJS 指令(属性等)在 WebStorm 8 中显示为“无效”?

    我几个小时前刚刚安装了 WebStorm 8 我一直在写一些 AngularJS 的东西 但我有一个相当烦人的小问题 AngularJS 插件似乎只能部分工作 每当我输入 ng 时 我都会收到一个智能感知弹出窗口 其中显示所有各种 ng 属
  • 401 未经授权的帖子回复

    我一直在使用 Angular 模板制作 Node js 网站 但我无法在 DB Mongo 上创建数据 这是代码 节点路由 var Property mongoose model Property var jwt require expre
  • Spring Boot 和安全性以及自定义 AngularJS 登录页面

    我正在为 Spring Security 实现一个自定义 AngularJS 登录页面 但遇到身份验证问题 遵循本教程 示例 以及他们的示例在本地运行良好 https github com dsyer spring security ang
  • 使用 AngularJS 动态加载 Google 地图 API

    我正在尝试使用 AngularJS 加载 Google Maps API 以及该部分的控制器 search controller GoogleMaps scope sce function GoogleMaps scope sce var
  • 为什么 Angular (1.5) 组件总是有一个隔离的范围?

    我正在构建一个 Angular 库 它提供了一堆组件 这些组件应该可以更轻松地在特定 API 之上构建 SPA 应用程序 对于某些组件 我们使用多槽嵌入功能 AngularJS 1 5 版本中引入了多槽嵌入和组件 我真的很喜欢这两个功能 但
  • Typescript 中的 Angular 服务具有依赖注入和缩小功能

    我现在正在努力让我的头脑围绕 Angularjs 我目前正在寻找服务 我也使用打字稿来编写代码 现在 从网络上的示例中 我看到人们在打字稿中使用如下所示的服务 class Service constructor private http n
  • 在 Web 应用程序上同时运行两个版本的 (twitter) bootstrap

    我目前已经开始尝试使用 bootstrap 和 angularjs 进行客户端开发 我收到了一项任务 为我们的网站 一个 angularjs 应用程序 制作一个或多或少独立的功能 并且一直在研究它 但注意到我学到的引导函数不起作用 经过检查
  • Jasmine 单元测试不等待承诺解析

    我有一个有角度的服务 它具有像这样的异步依赖项 function angular module app factory myService q asyncService function q asyncService var myData
  • 如何从角度资源 $save() 读取响应并保留原始数据

    我是 Angular 的新手 我确信我在这里缺少一些基本的东西 我有一个对象 我将其发布到服务器来创建它 服务器返回对象 ID 我需要读取并更新客户端中的对象 服务器只会返回对象 ID 但是 在客户端 我有其他数据 当我执行回调时我无法使用
  • 角度剑道下拉

    我正在对许多组件使用 Angular kendo ui 但遇到了一个我似乎无法解决的问题 我有以下角度选择 它工作正常并将所选值正确绑定到 ng model
  • 如何在 Angular JS 应用程序中使用 ckeditor? [复制]

    这个问题在这里已经有答案了 我是 angularJS 新手 我需要在我的应用程序中使用 ckeditor 作为文本区域 在我在 Angular 应用程序上尝试之前 我已经完成了一个 仅 html 网页 我已经生成了我的 ckeditor 包
  • Angularjs - ng-click 函数与指令

    我无法决定在以下情况下使用哪种方法 我试图在点击按钮时发出警报 我可以使用两种方法来做到这一点 哪个是最佳实践 请告诉我为什么 Method 1 div div
  • AngularJS 路由与后端路由

    我想在我的下一个项目中使用 AngularJS 该应用程序具有 Python 后端和 html5 Angular 前端 我将在后端使用 MVC 框架 但我有点困惑 我必须在后端和前端使用路由吗 因为我总是使用后端路由 而前端路由对我来说确实
  • 如果满足条件,Angular JS 如何添加 CSS 类

    我正在创建一个截断指令 如果字符超过 10 我就会截断文本字符串 然后它将显示 我的目标是编写一个条件 如果字符少于 10 个 则删除 如果有人对我如何实现此目标有任何想法 我会坚持这一点并接受建议 这是我的代码 var app angul
  • 关闭特定url上的AngularJS窗口

    我是 angularjs 的新手 所以这个问题对于经验者来说可能看起来很愚蠢 但我真的无法执行此操作 任何人都可以告诉我如何在到达特定网址后从 webview 返回到应用程序 就像我正在打开一个浏览器中的窗口用于支付过程 所以我需要的是 当
  • 角度 ui-grid 自定义标题 html

    我正在尝试将 glyphicon glyphicon thlist 我可以单击并调用控制器函数 添加到默认标题的左侧 我采用了默认标头并尝试操纵它来执行此操作 默认标头位于 https raw githubusercontent com a
  • 将复杂对象传递给 ui-sref 参数

    我需要这样的构建网址 列表 过滤器 状态 1 过滤器 类型 2 I do link a List a 在参数中传递复杂对象 如果传递简单对象 filter 1 可以 但我需要这个 state state list url list filt

随机推荐