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

时间:2014-01-09 15:03:28

标签: javascript angularjs angularjs-routing angular-ui-router angularjs-module

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

ngRoute(angular-route.js) ui-router(angular-ui-router.js)模块有什么区别?

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

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

15 个答案:

答案 0 :(得分:1099)

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

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

  • ui-router允许nested viewsmultiple named views。这对于较大的应用程序非常有用,您可以从其他部分继承页面。

  • ui-router允许您根据州名称在状态之间建立强类型链接。在使用ui-sref构建链接时,在一个位置更改网址会更新指向该状态的每个链接。对于URL可能发生变化的大型项目非常有用。

  • 还有decorator的概念,可用于根据尝试访问的URL动态创建路由。这可能意味着您不需要事先指定所有路线。

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

  • 您可以通过ui-router提供的$state轻松确定您是否处于状态或父状态,以调整模板中的UI元素(突出显示当前状态的导航)可以通过$rootScope run上的{{1}}进行曝光。

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

更多信息:

答案 1 :(得分:128)

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

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

来自ui-router documentation

  

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

     

状态绑定到命名,嵌套和并行视图,允许您使用   有力地管理您的应用程序界面。

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

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

答案 2 :(得分:69)

  

ngRoute是一个角度核心模块,适用于基本场景。我相信他们会在即将发布的版本中添加更强大的功能。

网址:https://docs.angularjs.org/api/ngRoute

  

Ui-router是一个克服了ngRoute问题的贡献模块。主要是嵌套/复杂视图。

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

ui-router和ngRoute之间的一些区别

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

enter image description here

答案 3 :(得分:50)

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

ui-router是一个社区库,它是为了尝试改进默认路由功能而创建的。

这是一篇关于配置/设置ui-router的好文章:

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

答案 4 :(得分:34)

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

答案 5 :(得分:18)

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

我们假设我们有一个音乐库的大应用(如.gaana或saavan或任何其他)。在页面底部,您有一个音乐播放器,可以在页面的所有状态共享。

现在让我们说你只需点击一些歌即可播放。在这种情况下,只有该音乐播放器状态应该更改而不是重新加载整页。这可以通过ui-router轻松处理。

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

答案 6 :(得分:18)

Angular 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'
        })

- &GT; ui-router允许嵌套视图

- &GT; ui-router比ng-route更强大

ng-routerui-router

答案 7 :(得分:13)

ngRoute是由Angular团队构建的模块,提供基本的客户端路由功能。该模块为路由提供了相当强大的基础,并且可以很容易地构建,以提供可靠的路由功能,如this blog post中所示(请务必阅读Ward Bell和Ben Nadel之间的评论路径,作者 - 他们是一对Angular专业人士)

ui-router将焦点从以网址为中心的路线转移到应用程序&#34;状态&#34;,这可能会也可能不会反映在网址中。

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

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

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

可以在this podcast剧集中找到ngRoute和ui-router的良好比较。

只是为了让事情更加混乱,请关注新的&#34;官员&#34; Angular团队期望为Angular的1.5和2.0版本发布的路由模块。这将取代ngRoute模块。 Here是新路由器模块的当前文档 - 由于该实现尚未最终确定,因此该帖子相当稀疏。观看here以获取有关何时实际发布此模块的更多新闻。

答案 8 :(得分:11)

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

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

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

答案 9 :(得分:10)

您必须知道的基本事项:ng-router使用$location.path()而ui-router使用$state.go

让我们了解所有功能。

答案 10 :(得分: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但为您提供了更多选择......

答案 11 :(得分:6)

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

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

答案 12 :(得分:4)

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

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

答案 13 :(得分:3)

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

答案 14 :(得分:0)

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

ui-View因此是最佳选择。