AngularJS Routing Example and Single Page View Tutorial

Abhigyan Singh 12th Jul 2020

In this tutorial I will tell you what is routing in angularjs, how to implement routing in angularjs and how to manage different views in on angular app. It means that we can display multiple view in a single page. In my previous Tutorial, we have learnt "AngularJS Tutorial RESTful JSON Parsing".

Now we will see AngularJs Routing and a single page view.

What is routing in angularjs:

The magic of routing in angularjs means we will stay on one page and without reloading the page we will load other views to it. Routing helps you in dividing your application in logical views and bind different views to Controllers.

How to implement routing in angularjs:

To implement routing in angularjs steps are as follows:

1.    Include angular-route library in you angularjs application, you can find the the library here https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js

2.    We are going to use $routeProvider service in out app.js

3.    Write routings using .when and otherwise methods to declare view file and controller name for the file

4.    Add ng-view in main index file so that all views will be loaded in ng-view.

5.    Once you load the application you can navigate to different view without page being reloaded # manages all the views of app.

To implement views just create separate parts of your application view and put them in a folder named views or whatever folder name you want to give.

Directives and methods used in this application:

ng-app: ng-app directives is used to show the root element of angular js. All angular js application must have only have ng-app directive.

angular.module: A module is a collection of services, directives, controllers, filters, and configuration information.

$scope: $scope refers to application which is to use the studentController object.

app.controller: its used to declare a controller.

controller: AngularJS controllers control the data of AngularJS applications.

$routeProvider: $routeProvider is the key service which set the configuration of urls, map them with the corresponding html page or ng-template, and attach a controller with the same.

ng-view: ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

Detailof the steps are given below:

First create index.html file to load ng-app and ng-view

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><span class="navbar-brand"><img class="brand" src="img/logo.png" height="20" /> Flipkart Shopping (AngularJS Routing and Views Tutorial)</span></div>
</div>
</nav>
<div class="container"></div>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>

Create view Products.html to load products

<div class="row">
<div class="col-xs-3"><img class="img-responsive" src="https://img5a.flixcart.com/image/mobile/p/q/a/letv-le-1s-eco-na-400x400-imaegcqyaamyt9gx.jpeg" /></div>
</div>
<h4>LeEco Le 1s Eco Gold 32 GB</h4>
<h4>Price: Rs 9,999</h4>
<a href="#/Details">View More</a>

Create details.html to create product details:

<div class="row">
<div class="col-xs-3"><a class="btn btn-primary" href="#/">Home</a>
<img class="img-responsive" src="https://img5a.flixcart.com/image/mobile/p/q/a/letv-le-1s-eco-na-400x400-imaegcqyaamyt9gx.jpeg" /></div>
</div>
<h4>LeEco Le 1s Eco Gold 32 GB</h4>
<h4>Price: Rs 9,999</h4>
Specs:
<ul>
<li>3GB RAM | 32GB ROM</li>
<li>5.5 inch FHD Display</li>
<li>Fingerprint Scanner</li>
<li>Metal Unibody</li>
</ul>
<b>WARRANTY</b> 1 year manufacturer warranty for Phone and 6 months warranty for in the box accessories
<a class="btn btn-primary" href="https://www.flipkart.com/leeco-le-1s-eco-gold-32-gb/p/itmehw7t45yzkdhg?pid=MOBEHW7TE727ZPQA&amp;otracker=hp_omu_Great+Offers+on+Smartphones_2_27fbe6fb-4ea5-4778-ad5e-e2287c0949f1_3">Buy Now</a>

Create app.js to manage routing and controllers:

var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider
.when('/Products', {
templateUrl: 'views/Products.html',
controller: 'ProductController'
})
.when('/Details', {
templateUrl: 'views/Details.html',
controller: 'DetailsController'
})
.otherwise({
redirectTo: '/Products'
});
});

app.controller('ProductController', function($scope){
//Controller Here
$scope.message = "Products";
});

app.controller('DetailsController', function($scope){
//Controller Here
$scope.message = "Details";
});

You can view the live tutorial on link Above or Download your copy. Id you have any doubt feel free to write us on comment section.

Authored By Abhigyan Singh

He is a continuous blogger and has blogged on different topic. He loves to surf Internet and always trying to get new Idea about new Technology and Innovations and sharing these great information to all the technology lovers.

Also on DiscussDesk