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

Question

这是我的主要应用程序(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上的"root"状态
• 激活/ todo url上的"root.substate"状态

这工作正常.

但是,如果我刷新页面,状态不会被激活,我会被发送回"app".为什么？

Answer 1

我们有两个根状态(没有父状态).这些应该是没有 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}',
    ...
});

检查文档:

绝对路线(^)

如果您想要绝对URL匹配,那么您需要在url字符串前面加上特殊符号'^'.

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