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

Question

Anubhav Sharma · 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 change
It loads:
- a template (HTML)
- a controller
Injects them into <ng-view> or <ui-view>

`$routeProvider` (ngRoute)

What it is

Built-in AngularJS routing module
Provided by ngRoute
URL-based routing only

How it works

Maps URL → template + controller
Uses <ng-view> 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'
        });
});

<div ng-view></div>

Limitations

No nested views
No multiple views
Weak state management
Not ideal for complex applications

`ui-router` (AngularUI Router)

What it is

Third-party routing library
State-based routing
Much more powerful than ngRoute

How it works

Application is divided into states

Each state can have:

URL
Multiple views
Nested states
Resolved data

Uses `<ui-view>` instead of `<ng-view>`

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'
        });
});

<div ui-view></div>

Key Differences: `$routeProvider` vs `ui-router`

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 & complex apps

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 apps
Simple navigation
One view per page

Use ui-router:

Enterprise apps
Nested layouts
Dashboards
Chat apps (like WhatsApp Web-style UI)

interview

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

Can you answer this question?

1 Answers

How Routing Works in AngularJS

Core Idea

$routeProvider (ngRoute)

What it is

How it works

Example

Limitations

ui-router (AngularUI Router)

What it is

How it works

Uses <ui-view> instead of <ng-view>

ui-router Example

Key Differences: $routeProvider vs ui-router

Interview One-Line Summary

When to Use What?

`$routeProvider` (ngRoute)

`ui-router` (AngularUI Router)

Uses `<ui-view>` instead of `<ng-view>`

Key Differences: `$routeProvider` vs `ui-router`