直接转到 URL 时,AngularJS 路径中带有参数的路由不会在 HTML5 模式下加载

2024-04-24

我指定了几条路线:

app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    $routeProvider.
    when("/", {
        templateUrl: "/ajax/home.html",
        controller: "HomeController"
    }).
    when("/test/:id", {
        templateUrl: "/ajax/test.html",
        controller: "TestController",
        resolve: {
            data: function ($q, $http, $route) {
                var deferred = $q.defer();
                var params = $route.current.params;

                $http({method: "GET", url: "/api/test/" + params.id + ".json"})
                    .success(function(data) {
                        deferred.resolve(data)
                    })
                    .error(function(data){
                        deferred.reject();
                    });

                return deferred.promise;
            }
        }
    });

    $locationProvider.html5Mode(true);

}]);

当另一条路线上有一个链接通向/test/x,效果很好。当不在 HTML5 模式下时它也可以正常工作。但是,当您直接导航到/test/x在 HTML5 模式下,路由不会加载,并且解析中的任何内容都不会执行。

我已经浏览了很多 AngularJS 文档,但仍然无法弄清楚这一点。请:(

编辑:我已经做了更多测试,这仅适用于其中有斜杠的路线。是否有参数似乎并不重要(例如:id)是否在其中。即将/hello(如果定义了该路由)适用于 HTML5 和非 HTML5 模式下的所有情况。去类似的事情/hello/world始终在非 HTML5 模式下工作,并且当通过单击链接从另一个路由更改路由时,在 HTML5 模式下工作。开启时清爽/hello/world,转到地址栏并按 Enter 键或单击从另一个网站指向它的链接会导致它重新加载索引页面,但不会重新加载实际路线。


Adding <base href="/" /> to the <head>部分是修复,具体取决于您遇到的问题。

(这就是我的答案,所以我想确保对于遇到此问题的其他人来说更加明显)

感谢@user27766 指出这一点。

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

直接转到 URL 时,AngularJS 路径中带有参数的路由不会在 HTML5 模式下加载 的相关文章

  • Angularjs 1.2.x Injector:添加 ngRoute 后即使出现 modulerrr 错误

    我正在自学 AngularJS 但似乎无法解决这个错误 我尝试过排除故障 放弃了 这就是我得到的 索引 html div div main js var app angul
  • Angular js中两个$scope数组的区别

    有没有办法返回 angularjs 范围内存在的两个数组之间的差异 例如 scope user1 a b scope user2 a b c d 这两者的区别应该给我另一个 scope user3 c d Underscore js对此有不
  • 我如何使用 angularJS Restful 服务使用来自外部文件的 json 数据

    我正在开发一个应用程序 我正在从一个中检索 json 数据 使用 http get 方法的外部文件工作正常 现在我正在尝试使用角度 安心的服务 它在过滤器中工作正常 但是当我在控制器中使用它时 它是 显示未定义 Service js Fil
  • 从 Django Rest Framework 中的令牌获取经过身份验证的用户

    我是 Django 新手 我已经成功使用 DRF 构建了一个小型 API 我的 angular js 客户端发布了用户身份验证详细信息 DRF 返回一个令牌 如下所示 token 9944b09199c62bcf9418ad846dd0e4
  • 使用 Angular UI Bootstrap 在动态创建的选项卡上设置活动选项卡

    我有一个动态选项卡集 它从一个以空白开始的数组生成选项卡 当我向数组添加新项目时 它会显示为新选项卡 我希望最后添加的选项卡成为活动选项卡 每次向数组添加项目时我都会设置活动索引 HTML
  • 角度 ng-messages 仅在 $touched 为 true 时显示

    我并没有做任何太特别的事情 我有一个输入 需要在每次击键时进行验证 如果验证失败 则显示错误 不要等待模糊事件来触发 touched 我以为这是默认情况 但显然不是 我正在使用有角度的材料和有角度的消息 我这样做是为了大写锁定检测 标记
  • 如何使用 ng-pattern 验证 angularJs 中的电子邮件 ID

    我正在尝试使用 ng pattern 指令验证 angularJs 中的电子邮件 id 字段 但我是 AngularJs 的新手 我需要在用户输入错误的电子邮件 ID 后立即显示错误消息 我下面的代码正在尝试解决 帮助我使用 ng patt
  • Angular 模板调用函数可以返回 Promise

    Angular 的 q 文档 http docs angularjs org api ng 24q说 q 承诺被模板引擎以角度方式识别 这意味着在模板中 您可以将附加到范围的承诺视为结果值 Angular 的视图模板还允许您计算表达式 这意
  • 双向数据绑定(Angular)与单向数据流(React/Flux)

    上周 我一直在试图弄清楚如何双向数据绑定 Angular https docs angularjs org guide databinding and 单向数据流 React Flux https youtu be i 969noyAM是不
  • 脚本内的角度范围

    我们可以使用脚本标记内范围中定义的角度变量 如下所示 HTML 代码 div div JS CODE function AngularCtrl scope scope user name John 我只是得到 scope 未定义 有人可以帮
  • 智能表 - 预选特定行

    我正在使用智能表 我需要预先选择特定行 因此 在加载我的列表后 我循环进入它并设置isSelected当我到达我想要选择的项目时属性 Preselect a row for var i 0 len scope displayCollecti
  • 使用 ui-router 转到祖父母状态

    With ui router我可以用 state go 无需指定其完整路径即可转到父状态 有没有类似的方式去祖父母状态 我的父母状态是抽象的 In 文档示例 http angular ui github io ui router site
  • Angular JSON 与 JSONP $promise

    如果我从我的controller js进行这个JSON调用 scope userInvestors userInvestors query UserID scope user uid function userInvestors conso
  • Angular $http 正在发送 OPTIONS 而不是 PUT/POST

    我正在尝试通过 PHP 后端更新 插入 MySQL 数据库中的数据 我正在使用 AngularJS 构建前端并使用 http用于与 REST API 通信的服务 我的设置如下所示 我通过 httpProvider 设置标头 httpProv
  • AngularUI Datepicker动态日期禁用

    我正在使用 AngularUI 日期选择器 我有两个相互影响的日期选择器 例如 一个是 开始日期 另一个是 结束日期 我不想为两个日期选择器创建验证 而是想消除无效日期的选项 即结束日期早于开始日期 反之亦然 有没有办法在选择日期时重新 触
  • WebSocket 连接失败:WebSocket 握手期间出错:意外的响应代码:400

    我正在尝试将 Socket io 与 Angular 集成 但在从客户端到服务器建立连接时遇到困难 我查看了其他相关问题 但我的问题发生在本地 所以中间没有网络服务器 这就是我的服务器代码的样子 const app express cons
  • AngularJS'无法读取未定义的'then'属性'

    我遇到这个问题 当我单击登录按钮时 chrome 控制台会记录以下内容 angular min js 117 TypeError 无法读取未定义的属性 then 在 m scope logIn loginModuleController j
  • AngularJS 货币过滤器:如果金额中没有美分,我可以删除 .00 吗?

    我正在关注这个 http docs angularjs org api ng filter currency http docs angularjs org api ng filter currency当我在字段中输入 1234 56 时
  • Angular .controller() 在 .run() AngularJS 之前运行

    我在 run 中有一个 ajax 调用 该调用将一个变量加载到 rootScope 中 该变量在与视图关联的控制器中是需要的 有时 在刷新 F5 时 当 controller 加载时 rootScope SuperCategories 中没
  • 在 Protractor 测试中同步处理

    我正在尝试在量角器中编写一个我认为相当简单的测试 但似乎当您尝试同步执行任何操作时 量角器就会让您的生活变得困难 通常 处理定位器函数 返回 Promise 不是问题 因为任何 Expect 语句都会在测试断言之前自动解析传递给它的任何 P

随机推荐