Angular JS - UI 路由器页面重新加载不会设置状态答案

【问题标题】：Angular JS - UI router page reload won't set the stateAngular JS - UI 路由器页面重新加载不会设置状态
【发布时间】：2015-02-06 13:31:55
【问题描述】：

这是我的主应用 (app.js)

(function(ng, module) {
    module.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise("app");

        $stateProvider.state('login', {
            url: 'login',
            templateUrl: '/assets/templates/pages/login.html'
        }).state('root', {
            url: '',
            templateUrl: '/assets/templates/pages/index.html'
        });


    }]);
}) (angular, angular.module('myapp', ['ui.router', 'myapp.submodule']));

这是子模块（submodule.js）

(function(ng, module) {
    module.config(['$stateProvider', function($stateProvider){
        $stateProvider.state('root.substate', {
            url: 'todo/{type}',
            templateUrl: '/assets/app/todo/todo.html',
            controller: function($stateParams, $scope) {
                // Do stuff.
            }
        });
    }]);

}) (angular, angular.module('myapp.submodule', ['ui.router']));

预期的行为是

找不到匹配路由时重定向到“app”url
在根 url 上激活“根”状态
在 /todo url 上激活“root.substate”状态

这工作正常。

但是，如果我确实刷新了页面，则状态不会被激活，我会被发送回“app”。为什么？

【问题讨论】：

也许不是真正的问题，但我肯定以/-url: '/todo/{type}'开始任何网址
我还在测试，但似乎开头的斜线可能是问题所在。
你知道为什么吗？简单地说，必须有某种方法可以清楚地定义状态 url 从哪里开始。你的 url 映射说：domain/applogin 实际上......我建议：domain/app/login。所以没有斜线......引擎的大问题，如果你知道我的意思
嗯，我还是很困惑。登录和根状态的前导斜线修复它们。嵌套的 root.substate 状态工作正常没有前导斜线，并且前导斜杠有问题。 Buggy = 刷新导致未解决的路线。编辑：Buggy = url 它呈现为 foo.bar/#//todo （双斜杠）。我想我错过了一些关于 url 生成的东西
将尝试向您展示如何回答......给我秒

标签： javascript angularjs angular-ui-router

【解决方案1】：

我们有两个 root 状态（无父） 状态。这些应该有 no url，或者应该以一些独特的符号开头 - 最好的选择总是（URI 规范）是 /：

// domain/app/login - easy to find
.state('login', {
    url: 'login',
    ...
})
// no def === domain/app
.state('root', {
    url: '',
    ...
});

现在，让我们使用一些url，即使是我们的'root' 状态：

// domain/app/
.state('root', {
    url: '/',
    ...
});

那个男人，我们的孩子'root.substate'也将包含父母url部分。所以如果我们使用这个

// this is a child and its url will be in fact: domain/app//todo/sometype
.state('root.substate', {
    url: '/todo/{type}',
    ...
});

看，这样子，我们的 url 现在将包含 //（双斜杠）

为避免这种情况，我们可以使用 UI-Router 功能 '^'

// this stat will not use the parent part
// this will work domain/app/todo/sometype
.state('root.substate', {
    url: '^/todo/{type}',
    ...
});

查看文档：

Absolute Routes (^)

如果你想进行绝对 url 匹配，那么你需要在你的 url 字符串前面加上一个特殊符号 '^'。

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

【讨论】：

谢谢，这就是我要找的答案
如果有帮助的话就太好了。享受强大的 UI-Router ;)
我尝试了这个解决方案并且它有效。但是我仍然无法刷新通向默认路由的页面（$otherwise）

【解决方案2】：

我知道还有很多时间。但是关于刷新的问题。如果您想保持与刷新之前相同的 url 地址，您应该添加下一个：

angular.module('app').run(['$state', '$stateParams', function($state, $stateParams) {
   //this solves page refresh and getting back to state
}]);

就像上次回答中提到的here

【讨论】：