关于javascript：angular-route和angular-ui-router有什么区别？

What is the difference between angular-route and angular-ui-router?

我计划在我的大应用程序中使用AngularJS。所以我正在寻找合适的模块来使用。

ngroute(angular route.js)和ui router(angular ui router.js)模块有什么区别？

在许多文章中，使用ngroute时，使用$routeProvider配置路由。但是，当与UI路由器一起使用时，路由配置为$StateProvider和$URLRouterProvider。

我应该使用哪个模块来提高可管理性和可扩展性？

相关讨论

用户界面路由器是第三方模块，功能强大。它支持正常的ngroute所能做的一切，以及许多额外的功能。

以下是在ngroute上选择ui路由器的一些常见原因：

UI路由器允许嵌套视图和多个命名视图。对于较大的应用程序来说，这非常有用，因为在该应用程序中，可能会有从其他部分继承的页面。
用户界面路由器允许您根据状态名称在状态之间建立强类型链接。在一个地方更改URL，当您使用ui-sref建立链接时，会将每个链接更新到该状态。对于URL可能更改的大型项目非常有用。
还有一个装饰器的概念，它可以用来允许根据试图访问的URL动态创建路由。这可能意味着您不需要在手前指定所有路由。
states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.
通过用户界面路由器提供的$state可以很容易地确定您是否处于某个状态或某个状态的父状态，以调整模板中的用户界面元素(突出显示当前状态的导航)，您可以通过在run上的$rootScope中设置该元素来公开该元素。

本质上，用户界面路由器是具有更多功能的ngrouter，在表的下面它是相当不同的。这些附加功能对于更大的应用程序非常有用。

更多信息：

github:https://github.com/angular-ui/ui-router
文档：
- API Reference: http://angular-ui.github.io/ui-router/site/#/api
- 指南：https://github.com/angular-ui/ui-router/wiki
常见问题：https://github.com/angular-ui/ui-router/wiki/frequently-asked-questions
示例应用程序：http://angular ui.github.io/ui router/sample/#/

相关讨论

总的来说，这是最好的解释，但有一个关键点："总的来说，UI路由器是具有更多功能的NGRouter"。它比这更基本：ngRoute只允许您将控制器和模板分配给URL路由，而ui.router中的基本抽象是状态，这是一个更强大的概念。
在这个答案中指出文件大小的不同可能与一些人有关。截至目前，ngRoute：35.9kb/4.4kb/2.5kb，ui-router：162.9kb/30.4kb/11.6kb(未完成/缩小/gzip)。
如果您能提到在$stateprovider上使用$routeprovider的位置，那就太好了。：)或者在哪里理想地使用它(或者首选)？
我们真的担心2015年的162千字节吗？
为什么不吃鲶鱼？世界上有很多地方互联网连接不好，担心这一点很重要！
我和@catfish在一起，~130kb在任何地方都不用担心。根据维基百科(我确信这还不够详尽，但这是一个开始)，最糟糕的互联网速度是巴拉圭，平均1.5Mbps。同样，与此相比，130kb是多少。同意这里130kb，那里130kb等等最终会有影响。但是为了写更好的代码和更好的应用程序，我认为我们应该给一些东西一个通行证。
@我应该可以用角度2来使用它，对吗？
@Campinho用户界面路由器在其更新版本中确实支持Angular2，但也有Angular路由器在积极开发中。因为Angular2也在积极开发中，而且目前只在RC中(还没有生产就绪)，所以事情会很快发生变化(和中断)。
@tfrascaroli我想你忘了转换位和字节。1.5位是每秒187.5字节。这意味着130kb将为客户端的下载时间增加700ms，假设100%利用1.5Mbit连接。
@安托曼宁·富兰克林，我不是，不过还是谢谢你的澄清。但我的观点是：你只需要等那700毫秒(或者可能整整2秒，因为你有更多的库/代码要下载)一次。我相信人们不会责怪任何一个开发者，如果他们知道他们之间的联系很糟糕的话。此外，这是绝对最坏的情况，平均来说，它只会从这里变得更好。如果我知道一个网页值得，或者我喜欢它的内容和用户体验，我个人会很乐意等待2秒钟来获取它。
@tfrascaroli I disagree - if a user is loading your app for the first time, page load times correlate strongly to bounce rates . 在向页面添加另外130kb之前，我肯定会考虑成本/收益。
@安托曼宁·富兰克林肯定(而且通常)也会考虑到这一点。但我通常更关心网页的解析时间和RAM使用率/CPU使用率。我想这一切归根结底就是你正在开发的网页/webapp，额外的库带来的代码质量和你的目标…瞄准井：)
我不想争辩，但我们真的在考虑使用未完成的文件，即160kb吗？我们不应该考虑缩小的还是gzip的(11.6KB)？我在一个项目的前端部分使用了AngularRouter，在管理面板中使用了UI Router。我的想法是，用户可能不愿意等待，他们实际上没有访问许多资源的权限，但管理员应该也愿意。
我是第1000次投票的人：)
@威廉姆罕布什尔州，从技术上讲，你是第1001次因投反对票而上扬的人，但你是那个能把筹码提高到1000的人！

ngroute是AngularJS团队开发的一个模块，它是AngularJS核心的早期部分。

UI路由器是在AngularJS项目之外开发的一个框架，用于改进和增强路由功能。

从UI路由器文档中：

AngularUI Router is a routing framework for AngularJS, which allows
you to organize the parts of your interface into a state machine.
Unlike the $route service in Angular core, which is organized around
URL routes, UI-Router is organized around states, which may optionally
have routes, as well as other behavior, attached.

