angularjs set and get a value from a service

Question

Sorry about the noob question, I'm new to AngularJS. I have a Service and 2 Controllers , one for my home page and the second for the page that I want to create dynamically.

I want to set an object from my first controller(home page) in my service, and get this object in my second controller(on a new html page that I'll call with form action) and display some attributes of this object.

How can I do that?

Thanks!

EDIT Sample of what I need :

index.html

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="app.js"></script>
    <body ng-app="app">
        <div ng-controller="firstCtrl">
            First Controller
            <button ng-click="add()">add</button>
            {{data.value}}
            <hr/>
            <a href="index2.html">Aqui!</a>
         </div>
    </body>
</html>

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <body ng-app="app">
        <div ng-controller="secondCtrl">
            Second Controller
            <button ng-click="add()">add</button>
            {{data.value}}
            <hr/>
         </div>
    </body>
</html>


http://plnkr.co/edit/sSBnE7gllFc0F6197cUD?p=info

Two controllers can both inject the same service. The objects are the same-- all Angular services are singletons. If you post some code, we can probably be a bigger help. Show us what you've tried. A Fiddle is even better. — Antiga
– Antiga, Commented Oct 1, 2014 at 19:51

sylwester · Accepted Answer · 2014-10-01 21:43:41Z

In that case you can use ngStorage https://github.com/gsklee/ngStorage because data in service will be destroyed after full page reload.

please see demo here http://plnkr.co/edit/8b04wZ6btGwLodRuJr7V?p=preview

JS:

var app = angular.module('app', ['ngStorage']);


app.controller('firstCtrl', function($scope,  $localStorage) {


  $scope.storage = $localStorage.$default({myValue: 0 });

});

app.controller('secondCtrl', function($scope,  $localStorage) {


 $scope.storage = $localStorage;
});

HTML1

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
        <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
    <script src="app.js"></script>
    <body ng-app="app">
        <div ng-controller="firstCtrl">
            First Controller
           <button ng-click="storage.myValue = storage.myValue + 1">{{storage.myValue}}</button>
            {{service.data.value}}
            <hr/>
            <a href="index2.html">Aqui!</a>
         </div>
    </body>
</html>

HTML2

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>

<body ng-app="app">
  <div ng-controller="secondCtrl">
    Second Controller myValue is: {{storage.myValue}}
  </div>
  <a href="index.html">Page 1</a>
</body>

</html>

sylwester · Accepted Answer · 2014-10-01 19:58:39Z

var app = angular.module('app', []);

app.service('dataService', function(){
  
  var _data = {value:0};
  return {
    
    data : _data
    
  };
  
  
});
app.controller('firstCtrl', function($scope,dataService){
  $scope.data = dataService.data;
  $scope.add = function(){
    $scope.data.value ++;
    
  };
 
});

app.controller('secondCtrl', function($scope,dataService){
  $scope.data = dataService.data;
  $scope.add = function(){
    $scope.data.value ++;
    
  };
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="firstCtrl">
    First Controller
    <button ng-click="add()">add</button>
{{data.value}}
    <hr/>
      </div>
 <div ng-controller="secondCtrl">
    Second Controller
    <button ng-click="add()">add</button>
{{data.value}}
    <hr/>
      </div>
</body>

It works if both controllers are called in the same view. That what I mean plnkr.co/edit/sSBnE7gllFc0F6197cUD?p=info

Fordio · Accepted Answer · 2014-10-01 19:54:21Z

1

Inject the service into your first controller, set an object on it. Inject the same service into the second controller and viola - the object is there!

answered Oct 1, 2014 at 19:54

Fordio

3,8702 gold badges16 silver badges18 bronze badges

Collectives™ on Stack Overflow

angularjs set and get a value from a service

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related