I am not clear about the difference between ngRoute in angular-route.js and ui-route in angular-ui-router.js. One thing I noticed is that the routeconfiguration is different.

Which one is the best and when should I use one over the other?

2 Answers

The $routeProvider service defines mappings from URL paths to routes defined by controllers, templates and views (ng-view). But it does not support multiple, sibling or nested views whereas the ui-router supports them.

A typical example of a nested view is a master-detail page. For example, when the user clicks a particular product in the list of Products displayed in the upper section of a page, the system displays the details of that product in the lower section of the same page. If you want to achieve this using ngRoute, you need to share a single view among two controllers, one for the master (list of Products) and one for the detail (Product details), and then show and hide the details as required. But this is not the ideal solution as you would like the master and detail to have their own view and controller.  The ui-router lets you define such complicated nested layouts in an elegant way.

The ui-router routing framework is a popular alternative to ngRoute. It was designed to enhance Angular's routing capabilities.

The ui-router is particularly useful in large apps where you want the ability to create nested views. The interface is organized into a state machine. When configuring the routing for your app, you are defining the various states your app supports, and telling the app what to do and display when a specific state is encountered.

The $route service in the Angular ngRoute module is organized around URL routes whereas the ui-router is organized around states, which may optionally have routes, and other behavior attached. The ui-router takes a different approach than ngRoute in that it changes the views based on the app state and not just the URL routes.