angular-route和angular-ui-router有什么区别?


1080

我打算在大型应用程序中使用AngularJS。因此,我正在寻找合适的模块来使用。

是什么区别(角route.js)ngRouteUI的路由器(角-UI-router.js)模块?

在许多使用ngRoute的文章中,route是使用$ routeProvider配置的。但是,当与ui-router一起使用时,route是使用$ stateProvider和$ urlRouterProvider配置的。

我应该使用哪个模块以获得更好的可管理性和可扩展性?


11
更不用说在1.4+和2.0中angular的路由器
Zach Lysobey 2015年

Answers:


1112

ui-router是一个第三方模块,功能非常强大。它支持常规ngRoute可以执行的所有操作以及许多其他功能。

以下是在ngRoute上选择ui-router的一些常见原因:

  • ui-router允许嵌套视图多个命名视图。这对于较大的应用程序非常有用,在大型应用程序中,您的页面可能会继承自其他部分。

  • ui-router允许您基于状态名称在状态之间进行强类型链接。当您使用建立链接时,在一个位置更改url会将每个链接更新为该状态ui-sref。对于可能会更改URL的大型项目非常有用。

  • 装饰器还有一个概念,可用于允许基于尝试访问的URL动态创建路由。这可能意味着您无需事先指定所有路线。

  • 状态允许您映射和访问有关不同状态的不同信息,并且您可以通过轻松在状态之间传递信息$stateParams

  • 您可以$state通过ui-router提供的方法轻松确定自己是处于状态还是状态的父级,以在模板中调整UI元素(突出显示当前状态的导航),可以通过将其设置为$rootScopeon 来进行公开run

从本质上讲,ui-router是具有更多功能的ngRouter,在表底下它是完全不同的。这些附加功能对于大型应用程序非常有用。

更多信息:


134
总体而言,这是最好的解释,但有一个关键点:“总体而言,ui-router是具有更多功能的ngRouter”。比这要重要得多:ngRoute仅允许您将控制器和模板分配给URL路由,而状态中的基本抽象ui.router是状态,这是一个更强大的概念。
Nate Abele 2014年

23
在此答案中指出文件大小的差异可能与某些人有关。截至目前ngRoute:35.9kB / 4.4kB / 2.5kB和ui-router:162.9kB / 30.4kB / 11.6kB(未缩小/缩小/压缩)。
亚历克斯·罗斯

35
我们是否真的担心2015年的162kb?
fish鱼2015年

27
为什么不@Catfish?世界上有很多地方互联网连接不良,因此担心这一点非常重要!
布鲁诺·卡萨利

4
@tfrascaroli我不同意-如果用户是第一次加载您的应用,则页面加载时间与跳出率密切相关。在向页面添加另一个130kB之前,我肯定会考虑成本/收益。
安东尼·曼宁·富兰克林

131

ngRoute是AngularJS团队开发的模块,该模块是AngularJS核心的早期组成部分。

ui-router是一个在AngularJS项目之外制作的框架,用于改善和增强路由功能。

从ui-router 文档中

AngularUI Router是AngularJS的路由框架,它允许您将接口的各个部分组织到状态机中。不同于Angular核心中的$ route服务是围绕URL路由组织的,UI-Router是围绕状态组织的,状态可以有选择地附加路由以及其他行为。

状态绑定到命名视图,嵌套视图和并行视图,从而使您可以有效地管理应用程序的界面。

它们都不是更好的选择,您将必须选择最适合您的项目。

但是,如果您打算在应用程序中使用复杂的视图,并且希望处理“ $ state”概念。我建议您选择ui-router。


1
FWIW我花了好几个小时将我的头撞在angularjs的ui路由器上。该文档处于非常抱歉的状态,显然已经废弃多年了。重要指南的链接断开,在教程中将nuget包命名为错误,您将其命名。最终我在找不到这个问题后就放弃了stackoverflow.com/questions/23585065/…(以及其他许多人)。立即尝试ngRoute ...
UnionP '17



35

如果要利用ngRoute范例中实现的嵌套视图功能,请尝试angular-route- segment-它旨在扩展ngRoute而不是替换它。


16
我看不到您答案的相关性。作者专门询问了angular-route和angular-ui-router之间的区别。此外,在推广自己的库时,免除您是创建者的责任。
2014年

23
相关性很简单:角度路由+角度路由段=角度用户界面路由器。因此,区别是:angular-ui-router-angular-route = angular-route-segment :)
artch 2014年

1
我认为这是一个有效的答案。对于那些不想使用ui-router的人来说,angular-route-segment.com绝对是一个不错的选择。同样@vially,人们努力创建这些库,对其进行推广并不是一件坏事
phil

19

