AngularJS Routing
The ngRoute module helps your application to become a Single Page
Application.
What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also
want the application to be a SPA (Single Page Application), with no page
reloading, you can use the ngRoute module.
The ngRoute module routes your application to different pages without
reloading the entire application.
Example:
Navigate to "[Link]", "[Link]", and "[Link]":
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = [Link]("myApp", ["ngRoute"]);
[Link](function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "[Link]"
})
.when("/red", {
templateUrl : "[Link]"
})
.when("/green", {
templateUrl : "[Link]"
})
.when("/blue", {
templateUrl : "[Link]"
});
});
</script>
</body>
To make your applications ready for routing, you must include the AngularJS
Route module:
<script src="[Link]
1.6.9/[Link]">
</script>
Then you must add the ngRoute as a dependency in the application module:
var app = [Link]("myApp", ["ngRoute"]);
Now your application has access to the route module, which provides
the $routeProvider.
Use the $routeProvider to configure different routes in your application:
[Link](function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "[Link]"
})
.when("/red", {
templateUrl : "[Link]"
})
.when("/green", {
templateUrl : "[Link]"
})
.when("/blue", {
templateUrl : "[Link]"
});
});
Your application needs a container to put the content provided by the
routing.
This container is the ng-view directive.
There are three different ways to include the ng-view directive in your
application:
Example:
<div ng-view></div>
Example:
<ng-view></ng-view>
Example:
<div class="ng-view"></div>
Applications can only have one ng-view directive, and this will be the
placeholder for all views provided by the route.
$routeProvider
With the $routeProvider you can define what page to display when a user
clicks a link.
Example:
Define a $routeProvider:
var app = [Link]("myApp", ["ngRoute"]);
[Link](function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "[Link]"
})
.when("/london", {
templateUrl : "[Link]"
})
.when("/paris", {
templateUrl : "[Link]"
});
});
Define the $routeProvider using the config method of your application. Work
registered in the config method will be performed when the application is
loading.
Controllers
With the $routeProvider you can also define a controller for each "view".
Example:
Add controllers:
var app = [Link]("myApp", ["ngRoute"]);
[Link](function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "[Link]"
})
.when("/london", {
templateUrl : "[Link]",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "[Link]",
controller : "parisCtrl"
});
});
[Link]("londonCtrl", function ($scope) {
$[Link] = "I love London";
});
[Link]("parisCtrl", function ($scope) {
$[Link] = "I love Paris";
});
[Link]
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>
[Link]
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in
Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
The otherwise method
In the previous examples we have used the when method of
the $routeProvider.
You can also use the otherwise method, which is the default route when none
of the others get a match.
