This step by step guide will help you configure angular routing using angular route.
What is AngularJS and Routing?
AngularJS is the most popular and useful framework of client side development and its popularity is increasing day by day. Routing is simply navigating to the different pages of your application or we can refer pages as a views.
Angular routing configuration using angular route
This article is basically consist of two sections:
First section will focus on how you can configure routes in angular i.e how you can navigate between different views/pages of application.
Second section will focus on how you can enable HTML5 routing mode with angular the HTML5 routes/urls have no ‘#’ in the urls.
So there will be no styles in the sample application. So we will have a simple scenario where we will have a simple nav bar with two items and you can navigate between those two links. So lets start, index page look like this:
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>In this index page, we have nav bar with home and about menus. These links are not referring to any url right now. Also we have two templates i.e home.html and about.html. The home.html is as follows:
<div>
{{title}}
</div>As you can see that we have bind the title so that we can use its controller to get the value of title. The about.html file is:
<div>
{{title}}
</div>This is also same as home.html, but it will be bind to its own controller. Here is our initial app.js
var app=angular.module("app",[]);
app.controller("HomeController",function($scope){
$scope.title="I'm in home"
});
app.controller("AboutController",function($scope){
$scope.title="I'm in about"
});In this file we have configured our module with name “app”. Also two controllers ‘home’ and ‘about’ for “home.html” and “about.html” views respectively. But currently these views are not loading as we have not yet configured routing. So to configure routing we will need another module angular routing from angular site and we have to add that in our application lets see how to do it. You can get angular route library from angular website. So here are the steps you need to perform to configure routing.
Step 1: Adding Angular Route Script Reference In View
Add reference of angular-route.min.js file in your index.html.
Step 2: Adding Module Dependency On ngRoute
Add dependency to angular route in your app module in app.js file. You can do it as follows:
Step 3: Configuring Routing
Next is to configure routing, here is how you can configure it.
var app=angular.module("app",["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({redirectTo: "/home"});
});
app.controller("HomeController",function($scope){
$scope.title="I'm in home"
});
app.controller("AboutController",function($scope){
$scope.title="I'm in about"
});What we have done is added config section to our app.js file. The config function takes a function and in that function we have injected “$routeProvider” service which comes with angular route module. And then we are calling just “when” methods of $routeProvider to configure our routes. When takes first url then the template url and you can also provide controller which will be responsible for that view. So you can chain as many as you need. And at the end you can provide default route with “otherwise” and you can redirect it to any route. In my case i have redirected to “/home” url. So if any invalid url is applied to your base url it will be redirected to that url.
Step 4: Adding Routes In View
This is the last step, now you need to add route in your index.html with your anchor tags. Here is how you can do that:
You need to just point to the routes which you have configured in your app.js config method.
Here is how application looks like upon launching.
Notice the url it is pointing to home by default. So by default home.html is loaded. So lets click on “about” so when clicking on “about” you can see following screen on your browser. Notice the url it is pointing to “about” now. You can also see that text is “I’m in about” which has come through its “about controller”, which we had specified while configuring route. So you can provide the controller with each template in your routing configuration and the controller will take hold of that template. That’s cool; isn’t it? You might have noticed that in the url we have a trailing “#” sign. Now if you want to get rid of that, or you want to use HTML5 routes where there is no # sign you can also do that.
Enable HTML5 Routing:
To enable html5 routing you need to do following steps:
Step 1: Enabling HTML5 Routing Mode
Go to the app.js files and inject “$locationProvider” service in config method. And then at the end of routing add following line:
$locationProvider.html5Mode(true);Here is the app.js code after enabling html5 mode:
var app=angular.module("app",["ngRoute"]);
app.config(function ($routeProvider,$locationProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({redirectTo: "/home"});
$locationProvider.html5Mode(true);
});
app.controller("HomeController",function($scope){
$scope.title="I'm in home"
});
app.controller("AboutController",function($scope){
$scope.title="I'm in about"
});
Step 2: Modify Route URL In Views
Now you need to modify routes in index.html file Here is the file after editing urls.
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<base href="http://localhost:8058/AngularRouting/" />
</head>
<body>
<nav>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>Notice that we have removed “#/” from urls of li. If you are using angular version prior then 1.3 you need all this and you have configured html5 routing. But if you are using angular version 1.3 or above you need to add extra line in the head section. Notice that i have added extra line in the head section and that is:
<base href="http://localhost:8058/AngularRouting/" />In angular 1.3 and so on versions, you need to add base path in the head section. If you do not do this you the html5 mode will not work and your application will also not be working. So you need to add base path in my case it is as shown in the code. So you can configure html5 mode in production by including static base tag in the index.html. Now you can see here there is no # in url. You can get the source code here: Download Source Code
Summary
So in this article you have seen step by step guide of configuring routes in angular application using angular-route. There are also some third party libraries which you can use to configure routes, the most popular one is ui-router. It has all the basic functionality which angular-route provides also have some extra and most useful functionality. You have also seen in this article that how you can remove ‘#’ in from the URLs by turning on HTML5 routing mode. If you have any queries feel free to comment below.