{"id":581,"date":"2015-05-04T10:01:00","date_gmt":"2015-05-04T10:01:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=581"},"modified":"2025-02-21T10:22:38","modified_gmt":"2025-02-21T10:22:38","slug":"share-data-between-controllers","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/share-data-between-controllers","title":{"rendered":"How To Share Data Between Controllers in AngularJS"},"content":{"rendered":"\n

In my AngularJS classes, I often get asked, \u201cHow do I share data between the controllers in AngularJS?\u201d On the Internet, there are many solutions suggested.<\/p>\n\n\n\n

However, I prefer to share data using the Shared Data Service method, and that\u2019s what we\u2019re going to explore in this post.<\/p>\n\n\n\n

To start with, let\u2019s suppose that we want to share a Product object between the controllers. Here I have created an AngularJS service named SharedDataService<\/b> as shown in the snippet below:<\/p>\n\n\n\n

myApp.service('SharedDataService', function () {\n     var Product = {\n        name: '',\n        price: ''\n    };\n    return Product;\n});<\/pre>\n\n\n\n
Next let\u2019s go ahead and create two different controllers using SharedDataService. In the controllers, we are using the service created in the previous step. Controllers can be created as shown below:<\/p>\n\n\n\n
var myApp = angular.module(\"myApp\", ['CalService']);\n \nmyApp.controller(\"DataController1\", ['$scope', 'SharedDataService',\n    function ($scope, SharedDataService) {\n       $scope.Product = SharedDataService;\n    }]);\nmyApp.controller(\"DataController2\", ['$scope', 'SharedDataService',\n    function ($scope, SharedDataService) {\n    $scope.Product = SharedDataService;\n}]);<\/pre>\n\n\n\n
On the view we can simply use the controllers as shown in the listing below:<\/p>\n\n\n\n
<div ng-controller=\"DataController1\">\n            <h2>In Controller 1<\/h2>\n            <input type=\"text\" ng-model=\"Product.name\" \/> <br\/>\n            <input type=\"text\" ng-model=\"Product.price\" \/>\n            <h3>Product {{Product.name}} costs {{Product.price}} <\/h3>\n        <\/div>\n        <hr\/>\n        <div ng-controller=\"DataController2\">\n            <h2>In Controller 2<\/h2>\n            <h3>Product {{Product.name}} costs {{Product.price}} <\/h3>\n        <\/div><\/pre>\n\n\n\n
Now we can share the data between the controllers. As you can see, the name and price of the product is being set in the DataController1, and we are fetching the data in the DataController2.<\/p>\n\n\n\n
Do you have any better options that you use to share data? Or perhaps you have a complex scenario which may be not be solved by the above approach. If so, let me know! Tell me about it in the comments below.<\/p>\n\n\n\n
\"<\/a><\/figure>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In my AngularJS classes, I often get asked, \u201cHow do I share data between the controllers in AngularJS?\u201d On the Internet, there are many solutions suggested.<\/p>\n","protected":false},"author":65,"featured_media":1604,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":2253,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/581\/revisions\/2253"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1604"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}