The Difference Between Angular-route and Angular-ui-router

The <kbd class="highlighted">ngRoute</kbd> module, which provides routing, deep linking services, and directives for AngularJS applications, is developed by the AngularJS team as part of the AngularJS core. The ui-router (angular-ui-router.js) is a powerful third-party module created to improve and enrich routing capabilities.

The ui-router provides some advanced features:

• It allows for nested views and multiple named views, which is useful for large applications with complex layouts.
• It uses state names for linking (e.g., ui-sref). If a state's URL configuration changes, all links to that state update automatically, which is helpful in large projects where URLs might change.
• It relies on state configuration objects and URL matchers rather than a decorator pattern, allowing routes to be defined and matched dynamically.
• States can map and store data, which can be passed between states via <kbd class="highlighted">$stateParams</kbd>.
• The current state can be accessed via the <kbd class="highlighted">$state</kbd> service provided by ui-router.

Architecturally, ngRoute uses the <kbd class="highlighted">$routeProvider</kbd> to configure routes, while ui-router uses the <kbd class="highlighted">$stateProvider</kbd> to define states. Here is a minimal example of state-based routing:

angular.module('myApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        template: '<h1>Home</h1>'
      });
  });

In short, ui-router extends the core routing concepts of <kbd class="highlighted">ngRoute</kbd> with advanced features that are particularly useful for larger applications.