---
title: "How routing works in AngularJS? Difference between $routeProvider and ui-router."  
description: "How routing works in AngularJS? Difference between $routeProvider and ui-router."  
author: "Anubhav Sharma"  
published: 2025-12-29  
updated: 2025-12-29  
canonical: https://www.mindstick.com/interview/34430/how-routing-works-in-angularjs-difference-between-routeprovider-and-ui-router  
category: "angular js"  
tags: ["angular js"]  
reading_time: 5 minutes  

---

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

> ## 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

1. User changes the URL (e.g. `/home`)
2. AngularJS detects the URL change
3. It loads:

   - a **template (HTML)**
   - a **controller**

4. 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

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

```html
<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

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

```html
<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)

## Answers

### Answer by Anubhav Sharma

> ## 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

1. User changes the URL (e.g. `/home`)
2. AngularJS detects the URL change
3. It loads:

   - a **template (HTML)**
   - a **controller**

4. 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

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

```html
<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

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

```html
<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)


---

Original Source: https://www.mindstick.com/interview/34430/how-routing-works-in-angularjs-difference-between-routeprovider-and-ui-router

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.