Angular UI-Router $ urlRouterProvider。不工作时*不再*

Question

问： 为什么不能在.when()我的$urlRouterProvider工作了吗？

我选择了一个相当强大的角度应用程序。我一直试图解决的最新问题是“页面刷新时丢失的用户凭据”问题。

当我拿起项目的auth服务时，并没有多大意义，在深入研究后，我发现它是从几页随机代码中组合而成的。它也不能完全正常工作，因此我研究了不同的来源，并决定完全实现其中之一（angular-client-side-auth）

现在，我实现的身份验证服务/控制器与 angular-client-side-auth
基本上相同，但是我正在工作的站点使用基于令牌的身份验证。令牌功能基本上已经就位，因此我可以轻松使用它。

在这一点上，我已经使用户保持刷新状态登录，路由正在与它们的身份验证一起使用（以前使用大容量代码来禁用视图中的元素），但是现在$urlRouterProvider .when()s已损坏。他们以前工作得非常好，所以我知道我做过的事情就是要犯错-但我不能简单地撤消已实现的事情！

这是我正在使用的$ urlRouterProvider代码。值得一提的是，我已经包含/需要了.when()，而angular-client-side-auth似乎并没有使用它们。我希望它们可以用该代码实现，但是可能其中有些东西使.when()？的功能无效。我不这么认为。可能还需要澄清，我还没有使用.rule或$httpProvider.interceptors。我尝试使用已实现这些功能的网站，但它们似乎没有什么不同。

$urlRouterProvider
   .when('/myState/group', ['$state', 'myService', function ($state, myService) {
            $state.go('app.myState.group.id', {id: myService.Params.id});
   }])
   .otherwise('/');

因此，基本上，如果用户或站点将用户定向到/myState/group，则他们实际上应该以状态app.myState.group.id正确的URL结尾？他们没有，但我不知道为什么。关于使用urlRouterProvider的问题并没有太多。

什么 没有 发生？好了，/myState/group加载视图很好，并且在其中<ui-view>是生成的列表id。您可以单击一个ID，该ID会调用一个函数，该函数设置ID然后执行$state.go('app.myState.group.id',{id: group.id, std: $scope.std1}); 。当然，该状态将替换用户单击的“生成列表”。

现在，对于.state()…

.state('app.myState', {
            abstract: true,
            url: '/myState',
            templateUrl: 'views/myState.html',
            data: {
                access: access.user
            },
            controller: 'MyCtrl',
            resolve: {
                // bunch of stuff here, I'll include it if it's relevant                    
            },
            redirectMap: {
                '409': 'app.error'
            }
        })
        .state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            }
        })
        .state('app.myState.group.id', {
            url: '/:id',
            templateUrl: 'views/myState.group.id.html',
            data: {
                access: access.user
            },
            resolve: {
                '': function (myService) {
                    myService.stuff.get(false, false, 7, 0).then(function (data) {
                    });
                }
            },
            controller: 'MygroupidCtrl'
        })

最后， index.html

<li ng-class="{active: $state.includes('app.myState')}"> <a ui-sref="app.myState.group">My State</a> </li>

不知何故，我觉得有一种更好的方法来构造它。据我所知，app.myState.group实际上并不需要 它 ，它只是嵌套的一部分。

我试图将更ui-sref改为="app.myState.group.id"。如果那没用，我也改成$state.includes('app.myState')}了$state.includes('app.myState.group')}。不。这可行吗？我知道我必须以某种方式传递ID，但似乎并没有指示。

理想情况下，我想限制不必要状态的数量（以及控制器..以及所有内容）。由于用户应该/myState/group/id在单击链接时直接被带到，因此我认为那应该发生。这不是链接到另一个状态，然后重定向！

就是说，我更关心现在只是使它工作，而以后我会担心清理。

编辑

因此，当我写问题时，我对尝试的事情有了更多的想法。其中之一实际有效！

.state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            },
            onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
                $timeout(function () {
                     $state.go('app.myState.group.id', {id: myService.Params.id})
                }, 1000);
            }]

我喜欢它，尽管我仍然想知道是否还有其他方法可以做到这一点。我也很好奇为什么$ urlRouterProvider停止工作！

Answer 1

编辑：版本0.2.13-重大更改

原始帖子正在使用UI-Router 0.2.12-。0.2.13中的修复程序禁用了此解决方案。请在此处遵循解决方法：

Angular UI-Router $ urlRouterProvider。当我单击时不起作用

原版的：

我发现有一个问题，引起了类似的问题。有一个带有完整代码的有效示例

首先，让我们有两个功能来配置

• $urlRouterProvider 和
• $stateProvider

这些定义的摘要：

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

有了这个，如果我们这样称呼他们，举报的行为就会停顿：

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig)

上面的调用将不起作用。访问列表时，何时将不会触发详细信息状态。

但这将按预期工作：

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

在这里检查。查看 app.js文件…

简介：我们只需要首先配置$urlRouterProvider。只有这样我们才能开始通过填写我们的州$stateProvider。这种方法将导致预期的行为。