What You’ll Learn
Why services are needed for sharing data
How to create a service to share data between controllers
Different methods for data sharing
Best practices for efficient data sharing
1️⃣ Why Use Services to Share Data?
In AngularJS, controllers are meant to manage a specific part of the UI.
However, controllers do not share data directly.
Problem Without Services
If we try to share data between controllers without a service, we will face issues like:
Data lost when reloading pages
Need to pass data manually
No real-time updates
Solution: Use Services
Using a service (factory, service, or provider) allows controllers to share data efficiently and persistently.
2️⃣ Creating a Shared Data Service
Step 1: Define a Service
We use a factory to create a shared service.
app.factory("SharedDataService", function () {
let sharedData = {
message: "Hello from Service!"
};
return {
getMessage: function () {
return sharedData.message;
},
setMessage: function (newMessage) {
sharedData.message = newMessage;
}
};
});
What This Service Does?
✔️ Stores message inside sharedData
✔️ Provides getMessage() to retrieve data
✔️ Provides setMessage() to update data
Step 2: Use the Service in Controllers
Now, we inject the service into different controllers.
Controller 1: Setting Data
app.controller("FirstController", function ($scope, SharedDataService) {
$scope.updateMessage = function () {
SharedDataService.setMessage("Updated by First Controller!");
};
});
Controller 2: Getting Data
app.controller("SecondController", function ($scope, SharedDataService) {
$scope.message = SharedDataService.getMessage();
});
How It Works?
FirstController updates the message
SecondController reads the updated message
3️⃣ Using $rootScope for Instant Updates
Instead of manually calling getMessage(), we can use $rootScope for real-time updates.
Step 1: Modify Service to Use $rootScope
app.factory("SharedDataService", function ($rootScope) {
let sharedData = {
message: "Hello!"
};
return {
getMessage: function () {
return sharedData.message;
},
setMessage: function (newMessage) {
sharedData.message = newMessage;
$rootScope.$broadcast("messageUpdated"); // Notify all controllers
}
};
});
Step 2: Listen for Updates in Controllers
Now, controllers can listen for updates automatically.
Controller 1: Setting Data
app.controller("FirstController", function ($scope, SharedDataService) {
$scope.updateMessage = function () {
SharedDataService.setMessage("Updated with $rootScope!");
};
});
Controller 2: Listening for Updates
app.controller("SecondController", function ($scope, SharedDataService) {
$scope.message = SharedDataService.getMessage();
$scope.$on("messageUpdated", function () {
$scope.message = SharedDataService.getMessage();
});
});
How It Works?
FirstController updates the message
$rootScope.$broadcast("messageUpdated") triggers an update
SecondController listens and automatically updates
4️⃣ Using Services with Objects (Two-Way Binding)
Instead of using strings, we can bind an object to achieve real-time updates.
Modify Service to Use an Object
app.factory("SharedDataService", function () {
return {
data: {
message: "Hello, AngularJS!"
}
};
});
Use the Object in Controllers
app.controller("FirstController", function ($scope, SharedDataService) {
$scope.shared = SharedDataService.data; // Binding object
});
app.controller("SecondController", function ($scope, SharedDataService) {
$scope.shared = SharedDataService.data; // Binding object
});
Why This Works?
Both controllers directly reference the same object
Any update in one controller reflects instantly in the other