How do you implement routing in an AngularJS application?

How do you implement routing in an AngularJS application?

Implementing routing in an AngularJS application involves using the ngRoute module, which is included in the AngularJS core library. This module provides the $routeProvider service, which allows you to define the routes for your application.

First, you need to include the ngRoute module as a dependency in your main AngularJS module. Then, you can use the $routeProvider service to define the routes for your application. This is typically done in the config() function of your main module.

For example, to define a route for the homepage of your application, you can use the when() method of $routeProvider:

$routeProvider.when('/', {
    templateUrl: 'home.html',
    controller: 'HomeController'
});

This tells AngularJS to use the template located at "home.html" and use the "HomeController" controller when the URL of the application is "/".

You can also use the otherwise() method of $routeProvider to define a default route for your application. For example:

$routeProvider.otherwise({
    redirectTo: '/'
});

This tells AngularJS to redirect to the "/" route if the requested route is not defined.

Once the routes are defined, you need to include the ng-view directive in your HTML template. This directive acts as a placeholder for the view that is associated with the currently active route.

For example, in the index.html file you can include the ng-view directive as follows:

<div ng-view></div>

With this setup, AngularJS will automatically update the content displayed inside the ng-view directive based on the currently active route, and invoke the appropriate controllers for each view.