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>
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