ChatGPT解决这个技术问题 Extra ChatGPT

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

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

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

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

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

更不用说 1.4+ 和 2.0 中的 angular's new router

W
Wilgert

ui-router 是第 3 方模块,功能非常强大。它支持普通 ngRoute 可以做的所有事情以及许多额外的功能。

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

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

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

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

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

您可以通过 ui-router 提供的 $state 轻松确定您是否处于状态或状态的父状态以调整模板中的 UI 元素(突出显示当前状态的导航),您可以通过在 $rootScope 中设置它来公开它跑。

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

更多信息:

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

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/#/


总体而言,这是最好的解释,但有一个关键点:“总体而言,ui-router 是具有更多功能的 ngRouter”。它比这更基本:ngRoute 仅允许您将控制器和模板分配给 URL 路由,而 ui.router 中的基本抽象是状态,这是一个更强大的概念。
在此答案中指出文件大小的差异可能与某些人有关。截至目前 ngRoute:35.9kB / 4.4kB / 2.5kB 和 ui-router:162.9kB / 30.4kB / 11.6kB(未缩小/缩小/压缩)。
我们真的担心 2015 年的 162kb 吗?
为什么不@Catfish?世界上有很多地方网络不好,担心很重要!
@tfrascaroli 我不同意 - 如果用户是第一次加载您的应用程序,页面加载时间 correlate strongly to bounce rates 。在向页面添加另一个 130kB 之前,我肯定会考虑成本/收益。
P
Peter Mortensen

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

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

从 ui-router documentation

AngularUI Router 是 AngularJS 的路由框架,它允许您将界面的各个部分组织到状态机中。与 Angular 核心中的 $route 服务围绕 URL 路由组织不同,UI-Router 围绕状态组织,这些状态可以选择附加路由以及其他行为。状态绑定到命名的、嵌套的和并行的视图,使您能够强大地管理应用程序的界面。

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

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


FWIW 我只是花了好几个小时将头撞到 ui-router 的 angularjs 上。文档处于非常抱歉的状态,显然它已经被遗弃多年了。指向重要指南的断开链接,教程中错误命名的 nuget 包,你可以命名它。最终,在我无法解决这个问题 stackoverflow.com/questions/23585065/…(以及看似许多其他人)之后,我放弃了。现在尝试 ngRoute...
A
Asik

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

网址: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/

https://i.stack.imgur.com/PkUq0.png


P
Peter Mortensen

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

ui-router 是一个社区库,旨在改进默认路由功能。

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

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


a
artch

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


我看不出你的答案的相关性。作者专门询问了angular-route和angular-ui-router的区别。此外,在推广您自己的库时,您是创建者的免责声明会很有用。
相关性很简单:angular-route + angular-route-segment = angular-ui-router。所以,区别在于:angular-ui-router - angular-route = angular-route-segment :)
我认为这是一个有效的答案。 angular-route-segment.com 对于那些不想使用 ui-router 开销的人来说绝对是一个不错的选择。还有@vially,人们努力创建这些库,推广它并不是一件坏事
U
UniCoder

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

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

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

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


这可以并且必须使用服务和工厂来完成。这个包的使用是缺乏对角度路线、状态和模式的理解。状态由 url 处理,如果您想以特定状态共享应用程序,这是正确的,此外,您可以在同一视图中拥有多个控制器,它们对服务数据更新或 url 参数做出反应。 ui路由器把事情搞砸了,完全破坏了角度图案。
我完全同意。仍然找不到需要使用此状态机的解释
M
Mahesh K

角 1.x

ng-route

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

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

前任:

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

ui-route

ui-router 由 3rd 方模块开发。

ui-router : 基于状态的路由

前任:

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

--> ui-router 允许嵌套视图

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

ng-routerui-router


S
Sean

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

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

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

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

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

可以在 this podcast 集中找到 ngRoute 和 ui-router 的一个很好的比较。

为了让事情变得更加混乱,请密切关注 Angular 团队期望为 Angular 1.5 和 2.0 版本发布的新“官方”路由模块。这将替换 ngRoute 模块。 Here 是新路由器模块的当前文档 - 由于实施尚未最终确定,因此在此发布时它相当稀疏。观看 here,了解有关此模块何时实际发布的更多新闻。


K
Kunal Kapadia

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

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

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


F
Froxz

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

休息我们所有的功能。


A
Alireza

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

ng-route 是核心 AngularJS 的一部分,因此它更简单,给您的选择更少...

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

另外在使用的时候,别忘了使用:ngView ..

ng-ui-router 不同,但是:

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


v
vaheeds

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

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


R
Rajat-Systematix

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

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


佚名

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


K
KenHBS

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

ui-View 因此是最佳选择。