All geek questions in one place

Is Angular a truly singleton service?

I have an Angular service like this:

angular.module('MyModule')
    .factory('SharedData', function( ){
        return {
            session_id: undefined, 
            getSessionId: function () {
                return this.session_id;
            },
            setSessionId: function (new_id) {
                this.session_id = new_id;
            },
        };
    }).
    controller( 'MyController', ['SharedData', function( SharedData ){
            console.log( "Retrieved session id = " + SharedData.getSessionId()); 
               // getting undefined here!
    }]);

I called the service earlier in another module, for example:

angular.module( 'bootstrapper' )
    factory("AnotherService", function(){
          var injector = angular.injector(['MyModule', 'ng']),
              shared_data = injector.get('SharedData');
              shared_data.setSessionId( getUrlParameter('SESSIONID'));
          ...

 });

The result of console output is undefined.

I think that SharedDatain 'MyController' and SharedDatain 'AnotherService' it is not the same object. However, people all say that Angular services are solitary. Are they real loners?

More about my modules: I used the bootstrapper module to manually load another "MyModule" module:

angular.module( 'bootstrapper' )
    .run(function () {
        angular.bootstrap(document, ['MyModule']);
    });
+4
source share
3 answers

You can provide constants for the application at boot time as a module dependency.

angular.module( 'bootstrapper' )
    .config(function () {
        var sessionIdProvider = function ($provide) {
             $provide.constant("SESSIONID", getUrlParameter('SESSIONID'));
        };
        angular.bootstrap(document, ['MyModule', sessionIDProvider]);
    });

. AngularJS $ API - .

bootstrap MyModule.

angular.module( 'MyModule' )
    .config(function ($provide) {
        $provide.constant("SESSIONID", getUrlParameter('SESSIONID'));
});

. AngularJS angular.module API,

+1

angular.factory , , angular.service ,

+2

, , . bootstrapper sharedData, . , , , . .

, "":

/**
 * Bootstrapper application.
 */
angular.module('bootstrapper', ['dashboard'])
    .factory('sharedData', function() {
        return {
            sessionId: undefined,
            setSessionId: function(value) {
                this.sessionId = value;
            },
            getSessionId: function() {
                return this.sessionId;
            }
        }
    })
    .controller('BootController', function(sharedData) {
        this.name = 'Bootstrapper app';
        sharedData.setSessionId('34sd-3sdf345g-23a2421b');
    });
    
/**
 * Apllication kicked off by main bootstrapper.
 */
 angular.module('dashboard', [])
    .directive('dashboardModule', function() {
        return {
            controller: 'DashboardController as dashboard',
            template:
              "<div>" +   
              "    {{ dashboard.name }} sessionId: {{ dashboard.sharedData.sessionId }}" +
              "</div>"
        };
    })
    .controller('DashboardController', function(sharedData) {
        this.name = 'Dashboard';
        this.sharedData = sharedData;
    });
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>

<body ng-app="bootstrapper" ng-controller="BootController as boot">
    
    <h3>{{ boot.name }}</h3>
    
    <dashboard-module name="dashboard"></dashboard-module>
  
    <!-- <some-other-module></some-other-module> -->
    
</body>
Hide result
0

Source: https://habr.com/ru/post/1623941/

More articles:


All Articles