Wednesday, 15 June 2016

Understanding routing in Angular JS

Leave a Comment
Hi every one welcome again.Thank u for suggestions for previous posts.In this tutorial i am going to teash you about how routing is done in angular(Specially in single page applications it is very important).
Description:
In general meaning of routing is "navigating from one page to another page".But in single page applications also we need to route from one page to another page without loading of entire page.
1.In angular js we use 'ngRoute' Module.
2.Routing is also very important in single page applications.
3.ngRoute module routes your angular application to different pages in entire application without reloading page.
4.All this is achieved by internal functions calling how great it is.Due to this the page loading speed and performance of application and the burdon on server also reduced.
5.Implementing routing in Angualr applications is very easy.
Lets see how to implement routing in angular single page applications.

How to implement Routing in Angular JS

1.Off course in this tutorial also i am explaining with a sample application.
2.Before going to applications let look at some basics of routing.

Step 1: Add angular routing reference files to your project.

1.Add angular routing file in _Layout.cshtml page along with angular.js file.
2.See the required files in _Layout page.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <!--include angular-route.js file -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js"></script>

Step 2: add Controllers and corresponding views

1.Here i created a RoutingController and created two Actions methods to display the corresponding view (page1.cshtml,page2.cshtml).
2.After that we must add ng-Route dependency to angular applications when application initilizes.
3.check below syntax:
var app = angular.module("myApp", ["ngRoute"]);

now our applicaton is have access to the routing mdule.to achieve routing angular provides built in routing service.
4.Your angular application needs a container to put the content of the pages that are provided by routing.
5.we can display the container using 'ng-view' directive.
6.Syntax of the ng-view container is like below
syntax:
<div ng-view></div>
	<ng-view></ng-view>
	<div class="ng-view"></div>
7.Create another controller and name it as HomeController and add Index action and corresponding view.
8.Replace the Index.cshtml view code with the following code.
@{
    ViewBag.Title = "Index";
}
<h2>Home page</h2>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <!--include angular-route.js file -->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.js"></script>
    <script type="text/javascript">
        //add 'ngRoute' as dependency to the application
        var app = angular.module('app', ['ngRoute']);
        //Now your application has access to route module..
        //which provides $routeProvider service helps for routing
        app.config(function ($routeProvider) {
            $routeProvider
			.when('/page1', {
			    templateUrl: "Routing/Page1",   //we can add controllers to views also
			    controller: "Page1Controller"
			})
			.when('/page2', {
			    templateUrl: "Routing/Page2",
			    controller: "Page2Controller"
			});
        });
        app.controller('Page1Controller', function ($scope) {
            $scope.msg1 = "This is page 1 buddy!";
        });
        app.controller('Page2Controller', function ($scope) {
            $scope.msg2 = "You are in page 2 Dude";
        });
    </script>
    <div class="container" ng-app="app">
        <div class="jumbotron">
        <h1>This is Default page</h1>
            <p>Click on below buttons to route to another pages</p>
        </div>
        <a href="/#/" class="btn btn-default">Home page</a>
        <a href="/#/page1" class="btn btn-default">page1</a>
        <a href="/#/page2" class="btn btn-default">page2</a>
        <div ng-view></div>
    </div>
9.With help of When method we defined the route of the application.
10.And i also added the controller for two views and passed the $scope.msg1,$scope.msg2 and displayed in page(you can check by downloading the application below).
11.We can also add controllers to views as shown i the application.
12.Code of respective views are as follows:
page1.cshtml:
@{
    ViewBag.Title = "Page1";
    Layout = null;
}
<div class="container" ng-controller="Page1Controller">
    <div class="jumbotron">
        <h1>{{msg1}}</h1>
        <p>
            This is opened because you clicked on Page1 link
        </p>
    </div>
    <p>This is how routing works Man</p>
</div>
page2.cshtml:
@{
    ViewBag.Title = "Page2";
    Layout = null;
}
<div class="container" ng-controller="Page2Controller">
    <div class="jumbotron">
        <h1>{{msg2}}</h1>
        <p>
            This is opened because you clicked on Page2 link
        </p>
    </div>
    <p>This is how routing works Man</p>
</div>

After running of application you will better understand the routing.The pages are loaded to the ng-view container without refresh of the current page.and the scope values are assigned after loading.

Understanding routing in Angular JS
Click on the page1 and page 2 links the output will be like this.

Understanding routing in Angular JS

Download the osurce code Source code

Conclusion:

I hope you like this post.i always welcome for any suggestions from you.Please subscribe and follow this site for valuable daily updates.


0 comments:

Post a Comment