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

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

Create view Products.html to load products

Create details.html to create product details:

Create app.js to manage routing and controllers:

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.