Different way to share data between controllers in angular js

How to share data between controllers in
AngularJs

Some time we need to share data between controllers. Today I am showing
different way to sharedata between controllers.
Share data between controllers in
AngularJs with $rootScope
Plnkr - http://plnkr.co/edit/QFH62vsWwvJTuCxfNE46?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs with $rootScope</title>
<link rel="stylesheet"
href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></scri
pt>
<script>
var app = angular.module("myApp", []);
app.run(function($rootScope) {
$rootScope.userData = {};
$rootScope.userData.firstName = "Ravi";
$rootScope.userData.lastName = "Sharma";
});
app.controller("firstController", function($scope, $rootScope) {
});
app.controller("secondController", function($scope, $rootScope) {
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<br>
<input type="text" ng-model="userData.firstName">
<br>
<input type="text" ng-model="userData.lastName">
<br>
<br>First Name: <strong>{{userData.firstName}}</strong>
<br>Last Name : <strong>{{userData.lastName}}</strong> </div>
<hr>

<div ng-controller="secondController"> Showing first name and last name on
second controller: <b> {{userData.firstName}} {{userData.lastName}}</b>
</div>
</body>
</html>
Example

AngularJs using factory
Plnkr - http://plnkr.co/edit/O3h3Vh1nGjo810vjvJA4?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs using factory</title>
<script
pt>
<script>
app.factory('userFactory', function() {
return {
userData: {
firstName: '',
lastName: ''
}
};
});
app.controller("firstController", function($scope, userFactory) {
$scope.data = userFactory.userData;
$scope.data.firstName="Ravi";
$scope.data.lastName="Sharma";
});
app.controller("secondController", function($scope, userFactory) {
});
</script>
</head>
<br>
<input type="text" ng-model="data.firstName"><br>
<input type="text" ng-model="data.lastName">
<br>

<br>First Name: <strong>{{data.firstName}}</strong>
<br>Last Name : <strong>{{data.lastName}}</strong>
</div>
<hr>
second controller: <b> {{data.firstName}} {{data.lastName}}</b> </div>
</body>
</html>
Example

AngularJs with Factory Update Function
Plnkr - http://plnkr.co/edit/bXwR4SOP3Nx9zlCVFUFe?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs with Factory Update
Function</title>
<script
pt>
<script>
return {
userData: {
firstName: '',
lastName: ''
},
updateUserData: function(first, last) {
this.userData.firstName = first;
this.userData.lastName = last;
}
};
});
$scope.updateInfo = function(first, last) {
userFactory.updateUserData(first, last);
};
});
});
</script>
</head>

<br>
<input type="text" ng-model="firstName"><br>
<input type="text" ng-model="lastName"><br>
<button ng-click="updateInfo(firstName,lastName)">Update</button>
<br>
<br>First Name: <strong>{{data.firstName}}</strong>
<br>Last Name : <strong>{{data.lastName}}</strong>
</div>
<hr>
second controller: <b> {{data.firstName}} {{data.lastName}}</b> </div>
</body>
</html>
Example

AngularJs with factory and $watch
function
Plnkr -http:/plnkr.co/edit/rQcYsI1MoVsgM967MwzY?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs with factory and $watch
function</title>
<script
pt>
<script>
var empData = {
FirstName: ''
};
return {
getFirstName: function () {
return empData.FirstName;
},
setFirstName: function (firstName,lastName) {
empData.FirstName = firstName;
}
};
});
$scope.firstName = '';
$scope.lastName = '';
$scope.$watch('firstName', function (newValue, oldValue) {
if (newValue !== oldValue)
userFactory.setFirstName(newValue);
});

});
$scope.$watch(function ()
{ return userFactory.getFirstName();
},
function (newValue, oldValue) {
if (newValue !== oldValue)
$scope.firstName = newValue;
});
});
</script>
</head>
<br>
<input type="text" ng-model="firstName"><br>
<br>
<br>First Name: <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="secondController">
Showing first name and last name on second controller: <b> {{firstName}}
</b> </div>
</body>
</html>
Example

AngularJs with complex object using
$watch
Plnkr - http://plnkr.co/edit/8gQI7im5JjF6Zb9tL1Vb?p=preview
<!DOCTYPE html>
<html>
<head>
<title>Share data between controllers in AngularJs with complex object
using $watch</title>
<script
pt>
<script>
var empData = {
FirstName: '',
LastName: ''
};
return {
getEmployee: function() {
return empData;
},
setEmployee: function(firstName, lastName) {
empData.FirstName = firstName;
empData.LastName = lastName;
}
};
});

$scope.Emp = {
firstName: '',
lastName: ''
}
$scope.$watch('Emp', function(newValue, oldValue) {
if (newValue !== oldValue) {
userFactory.setEmployee(newValue.firstName,
newValue.lastName);
}
}, true); //JavaScript use "reference" to check equality when we
compare two complex objects. Just pass [objectEquality] "true" to $watch
function.
});
$scope.Emp = {
firstName: '',
firstName: ''
}
$scope.$watch(function() {
return userFactory.getEmployee();
}, function(newValue, oldValue) {
if (newValue !== oldValue) $scope.Emp.firstName =
newValue.FirstName;
$scope.Emp.lastName = newValue.LastName;
}, true);
});
</script>
</head>
<br>
<input type="text" ng-model="Emp.firstName">
<br>
<input type="text" ng-model="Emp.lastName">
<br>
<br>
<br> First Name: <strong>{{Emp.firstName}}</strong>
<br>Last Name: <strong>{{Emp.lastName}}</strong> </div>
<hr>
second controller: First Name - <strong> {{Emp.firstName}} </strong>, Last
Name: <strong>{{Emp.lastName}}</strong> </div>
</body>
</html>
Example

Thanks
www.codeandyou.com
http://www.codeandyou.com/2015/09/share-data-
between-controllers-in-angularjs.html
Keywords - How to share data between controllers in AngularJs, share data in
angularjs, share data between controllers

Different way to share data between controllers in angular js

More Related Content

What's hot (20)

Similar to Different way to share data between controllers in angular js (20)

More from codeandyou forums (15)

Recently uploaded (20)

Different way to share data between controllers in angular js