角UI-路由器$ urlRouterProvider。当不工作* *了

本文介绍了角UI-路由器$ urlRouterProvider。当不工作* *了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问：的为什么不会在。当（）在我的 $ urlRouterProvider 工作了？

我拿起一个相当强劲的角度应用程序。我一直在试图用它来修复最近问题一直发出'失去了页面刷新用户证书。

I've picked up a fairly robust angular app. The most recent issue I've been trying to fix with it has been the 'user credentials lost on page refresh' issue.

该项目的身份验证服务没有多大意义，当我把它捡起来，并围绕挖掘后，我才知道这是从code的一些随机的页面放在一起。它也没有完全工作，所以我看着不同来源，并决定全面实现其中之一（）

The project's auth service didn't make much sense when I picked it up and after digging around I learned it was put together from a few random pages of code. It also wasn't working completely, so I looked into the different sources and decided to fully implement one of them (angular-client-side-auth)

现在，auth服务/控制器我实现了基本相同，什么是在的角客户端-auth的的，但是该网站我正在使用基于令牌的认证。令牌功能是bascially已经到位，所以我没有任何麻烦它的工作。

Now, the auth service/controller I've implemented are basically the same as what's in angular-client-side-auth, however the site I'm working uses token based authentication. The token functionality was bascially in place already, so I didn't have any trouble getting it to work.

在这一点上，我已经得到了用户登录停留在刷新，路由和他们的身份验证一起工作（是pviously使用笨重code禁用视图中的元素$ P $）然而，现在 $ urlRouterProvider。当（）是坏了。他们的工作完全没有问题之前，所以我知道这是我所做的就是错！ - 但我不能简单地撤销我已经实现

At this point, I've got the user staying logged in on refresh, routes are working along with their authentication (was previously using bulky code to disable elements in view) However, now the $urlRouterProvider .when()s are broken. They were working perfectly fine before, so I know something I've done is to fault - but I can't simply undo what I've implemented!

因此，这是$ urlRouterProvider code我使用。值得一提的是，我已经包含/所需的。当（），而似乎没有使用它们。我希望他们能一直与code语言实现的，但是也许有东西在里面的空洞。当的功能（）？我并不这么认为。不妨也澄清，我没有使用 .rule 或 $ httpProvider.interceptors 有两种呢。我一直在使用这些实现的网站试过，但他们似乎并没有发挥作用。

So this is $urlRouterProvider code I'm using. Worth mentioning is that I've included/required the .when(), whereas angular-client-side-auth doesn't seem to use them. I expected they could have been implemented with that code, however maybe there is something in it that voids the functionality of .when()? I didn't think so. Might as well also clarify that I'm not using the .rule or $httpProvider.interceptors there either yet. I've tried using the site with these implemented, but they didn't seem to make a difference.

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

所以基本上，如果用户或站点将用户指向 / myState /组，他们实际上应该在网址为国家程序结束。 myState.group.id 吧？他们不这样做，虽然，我想不通为什么。没有多少有使用urlRouterProvider有关的问题。

So basically, if the user or site directs the user to /myState/group, they should actually end up at url for state app.myState.group.id right? They don't though, and I can't figure out why. There isn't much out there regarding issues using urlRouterProvider.

什么的不的发生呢？那么对于 / myState /组加载视图的罚款，并在其中的＆LT; UI的视图＆gt; 是一个生成的列表在的id 的。您可以点击一个ID，这就要求这台ID的功能，然后执行 $ state.go（'app.myState.group.id'，{ID：group.id，STD：$范围.std1}）; 那当然状态取代了生成列表，用户点击

What does happen? Well the view for /myState/group loads fine, and within it's <ui-view> is a generated list of the id's. You can click on an ID, which calls a function which sets the ID and then performs $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); That state of course replaces the 'generated list' that the user clicked.

现在，为 .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的

＆LT;李纳克级={活跃：$ state.includes（'app.myState'）}＆GT; ＆LT;一个UI的SREF =app.myState.group＆gt;我的国家和LT; / A＆GT; ＆LT; /李＆GT;

不知怎的，我觉得有一个更好的方式来组织这一点。从我所知道的， app.myState.group 从未真正需要的本身的，它只是一个嵌套的一部分。

Somehow I feel like there's a better way to structure this. From what I can tell, the app.myState.group is never actually needed by itself, it's simply part of the nesting.

我试图简单地改变 UI-SREF 到 =app.myState.group.id。如果没有工作，我也改变了 $ state.includes（'app.myState'）} 到 $ state.includes（'app.myState 。集团'）} 。不。这是可行的？我知道我必须通过ID在某种程度上，但它并不甚至似乎指导。

I've attempted to simply change the ui-sref to ="app.myState.group.id". When that didn't work I also changed $state.includes('app.myState')} to $state.includes('app.myState.group')}. Nope. Is this viable? I know I'd have to pass the ID in somehow, but it doesn't even seem to be directing.

在理想情况下，我想限制不必要的状态（和控制器..和一切）的数量。由于用户是假设当他们点击链接直接进入 / myState /组/ ID ，我觉得应该只是发生。这不链接到另一个状态，然后重定向！

Ideally, I'd like to limit the amount of unnecessary states (and controllers.. and everything). Since the user is suppose to be taken directly to /myState/group/id when they click the link, I feel like that should just happen. Not this linking to another state and then a redirect!

不过，我更关心仅仅让这个在目前的工作，我可以不用担心清洗后的事情了。

That said, I care more about simply getting this to work at the moment, and I can worry about cleaning things up later.

修改

所以，当我在写这个问题我得到的事情尝试一些更多的想法。他们中的一个实际工作！

So while I was writing the question I was getting some more ideas of things to try. One of them actually worked!

.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停止工作！

I like it, though I still wonder if there are other ways of doing this. I'm also still curious why the $urlRouterProvider stopped working!

推荐答案

编辑：0.2.13版本 - 重大更改

version 0.2.13 - breaking change

最初的职位是与UI-路由器0.2.12-工作。在0.2.13修复程序禁用此解决方案。请在这里遵循的解决方法：

The original post was working with the UI-Router 0.2.12-. A fix in 0.2.13 disables this solution. Please follow the workaround here:

原文：

有一个问题，我发现，造成类似的问题。有

There is one issue, I found, causing similar issue. There is a working example with full code

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

Firstly, let's have two functions to configure

$ urlRouterProvider 和

$ stateProvider

$urlRouterProvider and
$stateProvider

这些defintions的片段：

The snippet of these defintions:

// 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',
        ...
}];

到这一点，报告的行为将hapen如果我们会打电话给他们这样的：

Having this, the reported behaviour will hapen if we will call them like this:

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

以上调用将无法工作。被访问列表时的时候不会触发详细状态。

The above call will not work. When will not trigger the detail state when list is visited.

但是，这将如预期：

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

请在这里。看到 app.js 文件...

Check it here. See the app.js file...

摘要：我们根本必须先配置 $ urlRouterProvider 。只有这样，我们就可以开始通过 $ stateProvider 填写我们的状态。这种做法将导致预期的行为。

SUMMARY: We simply have to firstly configure the $urlRouterProvider. Only then we can start to fill in our states via $stateProvider. This approach will lead to expected behaviour.

这篇关于角UI-路由器$ urlRouterProvider。当不工作* *了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！