Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

AngularJS Pass Value from One Controller to Another Controller

Jul 26, 2016
Introduction

Here I will explain how to use
AngularJS to pass / send value from one controller to another controller with example or AngularJS pass data between controllers with example or use services in AngularJS to send values from one controller to another controller with example or AngularJS share data between controllers with example. In AngularJS by creating services we can pass values from one controller to another controller.


To send values from one controller to another controller we need to create custom service with required values and inject that service into respective controllers to access those values in AngularJS for that we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Angularjs Pass Values from One Controller to Another Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('angularApp', [])
// Creating New Service
app.service("sampleService", function () {
this.user = { name: 'Suresh Dasari', Location: 'Chennai' }
this.designation='Team Leader'
})
// First Controller with Custom Service
app.controller("angCtrl1", function ($scope,sampleService) {
$scope.empname = sampleService.user.name;
$scope.emplocation = sampleService.user.Location;
$scope.emprole = sampleService.designation;
$scope.changevals = function () {
sampleService.user.Location = "Hyderabad";
sampleService.designation = "Technical Lead Development";
$scope.emplocation = sampleService.user.Location;
$scope.emprole = sampleService.designation;
}
});
// Second Controller with Custom Service
app.controller("angCtrl2", function ($scope,sampleService) {
$scope.ulocation = sampleService.user.Location;;
$scope.urole = sampleService.designation;
$scope.updatevals = function () {
$scope.ulocation = sampleService.user.Location;
$scope.urole = sampleService.designation;
}
});
</script>
</head>
<body ng-app="angularApp">
<div ng-controller="angCtrl1">
<div><b>User Details - Controller 1</b></div>
<p>Name : {{empname}}</p>
<p>Location : {{emplocation}}</p>
<p>Designation : {{emprole}}</p>
<input type="button" value="Change Values" ng-click="changevals()" />
</div>
<br />
<div ng-controller="angCtrl2">
<div><b>User Details - Controller 2</b></div>
<input type="button" value="Change Values" ng-click="updatevals()" />
<p>Location : {{ulocation}}</p>
<p>Designation : {{urole}}</p>
</div>
</body>
</html>

Demo

Following is the demo to send values from one controller to another controller using AngularJS.


AngularJS Pass Value from One Controller to Another Controller

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.