$routeProvider

The $routeProvider is part of the ngRoute module, which is an official AngularJS module used for basic routing in AngularJS applications. It provides a simple and straightforward way to define routes using a configuration object. With $routeProvider, we can specify the URL pattern and associate it with a template and controller, making it a suitable choice for small to medium-sized projects with relatively simple routing requirements.

Syntax

var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
        .when('/routePath', {
            templateUrl: 'template.html',
            controller: 'ControllerName'
        })
        .otherwise({
            redirectTo: '/defaultPath'
        });
});

Example: The below example demonstrates the usage of $routeProvider in AngularJS. Here, when the user clicks on the NavBar links, the application renders the associated route page and displays the content accordingly.

Output

In AngularJS, as we create Single-Page Applications, we need to implement the routing of components to view those images without having full page reloads. This can be achieved with the most popular routing methods, i.e., $routeProvider (ngRoute) and $stateProvider (ui-router).

In this article, we will explore the $routeProvider and $stateProvider in AngularJS and understand their basic implementation with the help of examples, along with knowing the difference between these two methods