Different way to share data between controllers in angular js
Download as DOCX, PDF2 likes4,322 views
The document describes several ways to share data between controllers in AngularJS, including using $rootScope to share data globally, creating a factory to share data, updating data in factories using functions, and watching for data changes using $watch. It provides code examples for each approach.
![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>](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-2-320.jpg)
![Share data between controllers in
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>
<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.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) {
$scope.data = userFactory.userData;
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<br>
<input type="text" ng-model="data.firstName"><br>
<input type="text" ng-model="data.lastName">
<br>](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-4-320.jpg)
![Share data between controllers in
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>
<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.factory('userFactory', function() {
return {
userData: {
firstName: '',
lastName: ''
},
updateUserData: function(first, last) {
this.userData.firstName = first;
this.userData.lastName = last;
}
};
});
app.controller("firstController", function($scope, userFactory) {
$scope.data = userFactory.userData;
$scope.updateInfo = function(first, last) {
userFactory.updateUserData(first, last);
};
});
app.controller("secondController", function($scope, userFactory) {
$scope.data = userFactory.userData;
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-6-320.jpg)
![Share data between controllers in
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>
<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.factory('userFactory', function() {
var empData = {
FirstName: ''
};
return {
getFirstName: function () {
return empData.FirstName;
},
setFirstName: function (firstName,lastName) {
empData.FirstName = firstName;
}
};
});
app.controller("firstController", function($scope, userFactory) {
$scope.firstName = '';
$scope.lastName = '';
$scope.$watch('firstName', function (newValue, oldValue) {
if (newValue !== oldValue)
userFactory.setFirstName(newValue);
});](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-8-320.jpg)
![Share data between controllers in
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>
<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.factory('userFactory', function() {
var empData = {
FirstName: '',
LastName: ''
};
return {
getEmployee: function() {
return empData;
},
setEmployee: function(firstName, lastName) {
empData.FirstName = firstName;
empData.LastName = lastName;
}
};
});](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-10-320.jpg)
![app.controller("firstController", function($scope, userFactory) {
$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.
});
app.controller("secondController", function($scope, userFactory) {
$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>
<body ng-app="myApp">
<div ng-controller="firstController">
<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>
<div ng-controller="secondController"> Showing first name and last name on
second controller: First Name - <strong> {{Emp.firstName}} </strong>, Last
Name: <strong>{{Emp.lastName}}</strong> </div>
</body>
</html>
Example](https://image.slidesharecdn.com/differentwaytosharedatabetweencontrollersinangularjs-150914140733-lva1-app6891/85/Different-way-to-share-data-between-controllers-in-angular-js-11-320.jpg)
Different way to share data between controllers in angular js
- 1. How to share data between controllers in AngularJs
- 2. 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>
- 3. <div ng-controller="secondController"> Showing first name and last name on second controller: <b> {{userData.firstName}} {{userData.lastName}}</b> </div> </body> </html> Example
- 4. Share data between controllers in 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> <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.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) { $scope.data = userFactory.userData; }); </script> </head> <body ng-app="myApp"> <div ng-controller="firstController"> <br> <input type="text" ng-model="data.firstName"><br> <input type="text" ng-model="data.lastName"> <br>
- 5. <br>First Name: <strong>{{data.firstName}}</strong> <br>Last Name : <strong>{{data.lastName}}</strong> </div> <hr> <div ng-controller="secondController"> Showing first name and last name on second controller: <b> {{data.firstName}} {{data.lastName}}</b> </div> </body> </html> Example
- 6. Share data between controllers in 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> <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.factory('userFactory', function() { return { userData: { firstName: '', lastName: '' }, updateUserData: function(first, last) { this.userData.firstName = first; this.userData.lastName = last; } }; }); app.controller("firstController", function($scope, userFactory) { $scope.data = userFactory.userData; $scope.updateInfo = function(first, last) { userFactory.updateUserData(first, last); }; }); app.controller("secondController", function($scope, userFactory) { $scope.data = userFactory.userData; }); </script> </head> <body ng-app="myApp"> <div ng-controller="firstController">
- 7. <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> <div ng-controller="secondController"> Showing first name and last name on second controller: <b> {{data.firstName}} {{data.lastName}}</b> </div> </body> </html> Example
- 8. Share data between controllers in 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> <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.factory('userFactory', function() { var empData = { FirstName: '' }; return { getFirstName: function () { return empData.FirstName; }, setFirstName: function (firstName,lastName) { empData.FirstName = firstName; } }; }); app.controller("firstController", function($scope, userFactory) { $scope.firstName = ''; $scope.lastName = ''; $scope.$watch('firstName', function (newValue, oldValue) { if (newValue !== oldValue) userFactory.setFirstName(newValue); });
- 9. }); app.controller("secondController", function($scope, userFactory) { $scope.$watch(function () { return userFactory.getFirstName(); }, function (newValue, oldValue) { if (newValue !== oldValue) $scope.firstName = newValue; }); }); </script> </head> <body ng-app="myApp"> <div ng-controller="firstController"> <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
- 10. Share data between controllers in 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> <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.factory('userFactory', function() { var empData = { FirstName: '', LastName: '' }; return { getEmployee: function() { return empData; }, setEmployee: function(firstName, lastName) { empData.FirstName = firstName; empData.LastName = lastName; } }; });
- 11. app.controller("firstController", function($scope, userFactory) { $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. }); app.controller("secondController", function($scope, userFactory) { $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> <body ng-app="myApp"> <div ng-controller="firstController"> <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> <div ng-controller="secondController"> Showing first name and last name on second controller: First Name - <strong> {{Emp.firstName}} </strong>, Last Name: <strong>{{Emp.lastName}}</strong> </div> </body> </html> Example
- 12. 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