Share data between controllers in AngularJs

on


Some time we need to share data between controllers. Today I am showing different way to share data between controllers.

Share data between controllers in AngularJs with $rootScope

Plnkr - http://plnkr.co/edit/QFH62vsWwvJTuCxfNE46?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!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"></script>
   <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>
<!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"></script>
   <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


Share data between controllers in AngularJs using factory

Plnkr - http://plnkr.co/edit/O3h3Vh1nGjo810vjvJA4?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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"></script>
   <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>
      <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>
<!DOCTYPE html>
<html>

<head>
   <title>Share data between controllers in AngularJs without $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"></script>
   <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>
      <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

 

Share data between controllers in AngularJs with Factory Update Function

Plnkr - http://plnkr.co/edit/bXwR4SOP3Nx9zlCVFUFe?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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"></script>
   <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">
      <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>
<!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"></script>
   <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">
      <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

Share data between controllers in AngularJs with factory and $watch function

Plnkr - http:/plnkr.co/edit/rQcYsI1MoVsgM967MwzY?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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"></script>
   <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);
         });
      });
      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>
<!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"></script>
   <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);
         });
      });
      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


  

Share data between controllers in AngularJs with complex object using $watch

Plnkr - http://plnkr.co/edit/8gQI7im5JjF6Zb9tL1Vb?p=preview

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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"></script>
   <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;
            }
         };
      });
      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>
<!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"></script>
   <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;
            }
         };
      });
      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



Comments

Post a Comment