Routing is one of the main features of the AngularJS framework, which is useful for creating a single page application (also referred to as SPA) with multiple views. It routes the application to different pages without reloading the application. In Angular, the ngRoute module is used to implement Routing. The ngView, $routeProvider, $route, and $routeParams are the different components of the ngRoute module, which help for configuring and mapping URL to views.
n AngularJS, routing refers to the mechanism that allows you to create Single Page Applications (SPAs) by dynamically changing the content displayed on the page based on the URL. It enables the navigation between different views or components without the need for a full page reload.
AngularJS uses the $routeProvider service to set up routing. You define routes that map to specific controllers and templates, and AngularJS handles the rest. When the user navigates to a specific URL, the corresponding route is matched, and the associated controller and template are loaded, updating the view without requiring a full page reload.
Here’s a basic example of configuring routing in AngularJS:
app.config(function($routeProvider) {
$routeProvider
.when(‘/’, {
templateUrl: ‘home.html’,
controller: ‘HomeController’
})
.when(‘/about’, {
templateUrl: ‘about.html’,
controller: ‘AboutController’
})
.when(‘/contact’, {
templateUrl: ‘contact.html’,
controller: ‘ContactController’
})
.otherwise({
redirectTo: ‘/’
});
});
app.controller(‘HomeController’, function($scope) {
// Controller logic for the home page
});
app.controller(‘AboutController’, function($scope) {
// Controller logic for the about page
});
app.controller(‘ContactController’, function($scope) {
// Controller logic for the contact page
});
In this example, the routes are defined for the home, about, and contact pages. When the user navigates to these URLs, AngularJS will load the corresponding templates and controllers, updating the content dynamically.