由网友(柠檬不萌/香蕉不娇)分享简介：这是我的主要的应用程序（app.js） （功能（NG，模块）{    module.config（['$ stateProvider'，'$ urlRouterProvider'，函数（$ stateProvider，$ urlRouterProvider）{        $ urlRouterProvider.ot...

这是我的主要的应用程序（app.js）

 （功能（NG，模块）{    module.config（['$ stateProvider'，'$ urlRouterProvider'，函数（$ stateProvider，$ urlRouterProvider）{        $ urlRouterProvider.otherwise（应用程序）;        $ stateProvider.state（'登陆'，{            网址：'登录'，            templateUrl：/assets/templates/pages/login.html        }）。状态（'根'，{            网址：''，            templateUrl：/assets/templates/pages/index.html        }）;    }]）;}）（角，angular.module（'MyApp的'，['ui.router'，'myapp.submodule']））; 

这是子模块（submodule.js）

 （功能（NG，模块）{    module.config（['$ stateProvider'，函数（$ stateProvider）{        $ stateProvider.state（'root.substate'，{            网址：'TODO / {类型}'，            templateUrl：/assets/app/todo/todo.html'，            控制器：函数（$ stateParams，$范围）{                //做的东西。            }        }）;    }]）;}）（角，angular.module（'myapp.submodule'，['ui.router']））; 

预期的行为将是

重定向到没有任何匹配的路由发现应用程序网址激活根URL根状态激活/ TODO URL中的root.substate状态

这是工作的罚款。

但是，如果我做刷新页面，状态没有被激活，我送回到应用程序。为什么呢？

解决方案

我们有两个的根的状态的（无父）的状态。这些应该是有否 URL，或者它应该用一些独特的标志开始的 - 最好的选择将始终与（URI规范）是一个 /

  //域/应用/登录 - 很容易找到.STATE（'登陆'，{    网址：'登录'，    ...}）//没有高清===域/应用.STATE（'根'，{    网址：''，    ...}）; 

现在，让我们使用一些网​​址甚至我们的'根'状态：

  //域/应用/.STATE（'根'，{    网址：'/'，    ...}）; 

这是男人的，那我们的孩子root.substate也将包含父网​​址部分。因此，如果我们将利用这个

  //这是一个孩子，它的URL将是一个事实：网域/应用// TODO / sometype。这时候.STATE（'root.substate'，{    网址：'/ TODO / {类型}'，    ...}）; 

瞧，这样一来，我们的URL将现在的孩子包含//（双斜线）

要避免这种情况，我们可以使用UI的路由器功能'^'

  //这个统计将不使用父零件//这将工作域/应用/ TODO / sometype。这时候.STATE（'root.substate'，{    网址：'^ / TODO / {类型}'，    ...}）; 

检查DOC：

绝对路线（^）  

如果您想拥有绝对的URL匹配，那么你就需要preFIX你的URL字符串用特殊符号'^'。

  $ stateProvider  .STATE（'联系人'，{     网址：'/联系人'，     ...  }）  .STATE（'contacts.list'，{     网址：'^ /名单，     ...  }）; 

This is my main app (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']));

This is the 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']));

The expected behaviour would be

redirect to "app" url when no matching route is found activate the "root" state on root url activate the "root.substate" state on /todo url

This is working fine.

However, if i do refresh the page, the state is not activated and i'm sent back to "app". Why?

解决方案

We have two root states (no parent) states. These should be either having no url, or it should start with some unique sign - the best choice would always with (URI spec) be a /:

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

Now, let's use some url even for our 'root' state :

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

That mans, that our child 'root.substate' will also contain the parent url part. So if we would use this

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

See, that this way, our url will now for child contain // (double slash)

To avoid that, we can use UI-Router feature '^'

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

Check the doc:

Absolute Routes (^)

If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.

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