角UI路由器嵌套国家决心儿童州 [英] Angular UI Router Nested State resolve in child states

问题描述

在一个角应用我的工作，我想那里是必须解决某些依赖它的所有孩子们的状态的抽象父状态。具体来说，我想需要身份验证的用户继承某些authroot状态依赖的所有状态。

我运行到具有父依赖并不总是被重新解决的问题。理想情况下，我想有父状态的检查，用户仍自动登录所有子状态。在<一个href=\"https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-resolved-dependencies\">docs,它说：

  

儿童州将继承从解决父状态（S），它们可以覆盖相关性。

我发现，父母的依赖性只被重新解析，如果我从父外部的状态进入任何一个孩子的状态，但如果兄弟国家之间转移。

在本实施例中，如果状态authroot.testA和authroot.testB之间移动，所述的getUser方法只调用一次。当你移动到等状态和背部，它会被再次运行。

我能够把每个子状态的用户的依赖性，以确保该方法被称为每次进入其中任何时间，但似乎打败继承依赖的目的。

我是否理解正确的文档？有没有办法迫使父状态重新解析其依赖性，即使兄弟姐妹之间的状态变化？

的jsfiddle

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js\"></script>
＆LT;脚本＆GT;
（函数（NG）{
    VAR应用= ng.module（测试，[ui.router]）;
    的app.config（[$ stateProvider，$ urlRouterProvider功能（SP，URP）{
        urp.otherwise（/种皮）;
        sp.state（authroot，{
            摘要：真实，
            网址：
            模板：＆LT;格UI的视图＆gt;＆LT; / DIV＆gt;中，
            解析：【用户：[UserService功能（UserService）{
                        的console.log（解决依赖...）;
                        返回UserService.GetUser（）;
                    }]}
        }）;
        sp.state（authroot.testA，{
            网址：/种皮
            模板：＆LT; H1＆GT;试验A {{用户| JSON}}＆LT; / H1＆gt;中，
            控制器：TestCtrl
        }）;
        sp.state（authroot.testB，{
            网址：/ TESTB
            模板：＆LT; H1＆GT;试验B {{用户| JSON}}＆LT; / H1＆gt;中，
            控制器：TestCtrl
        }）;
        sp.state（其他，{
            网址：/等，
            模板：＆LT; H1＆gt;其他＆LT; / H1＆gt;中，
        }）;
    }]）;
    app.controller（TestCtrl，[$范围，用户功能（$范围，用户）{$ scope.User =用户;}]）;
    app.factory（UserService，[$ Q，$超时功能（$ Q $超时）{
        起作用的getUser（）{
            的console.log（从服务器获取用户信息...）;
            变种D = $ q.defer（）;
            $超时（函数（）{
                的console.log（得到用户信息。）;
                d.resolve（{用户名：JohnDoe1，OtherData：ASDF}）;
            }，500）;
            返回d.promise;
        };
        返回{
            的getUser：的getUser
        };
    }]）;
}）（window.angular）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=测试＆GT;
    ＆LT;一个UI的SREF =authroot.testA＆GT;转到A＆LT; / A＆GT;
    ＆LT;一个UI的SREF =authroot.testB＆GT;转到B＆LT; / A＆GT;
    ＆LT;一个UI的SREF =其他＆GT;转到其他＆LT; / A＆GT;
    ＆LT;格UI的视图＆gt;载入中...＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
 

解决方案

我找到的 UI路由器的方式的例外，就是在你刚刚描述的行为。

让我们想想一些实体，例如联系。因此，这将是不错的右侧向我们展示联系人，左侧部分细节的清单。请检查使用的UI路由器的基础知识AngularJS 了解有关布局快速overvie。一个举：

  

UI路由器全面采用路由系统的状态机的性质。
  它允许你定义状态，和过渡您的应用程序
  这些国家。真正的胜利是，它可以让你嵌套脱钩
  状态，并做一些非常复杂的布局，以一种优雅的方式。

  
  

您需要考虑您的不同路由一点，但一旦你
  绕过基于状态的方法你的头，我想你会喜欢
  吧。

好了，为什么呢？

