如果我可以使用指令，为什么要使用 UI 路由器？答案

【问题标题】：Why UI router if I can use directives?如果我可以使用指令，为什么要使用 UI 路由器？
【发布时间】：2016-07-10 04:36:45
【问题描述】：

嗯，我从来没有使用过，也从来没有觉得我应该使用 UI 路由器。我在一次采访中被问到这个问题，所以如果我作为 AngularJs 开发人员遗漏了什么，我想阅读一下。

现在，互联网上的解释显示了它基于组件的模块化和可重用性的优势。视图的嵌套等。

如果我想在我的视图中重用组件，那么我不能使用指令而不是新状态吗？根据 scotch.io(top google result) 的this article ui 路由器，在我看来，我们可以使用单独的数据/控制器。好吧，我不能通过指令的控制器和模板做同样的事情。我仍然可以根据需要多次重复使用它。

如果我遗漏了一些很酷的功能并使其成为 AngularJs 应用程序中的典型应用，请告诉我（当然是一个更大的应用程序，其中包含许多可重用的组件）。

【问题讨论】：

你可能在这里找到答案：stackoverflow.com/questions/22790209/…
不，它没有。我对该链接接受的答案的回复如下：在多少情况下我们会遇到完整的模板作为指令？用于局部视图的指令已经有一个父模板。列出的不错的功能，但似乎实际上不可用或无法说服使用并将 ui-router 包含在我的项目文件中。

【解决方案1】：

路由器的全部意义在于它使用 URL 来改变状态。如果您只使用指令，则必须编写自己的机制来将 URL 与特定指令同步。

【讨论】：

我的问题不是一般的路由，而是具体的 ui 路由器。您所解释的也可以通过 ngRoute 完成。这就是我所说的。然后为了可重用性，例如左侧边栏、页眉、页脚，我总是可以使用指令而不提供 ui 路由器的状态。不是吗？
对不起，我对你的问题有点困惑，你似乎在问 ui-router 和指令之间的区别。我的回答是，它们是完全不同的东西。是的，ngRoute 做同样的事情，它们都是为路由而设计的模块。不确定您要与指令进行比较。在一个好的应用程序结构中，你有状态，它们只是由许多指令/组件组成。因此，对于构建应用程序的模块化可重用部分，是的，您将完全使用指令/组件。对不起，我不知道我是否在帮助：P

【解决方案2】：

AngularJS 是一个单页应用程序的框架。

单页应用程序 (SPA)

单页应用程序是一个 Web 应用程序，它加载单个 HTML 页面并在用户与应用程序交互时动态更新页面中的片段。

John Papa 的 blog 用简单的术语解释了 SPA。

我看到的SPA最大的优势是

虽然技术上可以在非 SPA 应用程序中实现上述目标，但它从来没有像 SPA 那样简单。

SPA 对于具有许多页面的高度复杂的应用程序很有用。对于 2-3 页的简单应用程序，jQuery 是不错的选择。

您可能知道所有这些，我认为您正在尝试使用指令来实现 SPA。

路由框架根据用户操作动态地将视图加载到主页面中，而无需刷新整个应用程序；提供SPA效果。

有两种流行的 AngularJS 路由框架可用。

ngRoute 基于 URL 映射，UI-Router 基于状态名称映射。我更喜欢UI-Router。

现在，互联网上的解释显示它的实力基于组件的模块化和可重用性。嵌套视图等。

Yes 指令用于模块化和可重用性，可以动态加载视图，但不能根据用户操作动态选择视图。您必须在指令中编写复杂的条件才能动态选择视图。

例如，如果您有一个包含 3 个链接的应用程序，并且您需要根据用户点击的链接显示一个视图。

使用指令，您需要跟踪用户单击的内容并编写一个肮脏的条件来选择要显示的视图。大部分时候你会因为链接可以通过多种方式访问而无法达到效果。

另一方面，一旦配置了路由，当用户点击链接时，相应的模板将被动态加载。根据用户操作更改视图更容易。

另一个优势。当用户打开一个深度链接到应用程序的书签时，路由框架将负责加载状态（使用指令是不可能实现的）。这种设计应用程序的方式感觉更自然。

选择是你的。

【讨论】：

我引用For example, if you have an application with 3 links and you need to show a view based on the link user clicked. 我不需要为这个例子做指令处理。我可以通过 ng-if, ng-show 简单地做到这一点。 ui路由器只为这个？ M不买
如果从浏览器访问链接怎么办？思考。请阅读我关于访问深度链接书签的更新评论。
好的，所以我们现在将用户从上面的示例图片中移开，并且可以通过浏览器访问链接。你听说过路由参数吗？在配置函数中是这样的……products/:id
两种方式都可以实现。但只有指令更难。路由适合所有场景。选择是你的。顺便说一句，路由参数与路由有关。祝你好运。
对您所谈论的场景一无所知？你问错了。我根本没有使用指令处理状态或路由。 NG route 在它自己的地方只是将它与 scotch.io 在我们使用不同视图时使用 ui router 的示例进行了比较。感谢讨论