[英]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-router 一起使用时,路由配置为$stateProvider 和 $urlRouterProvider 。
我应该使用哪个模块以获得更好的可管理性和可扩展性?
ui-router是一个第三方模块,非常强大。 它支持普通 ngRoute 可以做的一切以及许多额外的功能。
以下是选择 ui-router 而不是 ngRoute 的一些常见原因:
ui-router 允许您根据状态名称在状态之间建立强类型链接。 当您使用ui-sref
构建链接时,在一处更改 url 会将每个链接更新为该状态。 对于 URL 可能会更改的大型项目非常有用。
还有装饰器的概念,可用于允许基于尝试访问的 URL 动态创建您的路由。 这可能意味着您无需事先指定所有路线。
状态允许您映射和访问有关不同状态的不同信息,并且您可以通过$stateParams
轻松地在状态之间传递信息。
您可以通过 ui-router 提供的$state
轻松确定您是处于某个状态还是某个状态的父级以调整模板中的 UI 元素(突出显示当前状态的导航),您可以通过在$rootScope
上设置它来公开它run
。
ui-router本质上是ngRouter,功能比较多,在sheet下就大不一样了。 这些附加功能对于大型应用程序非常有用。
更多信息:
ngRoute是 AngularJS 团队开发的一个模块,它是 AngularJS 核心的早期部分。
ui-router是一个框架,它是在 AngularJS 项目之外制作的,用于改进和增强路由功能。
来自 ui-router文档:
AngularUI Router 是 AngularJS 的路由框架,它允许您将界面的各个部分组织成一个状态机。 与 Angular 核心中的 $route 服务不同,它是围绕 URL 路由组织的,UI-Router 是围绕状态组织的,它可以选择附加路由以及其他行为。
状态绑定到命名的、嵌套的和并行的视图,使您能够有力地管理应用程序的界面。
它们都不是更好,您必须选择最适合您的项目的。
但是,如果您计划在您的应用程序中使用复杂的视图并且您想要处理“$state”概念。 我建议你选择 ui-router。
ngRoute 是一个 angular 核心模块,适用于基本场景。 我相信他们会在即将发布的版本中添加更强大的功能。
网址: https : //docs.angularjs.org/api/ngRoute
Ui-router 是一个贡献模块,它克服了 ngRoute 的问题。 主要是嵌套/复杂视图。
网址: https : //github.com/angular-ui/ui-router
ui-router 和 ngRoute 的一些区别
ngRoute 是核心 AngularJS 框架的一部分。
ui-router 是一个社区库,旨在尝试改进默认路由功能。
这是一篇关于配置/设置 ui-router 的好文章:
如果您想利用在 ngRoute 范式中实现的嵌套视图功能,请尝试angular-route-segment - 它旨在扩展 ngRoute 而不是替换它。
一般ui-router是工作在状态机制上的…… 举个简单的例子就可以理解:
假设我们有一个音乐库的大型应用程序(如 ..gaana 或 saavan 或任何其他)。 在页面底部,您有一个音乐播放器,它在页面的所有状态中共享。
现在假设您只需单击一些歌曲即可播放。 在这种情况下,只有那个音乐播放器状态应该改变而不是重新加载整个页面。 这可以通过 ui-router 轻松处理。
在 ngRoute 中,我们只附加了视图和控制器。
角度 1.x
ng-route 由 angularJS 团队开发,用于路由。
ng-route:基于 url(位置)的路由。
前任:
$routeProvider
.when("/home", {
templateUrl : "home.html"
})
ui-router 是由 3rd 方模块开发的。
ui-router :基于状态的路由
前任:
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
--> ui-router 允许嵌套视图
--> ui-router 比 ng-route 更强大
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 模块。 这是新路由器模块的当前文档 - 由于实施尚未最终确定,因此在本文发布时相当稀疏。 在此处观看有关此模块何时实际发布的更多新闻。
ngRoute 是一个基本的路由库,您可以在其中为任何路由指定一个视图和控制器。
使用 ui-router,您可以指定多个视图,包括并行视图和嵌套视图。 因此,如果您的应用程序需要(或将来可能需要)任何类型的复杂路由/视图,请继续使用 ui-router。
这是 AngularUI 路由器的最佳入门指南。
你必须知道的基本事情:ng-router 使用$location.path()
而 ui-router 使用$state.go
休息我们所有的功能。
ui路由器让您的生活更轻松! 您可以通过将它注入到您的应用程序中来将它添加到您的 AngularJS 应用程序中...
ng-route
是 AngularJS 核心的一部分,所以它更简单,给你的选择更少......
查看此处以更好地了解 ng-route: https : //docs.angularjs.org/api/ngRoute
同样在使用它时,不要忘记使用: ngView ..
ng-ui-router 不同,但:
https://github.com/angular-ui/ui-router但为您提供了更多选择....
AngularUI Router 是 AngularJS 的路由框架,它允许您将界面的各个部分组织成一个状态机。 与 Angular ngRoute 模块中的 $route 服务不同,它是围绕 URL 路由组织的,UI-Router 是围绕状态组织的,它可以选择性地附加路由以及其他行为。
ngRoute 是 Angular.js 团队开发的一个模块,它是 Angular 核心的早期部分。
ui-router 是一个框架,它是在 Angular.js 项目之外制作的,用于改进和增强路由功能。
1- ngRoute 由 angular 团队开发,而 ui-router 是第 3 方模块。 2- ngRoute 基于路由 URL 实现路由,而 ui-router 基于应用程序状态实现路由。 3- ui-router 提供了 ng-route 提供的所有内容以及一些附加功能,例如嵌套状态和多个命名视图。
ng-View
(由 AngularJS 团队开发)每页只能使用一次,而ui-View
(第三方模块)每页可以使用多次。
因此ui-View
是最好的选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.