What do I Need?

To prepare your applications for routing, you need to include the AngularJS Route module.

Next, you must include ngRoute as a dependency in your application module.

var app = angular.module(“myApp”, [“ngRoute”]);

Your application now has access to the route module, which offers the $routeProvider.

Utilize the $routeProvider to set up various routes within your application.

app.config(function($routeProvider) {
$routeProvider
.when(“/”, {
    templateUrl : “main.htm”
})
.when(“/red”, {
    templateUrl : “red.htm”
})
.when(“/green”, {
    templateUrl : “green.htm”
})
.when(“/blue”, {
    templateUrl : “blue.htm”
});
});

Where Does it Go?

Your application requires a container to display the content provided by the routing, which is facilitated by the ng-view directive.

There are three distinct methods to incorporate the ng-view directive into your application.

Example:

Example:

<ng-view></ng-view>

Example:

An application can have only one ng-view directive, which will serve as the placeholder for all views provided by the routing.