AngularJS Routing
- Previous Page AngularJS Animations
- Next Page AngularJS Applications
ngRoute The module helps your application become a Single Page Application.
What is routing in AngularJS?
If you want to navigate to different pages within the application but also want the application to be a SPA (Single Page Application) without page reloads, you can use ngRoute Module.
ngRoute The module routes your application to different pages without reloading the entire application.
Instance
Navigate to "red.htm", "green.htm", and "blue.htm":
<body ng-app="myApp">
<p><a href="#/!">Home</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
What do I need?
To make your application ready for routing, you must include the AngularJS Route module:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Then, you must include ngRoute Add as a dependency in the application module:
var app = angular.module("myApp", ["ngRoute"]);
Now your application can access the routes that provide $routeProvider routing module.
Please use $routeProvider Configure different routes in the 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 did it go?
Your application needs a container to place the content provided by the route.
This container is ng-view .
The directive can be included in the application in three different ways. ng-view Directive:
Instance
<div ng-view></div>
Instance
<ng-view></ng-view>
Instance
<div class="ng-view"></div>
An application can have only one ng-view Directives, which will be placeholders for all views provided by the route.
$routeProvider
Using $routeProvider, you can define the page to be displayed when the user clicks on the link.
Instance
Define $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
using the application's config method definition $routeProvider. The methods defined in config work registered in the method.
controllers
Using $routeProviderYou can also define a controller for each "view".
Instance
Add controller:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" and "paris.htm" are ordinary HTML files where you can add AngularJS expressions, just like in other parts of the AngularJS application.
These files look like this:
london.htm
<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>
paris.htm
<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>
template
In the previous example, we are in $routeProvider.when method used in templateUrl attribute.
You can also use template attribute, which allows you to write HTML directly in the attribute value instead of referencing the page.
Instance
Write the template:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
otherwise method
In the previous example, we used $routeProvider the when method.
You can also use otherwise Method, it will become the default route when all other routes do not match.
Instance
If neither the "Banana" link nor the "Tomato" link is clicked, please tell them:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
- Previous Page AngularJS Animations
- Next Page AngularJS Applications
