search

angular-ui / ui-router

The de-facto solution to flexible routing with nested views in AngularJS
http://ui-router.github.io/
MIT License
13.54k stars 3k forks source link

UI Router transition superseded when traversing multi-views state-tree #3568

Closed zipper01 closed 6 years ago

zipper01 commented 6 years ago

General Query

Please see the demo at stackoverflow.

Plunker is HERE

I'm trying to manage my admin page by bellow states with multi views: admin, admin.header, admin.leftPanel, admin.main, admin.tail. In the header, leftPanel, main and tail, I use $state.go to their sub states respectively to render their contents. But transition is superseded when traversing multi-views state-tree.

christopherthielen commented 6 years ago

It looks like you've done your research and answered your own stackoverflow question. In a state machine only one state can be active at a time. In ui-router, states can have nested state. However, sibling states are mutually exclusive and you cannot activate more than one at the same time. (I'm not sure where it is documented that they can be? Please provide a link to the documentation where it implies this)

You can make a hierarchy of nested states. Each nested state can have its own component/view which is plugged into the parent component/view. The resolve system lets you define data that is fetched when each state is being activated. The router waits for the resolve to fetch before activating the state. You can activate a deep nested state directly and all its parent states will be activated.

See the sample app for an example of this in action:
https://github.com/ui-router/sample-app-angularjs/blob/17bf4d3bcd2ce338811ffebf1668227219ae2b68/app/mymessages/mymessages.states.js#L29-L72

Here's a direct link to a live demo: http://ui-router.github.io/sample-app-angularjs/#!/mymessages/inbox/5648b50d53d409813b614322

zipper01 commented 6 years ago

Hi Chris,

Thank you for the email and sorry for the late response. Recently I am no longer using UI-Router but I encountered some issues and made me recalled the experience.

For me the only reason to use Angular(JS) is to write the data-driven web clients; and it is a natural to use the ideas of devide-and-conquer and recursion in data-driven program design.

However Angular(JS) does not support these ideas very well. In AngularJS 1.5+ I can use components but it is difficult to generate components (for example a components-tree) programming and I'm forced to do recursion in the data models and templates (use the idea at http://jsfiddle.net/brendanowen/uXbn6/8/)http://jsfiddle.net/brendanowen/uXbn6/8/ seperately. This made the programming complex. For example when createRecord/UpdateRecord I need the UI operation of prompting modal for a selected table in a tree of tables, this is easy to do in a controller specific for the target table; but hard to do the injections in the data model. In conclusion, it is hard to manage the mapping between the data models and the UI-templates in a single controller, the concept of component does not really help much other than a syntax sugar since it cannot support the idea of devide-and-conquer to really break big task into smaller self-contend pieces dynamically, the situation conflicts with the basic idea under the design of itself (a reason behind this can be the components are actually heavier than I thought and the creation and maintenance are not cheap).

I'd thought the UI-Router can be a solution because in the thread https://stackoverflow.com/questions/25866387/angular-ui-router-programmatically-add-states you provided a easy way to create states programmatically. But the idea of fixed life-cycle and the exit from siblings made it not so attractive.

I'm in the telecom software industry for more than 10 years so I understand the state-machine -- it is a basic concept for real-time auto-control systems. But it may not always be good to simply model all GUI systems using into state machines. State machines is for one-dimensional / liner controls, but GUIs are two dimensional. I saw you made some workarounds for some specific scenarios (for example sticky-state for in-page tabs), but not general.

I made some suggestions in the self-answer of the thread https://stackoverflow.com/questions/47579158/ui-router-transition-superseded-when-traversing-multi-views-state-tree and I think those covers some useful use cases.

My basic understand is that when creating a tool for others to use, it is not a so good idea to force the users to use in only some specific way; instead, it should support people to use in the most extreme way.

Still, the UI-Router is a sophisticate software and there are brilliant ideas in it; and I appreciate the efforts you put into it. So I share my idea on it (it can be improper as I'm a very new to the web-dev) and hope the software keeps grow.

Regards,

ZG

发件人: Chris Thielen notifications@github.com 发送时间: 2017年12月21日 10:48 收件人: angular-ui/ui-router 抄送: zipper01; Author 主题: Re: [angular-ui/ui-router] UI Router transition superseded when traversing multi-views state-tree (#3568)

It looks like you've done your research and answered your own stackoverflow question. In a state machine only one state can be active at a time. In ui-router, states can have nested state. However, sibling states are mutually exclusive and you cannot activate more than one at the same time. (I'm not sure where it is documented that they can be? Please provide a link to the documentation where it implies this)

You can make a hierarchy of nested states. Each nested state can have its own component/view which is plugged into the parent component/view. The resolve system lets you define data that is fetched when each state is being activated. The router waits for the resolve to fetch before activating the state. You can activate a deep nested state directly and all its parent states will be activated.

See the sample app for an example of this in action: https://github.com/ui-router/sample-app-angularjs/blob/17bf4d3bcd2ce338811ffebf1668227219ae2b68/app/mymessages/mymessages.states.js#L29-L72

[https://avatars3.githubusercontent.com/u/16856735?s=400&v=4]https://github.com/ui-router/sample-app-angularjs/blob/17bf4d3bcd2ce338811ffebf1668227219ae2b68/app/mymessages/mymessages.states.js#L29-L72

ui-router/sample-app-angularjshttps://github.com/ui-router/sample-app-angularjs/blob/17bf4d3bcd2ce338811ffebf1668227219ae2b68/app/mymessages/mymessages.states.js#L29-L72 github.com sample-app-angularjs - UI-Router for AngularJS - Sample Application

Here's a direct link to a live demo: http://ui-router.github.io/sample-app-angularjs/#!/mymessages/inbox/5648b50d53d409813b614322

― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/angular-ui/ui-router/issues/3568#issuecomment-353243604, or mute the threadhttps://github.com/notifications/unsubscribe-auth/Ad3IjJfvCgD-9cyH2v2sP_FChQBVF54Iks5tCcb6gaJpZM4Qx7yX.