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

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

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

在使用ngRoute的许多文章中,路由configuration了$ routeProvider 。 然而,当与UI路由器一起使用时 ,路由configuration$ stateProvider和$ urlRouterProvider

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

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

这里有一些常见的原因ui路由器selectngRoute:

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

  • ui-router允许你在基于状态名称的状态之间进行强types的链接。 当你用ui-srefbuild立你的链接时,在一个地方更改url会更新每个链接的状态。 对于URL可能更改的大型项目非常有用。

  • 也有装饰器的概念,可以用来允许您的路由dynamic地创build基于试图访问的URL。 这可能意味着你不需要事先指定所有的路线。

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

  • 你可以很容易地确定你是否处于状态或父母$state ,通过ui-router提供的$state来调整你的模板中的UI元素(突出显示当前状态的导航),你可以通过$rootScope run

从本质上讲,ui-router是具有更多function的ngRouter,在它们之下是相当不同的。 这些附加function对于大型应用程序非常有用。

更多信息:

  • Github: https : //github.com/angular-ui/ui-router
  • 文档:
    • API参考: 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/#/

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

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

从ui路由器文档 :

AngularUI Router是AngularJS的一个路由框架,它可以让你将界面的各个部分组织成一个状态机。 与在URLpath周围组织的Angular核心中的$ route服务不同,UI-Router是围绕状态组织的,这些状态可以select性地包含路由以及其他行为。

国家必须具有命名,嵌套和并行视图,使您能够有效pipe理您的应用程序的界面。

他们都不是更好,你将不得不select最适合你的项目。

但是,如果您计划在应用程序中使用复杂的视图,并且想要处理“$ state”的概念。 我build议你selectui路由器。

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

url: https : //docs.angularjs.org/api/ngRoute

Ui路由器是一个贡献模块,克服了ngRoute的问题。 主要是嵌套/复杂的意见。

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

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

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

在这里输入图像说明

为什么你应该使用UI-Router

多个视图:

大多数应用程序可以分解成区域。 应用程序通常至less有一个标题,一个主要内容区域和一个页脚。

通常,应用程序可能会在页面的左侧或右侧添加一个侧栏,如下所示。

在这里输入图像说明

在大多数情况下,所有这些区域(视图)都会同时显示在页面上。 使用内置的AngularJS路由器ngRoute,每个页面只允许有一个视图(ng-view)。 此限制会导致人们使用includes(ng-include)或其他解决方法为其应用程序创build布局或主页面。 UI-Router支持多个视图,每个视图都可以有自己对应的控制器,这样每个区域都可以在整个应用程序中被封装和重用。

嵌套视图:

应用程序中嵌套视图的常见示例是主/细节,更具体地说,是一个列表/详细信息页面。 许多应用程序显示的项目列表,然后当你点击一个项目,你会看到该项目的细节。 进一步考虑这个例子,你可能会在查看项目详细信息时点击一个编辑链接,这个链接会将你带到一个项目的可编辑窗体(参见下图可视化)。

在这里输入图像说明

如果列表和详细信息位于不同的页面(或在AngularJS中调用的视图),则使用内置的AngularJS路由器ngRoute可以轻松实现此场景。 但是,如果您希望列表保留在页面上,而在列表的右侧或下方显示详细信息,则这变得更具挑战性。

清楚的是, ngRoute通过与两个控制器共享单个视图来实现此要求:一个用于列表,另一个用于细节,并根据需要隐藏和显示细节。

结果是不理想的,因为我们希望列表和细节每个都有自己的控制器和视图只有一个责任(显示列表或显示项目的细节)。 通过将这些用户界面区域封装在他们自己的视图中,我们可以有一个更加可组合的用户界面,使我们可以将这些用户界面放在一起,或根据需要将它们分开。

嵌套的观点使我们不仅可以同时把这些观点融合在一起,而且可以将观点embedded到另一个观点之中。

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

ui-router是一个社区库,已经被创build来试图改进默认的路由function。

这里有一篇关于configuration/设置ui-router的好文章:

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

如果你想使用在ngRoute范例中实现的嵌套视图function,试试angular-route-segment – 它旨在扩展ngRoute而不是replace它。

通常,ui路由器在状态机制上工作…可以用一个简单的例子来理解:

比方说,我们有一个音乐库(如..gaana或saavan或其他)的大型应用程序。 在页面的底部,你有一个音乐播放器,在页面的所有状态中共享。

现在让我们说你只需点击一些歌曲播放。 在这种情况下,只有音乐播放器状态应该改变,而不是重新加载整个页面。 这可以很容易地通过UI路由器来处理。

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

ngRoute是由Angular团队构build的模块,提供基本的客户端路由function。 这个模块为路由提供了一个相当强大的基础,并且可以非常容易地build立起来,以提供可靠的路由function,如本博客文章所示 (请务必阅读Ward Bell和Ben Nadel之间的评论,作者 – 他们是几个angular利)

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

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

嵌套状态允许您为应用程序的各个部分分离控制器逻辑。 一个非常简单的例子就是一个应用程序,包括顶部的导航,左侧的辅助导航列表和右侧的内容。 没有嵌套状态,单个控制器通常不得不处理二级导航的显示逻辑以及内容。 嵌套的路由允许你分开这些问题。

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

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

只是为了让事情更加混乱,请关注Angular团队预计将为Angular版本1.5和2.0发布的新“官方”路由模块。 这将取代ngRoute模块。 这里是目前新的路由器模块的文档 – 这是相当稀疏的,因为实施还没有最终确定。 在这里观看更多关于这个模块何时会被释放的消息。

Angular 1.x

ng-route :

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

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

例如:

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

ui-route :

ui路由器由第三方模块开发。

ui-router: 基于状态的路由

例如:

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

– > ui-router允许嵌套视图

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

ng-router , ui-router

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

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

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

基本的东西你必须知道:ng-router使用$location.path()和ui-router使用$state.go

rest我们的所有function。

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

ng-route是AngularJS核心的一部分,因此它更简单,并且给你更less的select。

看看这里更好地理解ng-route: https : //docs.angularjs.org/api/ngRoute

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

ng-ui-router是不同的,但是:

https://github.com/angular-ui/ui-router,但给你更多的select….

AngularUI Router是AngularJS的一个路由框架,它可以让你将界面的各个部分组织成一个状态机。 与Angular ngRoute模块中的$ route服务不同,该模块是围绕URL路由组织的,UI-Router围绕状态进行组织,这些状态可以select附加路由以及其他行为。

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

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

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

1- ngRoute是由angular色团队开发的,而ui-router是第三方模块。 2- ngRoute基于路由URL实现路由,而ui-router则根据应用的状态实现路由。 3- ui-router提供ng路由提供的所有内容,以及一些附加function,如嵌套状态和多个命名视图。

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

ui-View因此是最好的select。