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

Question

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

是什么区别(角route.js)ngRoute和UI的路由器(角-UI-router.js)模块？

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

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

Answer 1

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

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

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

• ui-router允许您根据状态名称在状态之间建立强类型链接.在一个地方更改网址会在您构建链接时更新指向该状态的每个链接ui-sref.对于URL可能更改的大型项目非常有用.

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

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

• 你可以很容易确定,如果你在你的模板中调整UI元素(高亮显示当前状态的导航)的状态的状态或者通过母公司$state通过UI路由器,你可以通过设置在其暴露提供$rootScope上run.

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

更多信息:

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

Answer 2

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

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

从ui-router 文档:

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

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

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

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

Answer 3

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/

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

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

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

Answer 7

Angular 1.x

ng-route:

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

ng-route: url(Location)路由.

例如:

$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-router, ui-router

Answer 8

ngRoute是由Angular团队构建的模块,提供基本的客户端路由功能.这个模块提供了一个相当强大的路由基础,并且可以非常容易地构建,以提供可靠的路由功能,如本博客文章中所示(请务必阅读Ward Bell和Ben Nadel之间的评论路径,作者 - 他们是几个Angular专业人士)

ui-router将焦点从以URL为中心的路由转移到应用程序"状态",这可能会也可能不会反映在URL中.

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

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

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

在这个播客节目中可以找到ngRoute和ui-router的良好比较.

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

Answer 9

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

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

这是AngularUI路由器的最佳入门指南.

Answer 10

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

让我们了解所有功能.

Answer 11

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

ng-route 作为核心AngularJS的一部分,所以它更简单,并为您提供更少的选项......

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

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

ng-ui-router不同但是:

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

Answer 12

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

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