【问题标题】:How to trigger router's state on page load?如何在页面加载时触发路由器的状态?
【发布时间】:2015-06-20 16:50:19
【问题描述】:

在我的应用程序中,我有这个服务器生成的链接: http://localhost:3000/people#/users

当我点击它时,我会使用 Angular UI-Router 脚本重定向到以下 HTML 页面:

<a ui-sref="users">Users</a>      
<a ui-sref="invitations">Invitations</a>       
<div ui-view></div>

问题是 - users 状态不会在页面加载时自动触发。我需要手动点击它,然后才会触发相应的UI-Router 状态。

这是我的配置文件:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('users', {
      url: "/users",
      templateUrl: "assets/partials/users.html"
    })
})

【问题讨论】:

    标签: angularjs angular-ui-router state


    【解决方案1】:

    有a working plunker

      $urlRouterProvider.otherwise('/users');
    
      // States
      $stateProvider
        .state('users', {
          url: "/users",
          templateUrl: "assets/partials/users.html"
        });
    

    $urlRouterProvider.otherwise('/users'); 将在未提供时重定向到定义的页面

    index.html 中的这个链接也可以使用

      href
      <a href="#/users">
      ui-sref      
      <a ui-sref="users">
    

    查看here

    如果应该更动态,请检查:

    Angular - Dynamically Choose Starting State

    如果我们的问题是应用程序正在使用这个初始化页面:

    http://domain/app/
    

    但不是没有斜杠

    http://domain/app
    

    我们必须在服务器上做一些重定向。 (需要重定向以使所有相对路径正常工作)有一些如何使用 asp.net mvc

    Browser address will not be displayed correctly in ui-route

    【讨论】:

    • 它可以在你的小提琴中工作,但不能在我的代码中......我已经将控制器添加到带有调试消息的状态“用户”:console.log('yo'),但它没有得到在浏览器中加载此页面时显示在控制台中。我试图打破你的笨蛋,谢谢:)
    • 好的,你有更多信息吗?我建议,尝试“打破我的 plunker”,如果你愿意,我可以提供帮助......
    • 这是你的“坏掉的”plunker:run.plnkr.co/nCVUSkQgKoF5iGHC#/users 在你向 URL 添加反斜杠之前,不会触发状态:run.plnkr.co/nCVUSkQgKoF5iGHC/#/users 添加这个反斜杠是强制性的吗?
    • 这里是预览:plnkr.co/edit/rRI7WQxwWmAYZh9iL3Ea?p=preview 在预览中,您的代码可以工作,因为您在页面加载后更改了状态。尝试在单独的窗口中启动预览,然后更改 URL 以在末尾删除反斜杠(如我之前的示例中所示),您将看到它不起作用...
    • 我现在明白了,你真正的问题是什么。这是正确的 server 配置你的问题是什么。也许检查这个gist.github.com/frankgeerlings/1711560 以获取.NET MVC 的示例。简而言之 - 您必须强制(在服务器上)浏览器使用斜杠重定向到应用程序。这是必须的。这就是 plunker(您的应用程序)的工作方式(几乎任何具有虚拟应用程序的 Web 服务器。没有一些服务器重定向(没有斜线到斜线),角度应用程序无法正确访问相对路径(它在需要时搜索 xxxxxxxscript.js xxxxx/script.js) 有意义吗?
    猜你喜欢
    • 2013-10-17
    • 1970-01-01
    • 1970-01-01
    • 2014-09-11
    • 2021-08-04
    • 1970-01-01
    • 1970-01-01
    • 2018-04-20
    • 2019-07-17
    相关资源
    最近更新 更多