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

ngRoute (angular-route.js)和ui-router (angular-ui-router.js)模块之间的区别是什么?

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

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


Ui-router是一个第三方模块,功能非常强大。它支持普通ngRoute所能做的一切,以及许多额外的函数。

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

ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections. ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change. There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand. states allow you to map and access different information about different states and you can easily pass information between states via $stateParams. You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on 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/#/


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

Ui-router是一个社区库,创建它是为了改进默认路由功能。

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

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


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

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

来自ui-router文档:

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

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

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


如果你想使用ngRoute范例中实现的嵌套视图功能,可以尝试angular-route-segment -它旨在扩展ngRoute,而不是取代它。


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

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

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


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

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

Ui-router是一个独立的模块,它克服了ngRoute的问题。主要是嵌套/复杂视图。

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

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

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


ngRoute是Angular团队构建的一个模块,提供基本的客户端路由功能。这个模块为路由提供了一个相当强大的基础,并且可以很容易地构建在此基础上,从而提供可靠的路由功能,如本文所示(一定要阅读Ward Bell和作者Ben Nadel之间的评论——他们都是Angular的专业人士)。

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

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

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

Named views are another additional feature of ui-router. With ngRoute, you can only have a single ngView directive on a page, whereas with named views in ui-router you can specify multiple ui-view directives, and then each state is able to affect the template and controller of the names views. A super simple example of this would be to have the main content of your app be the primary view, and then to also have a footer bar that would be a separate ui-view. In this scenario, the footer's controller no longer has to listen for state/route changes.

ngRoute和ui-router的比较可以在这个播客中找到。

让事情变得更复杂的是,请密切关注Angular团队期待为Angular 1.5和2.0版本发布的新的“官方”路由模块。这将取代ngRoute模块。这里是新路由器模块的当前文档——由于实现还没有最终确定,所以在这篇文章中它是相当稀疏的。看这里更多的新闻,当这个模块将实际发布。


UI路由器让你的生活更轻松!你可以通过将它注入到你的AngularJS应用中来添加它…

ng-route是AngularJS核心的一部分,所以它更简单,给你的选择更少…

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

另外,在使用它的时候,不要忘记使用:ngView ..

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

https://github.com/angular-ui/ui-router但给你更多的选择....


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

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

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

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


AngularUI Router是AngularJS的路由框架,它允许你将接口的各个部分组织成一个状态机。不同于Angular ngRoute模块中的$route服务,它是围绕URL路由组织的,UI-Router是围绕状态组织的,状态可能会附加路由和其他行为。

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


角1.倍

ng-route:

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

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

Ex:

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

ui-route:

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

Ui-router:基于状态的路由

Ex:

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

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

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

ng-router, ui-router


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

让我们休息一下。


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


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

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


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

ui-View因此是最好的选择。