States are bound to named, nested and parallel views, allowing you to
powerfully manage your application's interface.

它们都不是更好的，你必须为你的项目选择最合适的。

但是，如果您计划在应用程序中拥有复杂的视图，并且希望处理"$state"概念。我建议您选择UI路由器。

相关讨论

ngRoute is a angular core module which is good for basic scenarios. I believe that they will add more powerful features in upcoming releases.

网址：https://docs.angularjs.org/api/ngroute

Ui-router is a contributed module which is overcome the problems of ngRoute. Mainly Nested/Complex views.

网址：https://github.com/angular-ui/ui-router

ui路由器和ngroute之间的一些区别

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

enter image description here

ngroute是核心AngularJS框架的一部分。

用户界面路由器是一个社区库，它被创建来尝试改进默认的路由功能。

下面是一篇关于配置/设置UI路由器的好文章：

http://www.ng-newsletter.com/posts/angular-ui-router.html

如果您想使用在ngroute范例中实现的嵌套视图功能，请尝试使用角度路由段-它旨在扩展ngroute，而不是替换它。

相关讨论

角1

NG路线：

NG路由由AngularJS团队开发，用于路由。

ng路由：基于URL(位置)的路由。

前任：

1
2
3
4

$routeProvider
.when("/home", {
templateUrl :"home.html"
})

用户界面路由：

用户界面路由器由第三方模块开发。

UI路由器：基于状态的路由

前任：

1
2
3
4
5

$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})

->用户界面路由器允许嵌套视图

-->ui路由器比ng路由更强大

NG路由器用户界面路由器

一般来说，用户界面路由器工作在一种状态机制上…它可以用一个简单的例子来理解：

假设我们有一个大型的音乐库应用程序(比如gaana或saavan或其他)。在页面的底部，有一个音乐播放器，可以在页面的所有状态下共享。

现在假设你只需点击一些歌曲来播放。在这种情况下，只应更改音乐播放器的状态，而不应重新加载整个页面。用户界面路由器可以轻松处理。

在ngroute中，我们只连接视图和控制器。

相关讨论

ngroute是一个由Angular团队构建的模块，它提供基本的客户端路由功能。这个模块为路由提供了一个相当强大的基础，并且可以很容易地建立在基础上，以提供可靠的路由功能，如本文所示(一定要阅读Ward Bell和Ben Nadel(作者)之间的评论线索-他们是一些有角度的专家)

UI路由器将焦点从以URL为中心的路由转移到应用程序"状态"，这可能反映在URL中，也可能不反映在URL中。

UI路由器添加的主要功能是嵌套状态和命名视图。

嵌套状态允许您为应用程序的各个部分分离控制器逻辑。一个非常简单的例子是一个应用程序，它的主导航位于顶部，辅助导航列表位于左侧，内容位于右侧。如果没有嵌套状态，单个控制器通常必须处理辅助导航以及内容的显示逻辑。嵌套路由允许您分离这些关注点。

命名视图是UI路由器的另一个附加功能。使用ngroute，一个页面上只能有一个ngview指令，而在ui-router中使用命名视图，可以指定多个ui-view指令，然后每个状态都可以影响命名视图的模板和控制器。一个非常简单的例子是让应用程序的主要内容作为主视图，然后还有一个页脚栏作为单独的用户界面视图。在这个场景中，页脚的控制器不再需要监听状态/路由更改。

在这个播客集中可以找到ngroute和ui路由器的一个很好的比较。

为了让事情变得更混乱，请关注Angular团队希望发布的1.5和2.0版Angular的新"官方"路由模块。这将替换ngroute模块。以下是新路由器模块的当前文档-由于实现尚未最终确定，因此截至本文发布时，该文档相当稀少。请看这里，了解更多有关何时实际发布此模块的新闻。

ngroute是一个基本的路由库，您可以为任何路由指定一个视图和控制器。

使用UI路由器，可以指定多个视图，既可以是并行视图，也可以是嵌套视图。因此，如果您的应用程序需要(或将来可能需要)任何类型的复杂路由/视图，那么继续使用UI路由器。

这是Angularui路由器的最佳入门指南。

你必须知道的基本情况是：NG路由器使用$location.path()，UI路由器使用$state.go。

让我们休息一下。

用户界面路由器让您的生活更轻松！您可以通过将它注入到应用程序中，将其添加到AngularJS应用程序中…

ng-route作为核心AngularJS的一部分提供，因此它更简单，而且提供的选项更少…

请看这里，更好地理解NG路由：https://docs.angularjs.org/api/ngroute

另外，在使用它时，不要忘记使用：ngview.。

ng-ui路由器不同，但：

https://github.com/angular-ui/ui-router，但提供了更多选项……

AngularUI路由器是AngularJS的路由框架，它允许您将接口的各个部分组织成状态机。与Angular NGRoute模块中围绕URL路由组织的$route服务不同，UI路由器围绕状态组织，这些状态可以选择附加路由以及其他行为。

https://github.com/angular-ui/ui-router

ngroute是Angular.js团队开发的一个模块，它是Angular核心的早期部分。

UI路由器是在Angular.js项目之外开发的一个框架，用于改进和增强路由能力。

NGroute由Angular团队开发，而UI路由器是第三方模块。2-ngroute基于路由URL实现路由，而ui路由器基于应用程序的状态实现路由。3-UI路由器提供NG路由提供的所有功能，以及一些附加功能，如嵌套状态和多个命名视图。

ng-View(由AngularJS团队开发)每页只能使用一次，而ui-View(第三方模块)每页可以使用多次。

因此，ui-View是最佳选择。