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 的相关文章

  • 如何更改 angularjs $http.jsonp 的标头

    我读了document http docs angularjs org api ng 24http 但我想我一定是误解了 http defaults headers jsonp Accept application json http js
  • JSON 数据的动态表单(不同类型)

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p
  • 有效使用 Angular Promise 和 Defers

    在 Angular 以及所有 SPA JS 框架 中 假设页面导航对于用户来说非常快速且 无缝 此速度的唯一瓶颈是使用 API 调用从我们的服务器检索数据 因此 寻找一种解决方案似乎是合理的 在该解决方案中 我们可以在等待 API 调用获得
  • 将安全的 Grafana 嵌入到 Web 应用程序中

    我想使用 AngularJS 将 Grafana 嵌入到我的 Web 应用程序中 目标是 当用户使用我的应用程序时 她应该能够单击按钮并加载 Grafana UI 就其本身而言 这是一项简单的任务 为此 我使用 apache 代理 Graf
  • 在 Angular ui-router 中更改状态而不更改浏览器历史记录

    假设我们有这样的逻辑 从状态A改变到状态B 每当我们到达状态 B 时 应用程序总是通过调用将我们重定向到状态 C state go stateC 现在我们处于状态C 我的问题是如何从状态 C 返回状态 A 考虑到状态 A 可以是我们在运行时
  • AngularJS,使用没有后退按钮刷新的路由

    我在用着angularJS使用 AJAX 构建一个简单的单页应用程序 但是当用户使用本机后退按钮时我遇到了问题 angular module myApp ionic myApp controllers myApp services conf
  • D3.js折线图溢出边距

    我有 d3 js 折线图 它作为 angular js 应用程序的指令包含在内 动态添加的线和 xAxis 以及缩放线上的边距溢出 我必须在图的顶部为每条加载的线创建 Ox 轴 并具有 Ox 和 Oy 单独的缩放可能性 Oy 缩放工作正常
  • 如何使用 ng-if 测试变量是否已定义

    有没有办法使用ng if测试变量是否已定义 而不仅仅是它是否为真 在下面的示例中 现场演示 http plnkr co edit jKPN0dOHDWBtPxJHXv2R p preview HTML 仅显示红色商品的运费 因为item s
  • 在模态中打开模态

    我有一个有角度的 ui 模态 其中有一个按钮 单击此按钮时 我想在 Angular ui 中打开另一个模式 我该怎么做 scope open function var modalInstance modal open templateUrl
  • getLocationAbsUrl 与 getCurrentUrl

    在量角器中 全球可用browser对象有两个方法 getLocationAbsUrl http angular github io protractor api view Protractor prototype getLocationAb
  • Angular JS 在调用新的 $http 之前取消 $http 调用

    在 Angular JS 1 1 5 中 您可以取消之前启动的 http 调用 这两个link1 https stackoverflow com questions 16962232 in angularjs how to stop ong
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • Swagger 生成 javascript-closure-angular-client

    我是 swagger 的新手 我从 swagger 的在线编辑器生成了一个 javascript 闭包角度客户端 它给了我一个 DefaultAPI js 和其他与我的对象定义匹配的 JS 文件 我在 swagger 文档和网上搜索了一种在
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • 如何销毁角度工厂实例

    一方面 我有几个工厂 每个工厂都控制一个 websocket 另一方面 其中一个工厂应该在客户端登录时启动 因此 if user isLogged injector get NotificationsWebsocket 这就是我动态初始化工
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它

随机推荐