AngularJS Routing

In this article, we will learn how to use Routing in AngularJS.

What is AngularJS Routing? We use routing when we want to navigate to different pages without reloading full application. In other words, we want the application to be a single page application with no page reloading.

You can use the ngRoute module. ngRoute module used to route application to different pages without reloading the full application.

Getting Started

First of all, install AngularJS and AngularJS.Route scripts in your application using Nuget Package Manager.

After installing as you can see there is one directory(Scripts) created in your application which has all installed scripts.

Or you can add references direct from googleapis.com like this.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

Now let’s add a new AngularJS Module using right click and click add new item and select AngularJS Module and give name and click Add.

Add define routes in angular module

var app = angular.module("app", ["ngRoute"]);

app.config(function ($routeProvider) {

$routeProvider

.when("/", {

templateUrl: "index.html"

})

.when("/employee", {

templateUrl: "employee.html"

})

.when("/customer", {

templateUrl: "customer.html"

})

.when("/user", {

templateUrl: "user.html"

});

});

With the $routeProvider you can define what page to display when a user clicks a link. Define the $routeProvider using the config method of your application. Work registered in the config method will be performed when the application is loading.

 

Now let’s add a new HTML page and add reference of AngularJS and AngularJS Route scripts.

Add reference of module on HTML page

<script src="App/app.js"></script>

Test the application and click on Dashboard link. As you can see browser change with the name.

Click on customer dashboard

Work with Controller

Let’s check how to work with controller. First create a new controller using right click on Add new item and select controller and give appropriate name.

Let me post my controller’s code here

'customerCtrl'

(function () {

'use strict';

angular

.module('app')

.controller('customerCtrl', customer);

customer.$inject = ['$scope'];

function customer($scope) {

$scope.title = 'This is customer dashoboard. here you can manage customer data.';

activate();

function activate() { }

}

})();

'employeeCtrl'

 

(function () {

'use strict';

angular

.module('app')

.controller('employeeCtrl', employee);

employee.$inject = ['$scope'];

function employee($scope) {

$scope.title = 'This is employee dashoboard. here you can manage employee data.';

activate();

function activate() { }

}

})();

'userCtrl'

 

(function () {

'use strict';

angular

.module('app')

.controller('userCtrl', user);

user.$inject = ['$scope'];

function user($scope) {

$scope.title = 'This is user dashoboard. here you can manage user data.';

activate();

function activate() { }

}

})();

Now add controller name in module like this: 

Now add controller reference on HTML page.

Run the application

 

 

Conclusion

In this article we have learnt how to use routing in AngularJS and how to user controller with routing in AngularJS. If you have any question or comment, you can download attached sample or post me a comment in C# Corner comment section.