suppose that we want to share a Product object between the controllers. Here I have created an AngularJS service named SharedDataService as shown in the snippet below:
myApp.service('SharedDataService', function () {
var Product = {
name: '',
price: ''
};
return Product;
});
Next let’s 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:
var myApp = angular.module("myApp", ['CalService']);
myApp.controller("DataController1", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Product = SharedDataService;
}]);
myApp.controller("DataController2", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Product = SharedDataService;
}]);
On the view we can simply use the controllers as shown in the listing below:
<h2>In Controller 1h2>
<input type="text" ng-model="Product.name" /> <br/>
<input type="text" ng-model="Product.price" />
<h3>Product {{Product.name}} costs {{Product.price}} h3>
div>
<hr/>
<div ng-controller="DataController2">
<h2>In Controller 2h2>
<h3>Product {{Product.name}} costs {{Product.price}} h3>
div>