---
title: "Routing in Angular JS"
description: "Routing in AngularJS is a core feature that allows you to build single-page applications (SPAs) by defining different views for different URLs."
author: "Anubhav Sharma"
published: 2024-05-19
updated: 2024-05-19
canonical: https://www.mindstick.com/articles/335863/routing-in-angular-js
category: "angular js"
tags: ["angular js", "javascript framework", "front-end development"]
reading_time: 2 minutes
---
# Routing in Angular JS
Routing in [AngularJS](https://www.mindstick.com/articles/1609/angularjs-binding) is a core feature that allows you to build single-page [applications](https://yourviews.mindstick.com/view/85123/latest-applications-and-innovations-in-sports-analytics-wearables-and-broadcasting) (SPAs) by defining different views for different URLs. This is accomplished using the **ngRoute** module or the more [advanced](https://yourviews.mindstick.com/story/1506/facts-that-prove-ancient-indian-science-was-incredibly-advanced) **ui-router** module. Below is a [detailed explanation](https://www.mindstick.com/forum/155584/give-a-detailed-explanation-of-delegates-in-c-sharp) of how [routing works](https://www.mindstick.com/interview/34430/how-routing-works-in-angularjs-difference-between-routeprovider-and-ui-router) in AngularJS and how you can implement it.
## Basic Routing with ngRoute
**Include the ngRoute module:** First, make sure to include the **angular-route.js** script in your HTML file. This can be downloaded from the AngularJS website or included via a CDN.
```javascript
```
**Define the module [dependency](https://www.mindstick.com/news/2358/apple-will-use-us-made-semiconductors-in-its-products-to-lessen-its-dependency-on-asia):** Include **ngRoute** as a dependency in your AngularJS [application](https://www.mindstick.com/blog/59/xaml-extensible-application-markup-language) module.
```javascript
var app = angular.module('myApp', ['ngRoute']);
```
**Configure the routes:** Use the **$routeProvider** to define your routes and associate them with [templates](https://www.mindstick.com/interview/34049/what-are-templates-in-knockout-js) and [controllers](https://www.mindstick.com/forum/155596/how-do-asynchronous-controllers-work-in-asp-dot-net).
```javascript
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
}]);
```
**Create the controllers:** Define the controllers for each route.
```javascript
app.controller('HomeController', ['$scope', function($scope) {
$scope.message = 'Welcome to the Home Page!';
}]);
app.controller('AboutController', ['$scope', function($scope) {
$scope.message = 'Learn more About Us!';
}]);
```
**Set up the templates:** Create the HTML templates for each route.
```html