How routing works in AngularJS? Difference between $routeProvider and ui-router.

Question

Anubhav Kumar · Answer

How Routing Works in AngularJS
AngularJS is a Single Page Application (SPA) framework. Routing allows you to
change views without reloading the page.
Core Idea
User changes the URL (e.g. /home)AngularJS detects the URL changeIt loads:
a template (HTML)a controller
Injects them into andlt;ng-viewandgt; or andlt;ui-viewandgt;
$routeProvider (ngRoute)
What it is
Built-in AngularJS routing moduleProvided by ngRouteURL-based routing only
How it works
Maps URL → template + controllerUses andlt;ng-viewandgt; as the outlet
Example
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'HomeCtrl'
        })
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'AboutCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
});
andlt;div ng-viewandgt;andlt;/divandgt;
Limitations
No nested viewsNo multiple viewsWeak state managementNot ideal for complex applications
ui-router (AngularUI Router)
What it is
Third-party routing libraryState-based routingMuch more powerful than ngRoute
How it works
Application is divided into states
Each state can have:
URLMultiple viewsNested statesResolved data
Uses andlt;ui-viewandgt; instead of andlt;ng-viewandgt;
ui-router Example
var app = angular.module('myApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html',
            controller: 'HomeCtrl'
        })
        .state('home.profile', {
            url: '/profile',
            templateUrl: 'profile.html',
            controller: 'ProfileCtrl'
        });
});
andlt;div ui-viewandgt;andlt;/divandgt;
Key Differences: $routeProvider vs ui-router
and 
Feature
$routeProvider
ui-router
Routing type
URL-based
State-based
Module
ngRoute (core)
ui.router (3rd-party)
View outlet
ng-view
ui-view
Nested views
No
Yes
Multiple views
No
Yes
State management
Weak
Strong
URL optional
Required
Optional
Data resolve
Basic
Advanced
Best for
Small apps
Large and complex apps
and 
Interview One-Line Summary
$routeProvider is simple URL-based routing suitable for small AngularJS apps, while
ui-router is a powerful state-based routing solution designed for complex applications with nested and multiple views.`
When to Use What?
Use $routeProvider:
Small appsSimple navigationOne view per page
Use ui-router:
Enterprise appsNested layoutsDashboardsChat apps (like WhatsApp Web-style UI)
and

interview

How routing works in AngularJS? Difference between $routeProvider and ui-router.

Anubhav Kumar

Can you answer this question?

1 Answers