角度ui-路由器最佳实践继承vs元数据

I am converting my application from ngRoute to uiRouter. I have read and watched a lot of tutorials but I am still lacking the experience to decide on best practices.

我正在将我的申请从ngRoute转换为uiRouter。我已经阅读和观看了很多教程，但是我仍然缺乏经验来决定最佳实践。

First of all a major change I have done is break the state declaration to each module/controller. This feels more natural and cleaner to me but introduces some complexity when wanting to apply a global rule to many states. For example half my routes require authentication and the other half do not. With ngRoute I had a data attribute denoting the auth level required in each route. With uiRouter I understand there is this way of doing it and there is the state inheritance way. So a route could be public.myRoute where public is an abstract route declared at the application level. This creates the issue though of the module not being able to work standalone if someone does not define the public state. In contrast if I add a metadata attribute in the data object, like "auth_level: user" this would not affect the module if no one is dealing with it. But this feels more "magic" and less maintainable.

首先，我所做的一个主要更改是将状态声明断开到每个模块/控制器。在我看来，这更自然、更干净，但在想要将一个全局规则应用到许多状态时，会带来一些复杂性。例如，我的一半路由需要身份验证，另一半不需要身份验证。在ngRoute中，我有一个数据属性，表示每个路由所需的第auth级别。有了uiRouter，我知道有这样做的方式，还有国家继承方式。所以一条路线可以是公共的。在myRoute中，public是在应用程序级别声明的抽象路由。这就产生了一个问题，即如果某人不定义公共状态，那么模块就不能独立工作。与此相反，如果我在数据对象中添加一个元数据属性，比如“auth_level: user”，那么如果没有人处理它，这不会影响模块。但这感觉更“神奇”，更不易维护。

The same issue arises with the navigation bar. Half my views have a navigation bar and the other half don't. Until now I used a isNavbarVisible boolean attribute but I understand this should be part of the state? Maybe a second ui-view in the layout.html template instead of using ng-include with ng-if as I did so far?

同样的问题也出现在导航条上。我的一半视图有导航栏，另一半没有。到目前为止，我使用了isNavbarVisible boolean属性，但我明白这应该是状态的一部分?也许是布局中的第二个ui视图。html模板，而不是使用ng- - - - - - -如我目前所做的?

Finally, I am wondering about the best practice in requiring a promise in every route to be resolved. For example, no matter where the application entry point is, the user rights should be resolved first before loading the view. In ngRoute I was looping through all the routes in their definition and adding that promise.

最后，我想知道在每条道路上都需要一个承诺的最佳实践。例如，无论应用程序入口点在哪里，在加载视图之前都应该首先解析用户权限。在ngRoute中，我遍历了定义中的所有路径并添加了这个承诺。

Is there a good guide for best practices when migrating from ngRoute to uiRouter, because other than generic recommendation like "replace ng-include" with a name ui-view or that state inheritance should be preferred, I haven't found any concrete implementations demonstrating that.

在从ngRoute迁移到uiRouter时，是否有很好的最佳实践指南，因为除了使用名称ui-view或状态继承作为“替换ng-include”之类的通用推荐之外，我没有找到任何具体的实现来说明这一点。

2 个解决方案

#1

I am in the same situation than the question author, Here's some very interesting information about how to drive this change. https://github.com/angular-ui/AngularJS-StyleGuide

我的处境与问题作者相同，这里有一些关于如何推动这种变化的非常有趣的信息。https://github.com/angular-ui/AngularJS-StyleGuide

#2

ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions.

ui-router是一个第三方模块，非常强大。它支持正常的ngRoute所能做的一切以及许多额外的功能。

Here are some common reason ui-router is chosen over ngRoute
ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections.

这里有一些常见的原因ui-router是选择ngRoute ui-router的，它允许嵌套视图和多个命名视图。这对于更大的应用程序非常有用，您可能有从其他部分继承的页面。

ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.

ui-router允许基于状态名在状态之间具有强类型链接。当您使用ui-sref构建链接时，在一个地方更改url将更新每个链接到该状态。对于url可能改变的大型项目非常有用。

There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand.

还有decorator的概念，它可以用于根据要访问的URL动态创建路由。这可能意味着您不需要在提交之前指定所有的路由。

states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.

状态允许您映射和访问不同状态的不同信息，您可以通过$stateParams轻松地传递状态之间的信息。

You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via global $state provided by ui-router

通过UI -router提供的全局$状态，您可以轻松确定您是否处于状态或状态的父状态，以便在模板中调整UI元素(突出显示当前状态的导航)

Overall, ngRoute merely allows you to assign controllers and templates to URL routes, whereas the fundamental abstraction in ui.router is states, which is a more powerful concept.

总的来说，ngRoute仅仅允许您为URL路由分配控制器和模板，而ui中的基本抽象。路由器是状态，这是一个更强大的概念。