我计划在我的大型应用程序中使用AngularJS。所以我正在寻找合适的模块来使用。
ngRoute (angular-route.js)和ui-router (angular-ui-router.js)模块之间的区别是什么?
在许多文章中,当使用ngRoute时,route是用$routeProvider配置的。然而,当与ui-router一起使用时,route使用$stateProvider和$urlRouterProvider配置。
我应该使用哪个模块来获得更好的可管理性和可扩展性?
我计划在我的大型应用程序中使用AngularJS。所以我正在寻找合适的模块来使用。
ngRoute (angular-route.js)和ui-router (angular-ui-router.js)模块之间的区别是什么?
在许多文章中,当使用ngRoute时,route是用$routeProvider配置的。然而,当与ui-router一起使用时,route使用$stateProvider和$urlRouterProvider配置。
我应该使用哪个模块来获得更好的可管理性和可扩展性?
当前回答
1- ngRoute是由angular团队开发的,而ui-router是第三方模块。ngRoute基于路由URL实现路由,而ui-router基于应用程序的状态实现路由。3- ui-router提供ng-route提供的所有功能,并加上一些额外的功能,如嵌套状态和多个命名视图。
其他回答
ng-View(由AngularJS团队开发)每个页面只能使用一次,而ui-View(第三方模块)每个页面可以使用多次。
ui-View因此是最好的选择。
UI路由器让你的生活更轻松!你可以通过将它注入到你的AngularJS应用中来添加它…
ng-route是AngularJS核心的一部分,所以它更简单,给你的选择更少…
看这里可以更好地理解ng-route: https://docs.angularjs.org/api/ngRoute
另外,在使用它的时候,不要忘记使用:ngView ..
Ng-ui-router是不同的,但是:
https://github.com/angular-ui/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-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/#/
通常ui-router工作在一个状态机制…可以用一个简单的例子来理解:
假设我们有一个大的音乐库应用程序(比如..Gaana或saavan或任何其他)。在页面的底部,你有一个音乐播放器在页面的所有状态下共享。
现在让我们假设你只是点击一些歌曲来播放。在这种情况下,只有音乐播放器的状态应该改变,而不是重新加载整个页面。这可以通过ui-router轻松处理。
而在ngRoute中,我们只是附加视图和控制器。