通常,ui-router在状态机制上工作...可以通过一个简单的示例来理解:

假设我们有一个音乐库的大型应用程序(例如..gaana或saavan或其他任何文件)。在页面底部,您拥有一个音乐播放器,该音乐播放器在页面的所有状态之间共享。

现在,假设您只需单击一些歌曲即可播放。在这种情况下,仅该音乐播放器状态应更改,而不是重新加载整个页面。这可以通过ui-router轻松处理。

在ngRoute中,我们只是附加视图和控制器。


2
这可以做到,而且必须使用服务和工厂来完成。该软件包的使用缺乏对角度路线,状态和模式的理解。状态是由url处理的,如果您要以特定状态共享应用程序,这是正确的,此外,您可以在同一视图中拥有多个对服务数据更新或url参数作出反应的控制器。ui路由器弄乱了东西并完全破坏了角度模式。
Pablo Ezequiel Leone

我完全同意。仍然找不到在哪里必须使用此状态机的解释
kushalvm

18

角1.x

ng-route

ng-route由angularJS团队开发,用于路由。

ng-route: 基于url(位置)的路由。

例如:

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

ui-route

ui-router由第三方模块开发。

ui-router:基于状态的路由

例如:

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

-> ui-router允许嵌套视图

-> ui-router比ng-route更强大

ng路由器ui路由器


13

ngRoute是Angular团队构建的模块,提供基本的客户端路由功能。该模块为路由提供了相当强大的基础,并且可以很容易地构建以提供可靠的路由功能,如本博客文章中所示(请务必阅读Ward Bell和作者Ben Nadel之间的评论记录-他们是几个Angular专家)

ui-router将焦点从以url为中心的路由转移到应用程序“状态”,这可能会或可能不会反映在url中。

ui-router添加的主要功能是嵌套状态和命名视图。

嵌套状态使您可以为应用程序的各个部分分离控制器逻辑。一个非常简单的示例就是一个应用程序,其顶部具有主要导航功能,左侧具有辅助导航列表,右侧具有内容。如果没有嵌套状态,则单个控制器通常必须处理辅助导航以及内容的显示逻辑。嵌套路由使您可以分开这些问题。

命名视图是ui-router的另一个附加功能。使用ngRoute,页面上只能有一个ngView指令,而使用ui-router中的命名视图,您可以指定多个ui-view指令,然后每个状态都可以影响名称视图的模板和控制器。一个超简单的示例是将应用程序的主要内容作为主视图,然后再将页脚栏作为单独的ui视图。在这种情况下,页脚的控制器不再必须侦听状态/路由更改。

此播客节目中可以找到ngRoute和ui-router的良好比较。

只是为了使事情变得更加混乱,请注意Angular团队期望为Angular的1.5和2.0版本发布的新的“官方”路由模块。这将替换ngRoute模块。 是新路由器模块的当前文档-由于实施尚未完成,因此在发布时该文档还很少。在此处观看有关此模块何时实际发布的更多新闻。


11

ngRoute是一个基本的路由库,您可以在其中为任何路由指定一个视图和控制器。

使用ui-router,您可以指定多个视图,包括并行视图和嵌套视图。因此,如果您的应用程序需要(或将来可能需要)任何类型的复杂路由/视图,请继续使用ui-router。

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


10

您必须了解的基本知识:ng-router使用$location.path()和ui-router使用$state.go

让我们休息所有功能。


8

ui路由器让您的生活更轻松!您可以通过将其注入到您的应用程序中,将其添加到您的AngularJS应用程序中。

ng-route 作为核心AngularJS的一部分提供,因此它更简单,并且为您提供更少的选择...

查看此处以更好地了解ng-route:https : //docs.angularjs.org/api/ngRoute

另外,在使用它时,请不要忘记使用:ngView ..

ng-ui-router不同,但:

https://github.com/angular-ui/ui-router,但为您提供更多选择...。


6

AngularUI Router是AngularJS的路由框架,它允许您将接口的各个部分组织到状态机中。与Angular ngRoute模块中的$ route服务围绕URL路由组织不同,UI-Router围绕状态进行组织,状态可以有选择地附加路由以及其他行为。

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


4

ngRoute是Angular.js团队开发的模块,该模块是Angular核心的早期组成部分。

ui-router是一个在Angular.js项目之外制作的框架,用于改善和增强路由功能。


3

1- ngRoute由角度小组开发,而ui-router是第三方模块。2- ngRoute根据路由URL实现路由,而ui-router根据应用程序的状态实现路由。3- ui-router提供了ng-route提供的所有功能,以及一些其他功能,例如嵌套状态和多个命名视图。


0

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

ui-View 因此是最佳选择。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.