Questions And Answers

More Tutorials

Angular Sharing Data

Firstly, include the ngStorage source in your index.html.

An example injecting ngStorage src would be:

 <title>Angular JS ngStorage</title>
 <script src = ""></script>
 <script src=""></script>

ngStorage gives you 2 storage namely: $localStorage and $sessionStorage. You need to require ngStorage and Inject the services.
Suppose if ng-app="myApp", then you would be injecting ngStorage as following:

var app = angular.module('myApp', ['ngStorage']);
 app.controller('controllerOne', function($localStorage,$sessionStorage) {
 // an object to share
 var sampleObject = {
 name: 'angularjs',
 value: 1
 $localStorage.valueToShare = sampleObject;
 $sessionStorage.valueToShare = sampleObject;
.controller('controllerTwo', function($localStorage,$sessionStorage) {
 console.log('localStorage: '+ $localStorage +'sessionStorage: '+$sessionStorage);

$localStorage and $sessionStorage is globally accessible through any controllers as long as you inject those services in the controllers.
You can also use the localStorage and sessionStorage of HTML5. However, using HTML5 localStorage would require you to serialize and deserialize your objects before using or saving them.

For example:

var myObj = {
 firstname: "Nic",
 lastname: "Raboy",
 website: ""
//if you wanted to save into localStorage, serialize it 
window.localStorage.set("saved", JSON.stringify(myObj)); 
//unserialize to get object 
var myObj = JSON.parse(window.localStorage.get("saved"));

Sharing data from one controller to another

using service
We can create a service to set and get the data between the controllers and then inject that service in the controller function where we want to use it.

Service :

app.service('setGetData', function() {
 var data = '';
 getData: function() { return data; },
 setData: function(requestData) { data = requestData; }

Controllers :

app.controller('myCtrl1', ['setGetData',function(setGetData) {
 // To set the data from the one controller
 var data = 'Hello World !!'; 
app.controller('myCtrl2', ['setGetData',function(setGetData) {
 // To get the data from the another controller 
 var res = setGetData.getData();
 console.log(res); // Hello World !!

Here, we can see that myCtrl1 is used for setting the data and myCtrl2 is used for getting the data. So, we can share the data from one controller to another contrller like this.


In this page (written and validated by ) you learned about AngularJS Sharing Data . What's Next? If you are interested in completing AngularJS tutorial, your next topic will be learning about: AngularJS Form Validation.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.