AngularJS Routing (ng-route)

AngularJS Routing (ng-route): The ngRoute module allows you to navigate to different parts of your application without the page having to reload. You can use the ngRoute module to route your application to various pages this way.

To make your Application for Routing Example

To prepare your applications for routing, you must include the Route module.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js">
</script>

AngularJS Routing (ng-route) Example

You must then include the ng-route as a dependency in the application module.

var app angular.module("exampleApp",["ngRoute']);

This enables your application to access the routing module, using “$routeProvider” to map various routes throughout your application.

Route Example

app.config(function($routeProvider) {
$routeProvider
when("/", {
Route module:
templateUrl: "main.htm"
})
when("/1", {
templateUrl: "File1.html"
})
when("/2",{
templateUrl : "File2.htm"
})
when(V3",
templateUrl: "File 3.html"
});
});

Container Example

AngularJS applications require a container (ng-view directive) to hold the data that he routing provides. Here we examine the ways to include this container.

<div ng-view></div>

<ng-view></ng-view>

<div class="ng-view"></div> </div>

Placeholder to view (ng-view)

AngularJS only allow one ng-view directive per application. This is the placeholder for all of the views provided by the route.

$ routeProvider

$routeProvider

Using the $routeProvider, you can delineate what page to display when a certain link is clicked.

$route Provider Example

var app = angular.module("exampleApp",
["ngRoute']);
app.config(function($routeProvider) {
$routeProvider
when("/", {
templateUrl: "main.htm"
})
when("/1", {
templateUrl: "File1.html"
})
when("/2", {
templateUrl: "File2.html"
});
});

$route Provider Example Output

NOTE: Click on any file links to read the data in the files.