In AngularJS, you can share data among different componenets, e.g. Controllers, by multiple ways.
Using HTML5 storage features
HTML5 provides localStorage and sessionStorage, but using HTML5's localStorage, you would require to serialize and deserialize the objects before saving or reading them.
For example:
var myObj = {
firstname: "Muhammad",
lastname: "Idrees"
}
//serialize data before saving to localStorage
window.localStorage.set("myObject", JSON.stringify(myObj));
//deserialize to get object
var myObj = JSON.parse(window.localStorage.get("myObject"));
Using ngStorage
To use ngStorage, you have to include the ngStorage.js in your index.html alongwith angular.min.js.
<head> <title>Angular JS ngStorage Example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js" ></script> </head>
ngStorage provides two storage options: $localStorage and $sessionStorage.
You need to add ngStorage (as require) in the module, and then inject the services.
Suppose, if myApp is the name of the app module, you would be injecting ngStorage in myApp module as following:
var app = angular.module('myApp', ['ngStorage']);
After that, you can simply inject $localStorage and $sessionStorage services in controller function.
app.controller('controllerOne', function($localStorage, $sessionStorage) {
// an object to share
var myObj = {
firstname: "Muhammad",
lastname: "Idrees"
}
$localStorage.someValueToShare = myObj;
$sessionStorage.someValueToShare = myObj;
})
.controller('controllerTwo', function($localStorage, $sessionStorage) {
//here you can read data from $localStorage & $sessionStorage
console.log('localStorage: '+ $localStorage +'sessionStorage: '+$sessionStorage);
})
$localStorage and $sessionStorage are globally accessible through any controllers as long as you inject those services in the controller functions.
Using Service
You can create a service to hold the data that need to be shared among different controllers. Then you can simply inject that service in the controller function where you want to use it.
Here is the service code:
app.service('myDataService', function() {
var someData = {};
getData: function() { return someData; },
setData: function(dataToShare) { someData = dataToShare; }
});
Here is how controllers will consume the service myDataService and share data:
app.controller('controllerOne', ['myDataService',function(myDataService) {
// To set the data from the one controller
var myObj = {
firstname: "Muhammad",
lastname: "Idrees"
}
myDataService.setData(myObj);
}]);
app.controller('controllerTwo', ['myDataService',function(myDataService) {
// To get the data from the another controller
var result = myDataService.getData();
console.log(result);
}]);
Wonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!
ReplyDeleteOutsource Angular 2 Development in India