AngularJS singleton service setting the value

Question

I am new to angularJS and I was going through the AngularJS services tutorial. I understood that Services are Singleton in AngularJS. Now my intention is I will set a value to Service and that value should be able to access anywhere.

I created a service in one page and set the value from one Controller. Now I accessed this service in anotherpage. I am getting the below error.

Uncaught Error: [$injector:modulerr]

I tried the below code.

page1.html

<html>

<head>
<title>Angular JS Services</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <h2>AngularJS Services</h2>
    <div ng-app="myApp">
        <div ng-controller="FirstCtrl">
            Set name: <input type="text" ng-model="test">
            <!-- <button ng-click="next('page2.html')">next</button> -->
            <button ng-click="next()">Set the value</button>
        </div>

            <div ng-controller="SecondCtrl">            
            <button ng-click="next()">Go to next page</button>
        </div>
    </div>
    <script>        
        var myApp = angular.module('myApp', []);        
        myApp.service('HelloService', function() {          
            var value ='';          
            this.setValue = function(a) {
                value = a ;
            };

            this.getValue= function(){
                return  value ;
            }

        });         
        myApp.controller('FirstCtrl', function($scope, HelloService) {           
            $scope.next= function() {
                alert("Value "+$scope.test);
                HelloService.setValue($scope.test);
                $scope.answer = HelloService.getValue();
                alert($scope.answer);
              }         
        });     

        myApp.controller('SecondCtrl', function($scope, HelloService,$window) {          
            $scope.next= function() {          
                $scope.newvalue = HelloService.getValue();
                alert($scope.newvalue);
                $window.location.href = 'page2.html';
            }           
        });

    </script>
</body>
</html>

page2.html

<html>
<head>
<title>Angular JS Services</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
    <h2>AngularJS Service test</h2>
    <div ng-app="myApp">
        <div ng-controller="SecondCtrl">
            <button ng-click="retrieve()">Retrieve the value</button>
        </div>
    </div>
    <script>        
        var myApp = angular.module('myApp', ['HelloService']);
        myApp.controller('SecondCtrl', function($scope, HelloService) {          
            $scope.retrieve= function() {   
                alert("2nd page");
                $scope.newvalue = HelloService.getValue();
                alert($scope.newvalue);
            }
        });     
    </script>
</body>
</html>

Hisham · Accepted Answer · 2016-01-11 14:35:15Z

1

Angular is a single page applications framework, your two pages are two different angular applications and services (and other resources) can't be shared between them.

You can create a multi-view application using routes. please check angular tutorials

answered Jan 11, 2016 at 14:35

Hisham

2,7461 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Byers · Accepted Answer · 2016-01-11 14:37:10Z

When the page reloads, e.g., from page1 to page2, everything resets. The singleton value will persist if you inject it into controllers in the current page-load. The most common way to do this is to use ng-view / Routing. In that instance, you'd create a skeleton page of html, body, etc, and remove the content that's different between page1 and page2. Put those differences into .html "partial" files and then use ng-view / Routing to load each partial based on URL state and it'll use the same service singleton.

https://docs.angularjs.org/api/ngRoute/directive/ngView

Petr Averyanov · Accepted Answer · 2016-01-11 14:52:28Z

Angular service is just javascript object. It is stored inside angular as well as your module, controllers, directives etc. In simple case your application is "single page" (however may be quite reach), which means that you have i.e. index.html, where you include angular.js and your custom components.

When people talk about views and pages in angular, they usually mean 'part of page', not real 'pages' like index.html/#home, index.html/#view1, ... (this urls may look like /home, /view1 in html5 mode) -- however if you inspect html source of any such page you will see that it is the same. You can say that angular singleton is an object that is created once per angular load.

When you change real browser page, browser will discard all js objects: angular itself as well as your factories, etc.

rck6982 · Accepted Answer · 2016-01-11 15:30:58Z

0

If you just use a value to share across your app, you should use a type service value:

angular.module('myValue')
  .value('myShareValue', 123);

and then inject into your module app and controller.

myApp = angular.module('myApp', ['myValue']);
myApp.controller('myController', [
    '$scope', 'myShareValue',
    function($scope, myShareValue){
        $scope.valueShare = myShareValue;
    }
]);

You can read this slides in spanish and see the differences between types of services angular. Also this video

edited Jan 11, 2016 at 15:30

answered Jan 11, 2016 at 15:15

rck6982

2392 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS singleton service setting the value

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related