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

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

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

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

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

答案

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

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

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

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

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

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

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

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

更多信息:

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

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

从 ui-router 文档中

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

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

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

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

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/

在此处输入图片说明

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

ui-router 是创建的社区库,旨在尝试改进默认路由功能。

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

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

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

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

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

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

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

角 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 路由器

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

让我们休息所有功能。