Menu
I'm planning to use AngularJS in my big applications. So I'm in the process to find out the right modules to use.
What is the difference between ngRoute (angular-route.js) and ui-router (angular-ui-router.js) modules?
In many articles when ngRoute is used, route is configured with $routeProvider. However, when used with ui-router, route is configured with $stateProvider and $urlRouterProvider.
Which module should I use for better manageability and extensibility?
211
Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.
The ui-router is effective for the larger application because it allows nested-views and multiple named-views, it helps to inherit pages from other sections. In the ngRoute have to change all the links manually that will be time-consuming for the larger applications, but smaller application nrRoute will perform faster.
Angular RoutinglinkIn a single-page app, you change what the user sees by showing or hiding portions of the display that correspond to particular components, rather than going out to the server to get a new page.
ngRoute is a module developed by the AngularJS team which was earlier part of the AngularJS core.
ui-router is a framework which was made outside the AngularJS project to improve and enhance routing capabilities.
From the ui-router documentation:
AngularUI Router is a routing framework for AngularJS, which allows you to organize the parts of your interface into a state machine. Unlike the $route service in Angular core, which is organized around URL routes, UI-Router is organized around states, which may optionally have routes, as well as other behavior, attached.
States are bound to named, nested and parallel views, allowing you to powerfully manage your application's interface.
Neither of them is better, you will have to chose the most appropriate for your project.
However, if you plan to have complex views in your application and you would like to deal with the "$state" notion. I recommend you to chose ui-router.
32
ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions.
Here are some common reason ui-router is chosen over 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.
In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.
More Information:
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