由于我们可以有一个状态联系重新presenting列表。从详细信息的角度说，一个固定的列表即可。的（跳跃列表分页过滤现在）的我们可以在列表中点击并获得移动到一个状态 Contact.Detail（ID），看到的只是选择项目。然后选择其他联系人/项目。

在这里嵌套国家的优势是：

  

在列表（州联系）的不可以重新加载。而孩子的状态 Contact.Detail 是

这应该解释为什么怪异的行为应该正确对待。

要回答你的问题，如何处理用户状态。我会用一个路由状态的一些非常顶级的兄弟姐妹，其分离视图和控制器以及一些生命周期以防万一......引发了一些周期

In an angular app I'm working on, I'd like there to be an abstract parent state which must resolve certain dependencies for all of its children's states. Specifically, I'd like all states requiring an authenticated user to inherit that dependency from some authroot state.

I'm running into issues having the parent dependency not always being re-resolved. Ideally, I'd like to have the parent state check that the user is still logged in for any child state automatically. In the docs, it says

Child states will inherit resolved dependencies from parent state(s), which they can overwrite.

I'm finding that the parent dependency is only being re-resolved if I enter any child state from a state outside the parent, but not if moving between sibling states.

In this example, if you move between states authroot.testA and authroot.testB, the GetUser method is only called once. When you move to the other state and back, it will get run again.

I am able to put the User dependency on each of the child states to ensure the method is called every time you enter any of those states, but that seems to defeat the purpose of the inherited dependency.

Am I understanding the docs incorrectly? Is there a way to force the parent state to re-resolve its dependencies even when the state changes between siblings?

jsfiddle

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.min.js"></script>
<script>
(function(ng) {
    var app = ng.module("Test", ["ui.router"]);
    app.config(["$stateProvider", "$urlRouterProvider", function(sp, urp) {
        urp.otherwise("/testA");
        sp.state("authroot", {
            abstract: true, 
            url: "",
            template: "<div ui-view></div>", 
            resolve: {User: ["UserService", function(UserService) {
                        console.log("Resolving dependency...");
                        return UserService.GetUser();
                    }]}
        });
        sp.state("authroot.testA", {
            url: "/testA", 
            template: "<h1>Test A {{User|json}}</h1>", 
            controller: "TestCtrl"
        });
        sp.state("authroot.testB", {
            url: "/testB", 
            template: "<h1>Test B {{User|json}}</h1>", 
            controller: "TestCtrl"
        });
        sp.state("other", {
            url: "/other", 
            template: "<h1>Other</h1>", 
        });
    }]);
    app.controller("TestCtrl", ["$scope", "User", function($scope, User) {$scope.User = User;}]);
    app.factory("UserService", ["$q", "$timeout", function($q, $timeout) {
        function GetUser() {
            console.log("Getting User information from server...");
            var d = $q.defer();
            $timeout(function(){
                console.log("Got User info.");
                d.resolve({UserName:"JohnDoe1", OtherData: "asdf"});
            }, 500);
            return d.promise;
        };
        return {
            GetUser: GetUser
        };
    }]);
})(window.angular);
</script>
</head>
<body ng-app="Test">
    <a ui-sref="authroot.testA">Goto A</a>
    <a ui-sref="authroot.testB">Goto B</a>
    <a ui-sref="other">Goto Other</a>
    <div ui-view>Loading...</div>
</body>
</html>

解决方案

The way I find the ui-router exceptional, is in the behaviour you've just described.

Let's think about some entity, e.g. Contact. So it would be nice to have a right side showing us the list of Contacts, the left part the detail. Please check the The basics of using ui-router with AngularJS for quick overvie about the layout. A cite:

ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.

You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it.

Ok, why that all?

Because we can have a state Contact representing a List. Say a fixed list from perspective of the detail. (Skip list paging filtering now) We can click on the list and get moved to a state Contact.Detail(ID), to see just selected item. And then select another contact/item.

Here the advantage of nested states comes:

The List (the state Contact) is not reloaded. While the child state Contact.Detail is.

That should explain why the "weird" behaviour should be treated as correct.

To answer your question, how to handle user state. I would use some very top sibling of a route state, with its separated view and controller and some lifecycle arround... triggered in some cycles

这篇关于角UI路由器嵌套国家决心儿童州的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！