Routing is one of the main feature of AngularJS. Use routing, we can create Single Page Application (SPA). The ngRoute module routes our application to different html pages (or forms), without reloading the entire page itself. This way, it creates an impression of a modern day mobile application (even though it is actually a website at its core).
Here we will create a simple web app about a Product company. It will have Products, AboutUs and ContactUs pages. For creating AngularJS routes app, you will require an environment to run it. In this example I’m using Visual studio 2017 community edition to create my web application.
When declaring the AngularJS app variable, we must use ngRoute as a dependency in the app module. Using $routeProvider we can configure different routes for our app. templateUrl defines the URL for the form which should be displayed when the user navigates to a route, controller defines the controller for the view. $locationProvider removes the hash symbol from URL.
Script:
var app = angular.module("myApp", ["ngRoute"])
.config(['$locationProvider', function ($locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
}])
.config(function ($routeProvider) {
$routeProvider.caseInsensitiveMatch = true,
$routeProvider
.when("/", {
templateUrl: "Index.html",
})
.when("/Products", {
templateUrl: "Products.html",
controller:"productController"
})
.when("/AboutUs", {
templateUrl: "AboutUs.html"
})
.when("/ContactUs", {
templateUrl: "ContactUs.html"
})
.otherwise({
template: "<h2>Welcome to Routes</h2>"
});
});
app.controller("productController", function ($scope) {
$scope.products = [
{ "name": "Product 1", "price":"27000" },
{ "name": "Product 2","price":"35000" }
];
});
In your project, create three new HTML file with names:
- Products.html
- AboutUs.html
- ContactUs.html
Index.html: (with above script)
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title></title>
<base href="/Forms/" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous" type="text/css" />
<script>
var app = angular.module("myApp", ["ngRoute"])
.config(['$locationProvider', function ($locationProvider) {
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
}])
.config(function ($routeProvider) {
$routeProvider.caseInsensitiveMatch = true,
$routeProvider
.when("/", {
templateUrl: "Index.html",
})
.when("/Products", {
templateUrl: "Products.html",
controller:"productController"
})
.when("/AboutUs", {
templateUrl: "AboutUs.html"
})
.when("/ContactUs", {
templateUrl: "ContactUs.html"
})
.otherwise({
template: "<h2>Welcome to Routes</h2>"
});
});
app.controller("productController", function ($scope) {
$scope.products = [
{ "name": "Product 1", "price":"27000" },
{ "name": "Product 2","price":"35000" }
];
});
</script>
<style>
.menu {
padding: 10px !important;
background-color: #ff3f3f;
}
.menu a {
color: #fff;
cursor: pointer;
}
.menu a::after {
content: ' | ';
}
</style>
</head>
<body>
<div class="menu">
<a href="Products">Products</a>
<a href="AboutUs">About Us</a>
<a href="ContactUs">Contact Us</a>
</div>
<div style="padding:10px">
<hr />
<ng-view></ng-view>
</div>
</body>
</html>
The <ng-view></ng-view> will display the HTML template. Because we are using other pages as a template we don’t need to include the script in all those pages.
Products.html:
<h1>Our Products</h1>
<div ng-controller="productController">
<div ng-repeat="product in products">
<p>Name: {{product.name}} </p>
<p>Price: {{product.price | currency}} </p>
<hr/>
</div>
</div>
AboutUs.html:
<h1>About Us</h1> <p>Welcome to ParallelCodes. We provide tutorials on various Programming languages for free.</p>
ContactUs.html:
<h1>ContactUs</h1> <p>You can mail us at admin@parallelcodescom-79f94a.ingress-daribow.easywp.com</p>
Output:
If you too are using Visual Studio project to create this AngularJS application, include below code in web.config of your project. Using Rewrite rule you will be able to access routes directly, which won’t be possible by default. I will update this tutorial for other IDEs.
<system.webServer>
<rewrite>
<rules>
<rule name="ReWriteRule" stopProcessing="true">
<match url=".*"/>
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true"/>
</conditions>
<action type="Rewrite" url="/Forms/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
My Project structure:
