CODEWITHSUNDEEP
angularjsangularjs-service
Vegan Wolf
Vegan Wolf

Reputation: 13

Dynamic provider inside controller in AngularJS

when configuring a route, I also configure the settings, a custom property with a object with static values to configure specific operations.

I then have a service class/file that looks like:

(function() {
    'use strict';

    angular.module('app.category').factory('categoryservice', categoryservice);

    /* @ngInject */
    function categoryservice($http, $location, $q, exception, logger) { 
        var service = {
            getSubMenusInformation: getSubmenuData            
        };

        return service;

        function getSubmenuData() {
            // 
            return "some data object";
        }
    }
});

on the settings, I would like to have the service class name I would use so in the controller I could instantiate it (without injection) and call the method I want (also in settings) to get some specific data.

something like this:

(function () {
    'use strict';

    angular.module('app.core').run(Runnable);

    Runnable.$inject = ['$rootScope', 'logger', 'config'];

    /* @ngInject */
    function Runnable($rootScope, logger, config) {
        /* jshint validthis:true */
        $rootScope.config = config;

        // now, the service is not instantiated yet.
        // he won't know what categoryservice is.
        // so the code is obviously broken at this point.

        var some_specific_data = [config.settings.someProviderName].[config.settings.someProviderFunction];        

        logger.debug( 'DEBUG MODE IS ON! '+ some_specific_data );
    }
})();

I think this should be done with a provider instead, but I don't have a clue about how, and I got the problem that the service (or provider) name is a string, as also the method I want to call. and I don't want to inject it on the controller because it will change with each route.

then I'll worry about running it only once.

does anyone have any ideas about how I can do this or how to do it without breaking the pattern and where?

the final purpose is to load dynamic data for each route "on load" and depending on the settings values (yes it will be slow).

thanks.

Upvotes: 1

Views: 3430

Answers (1)

Sagi Medina
Sagi Medina

Reputation: 915

I hope I understand what you need.

If the data in each provider is changing but still keeps the same format you can do something like this

(function () {
'use strict';

angular.module('app.category')
       .provider('category', category);

function category() {
    var data1Value;
    var data2Value;
    return {
        setData1: function (value) {
            data1Value = value;
        }
        setData2: function (value) {
            data2Value = value;
        }
    },
    $get: function () {
        return {
            data1: data1Value
            data2: data2Value
        };
    }
}
})();

Now I believe you use different module to each route since you follow John's style. so in each module config you will 'set the module settings'('Provider' postfix in the injection is mandatory: category -> categoryProvider):

(function () {
    'use strict';

    angular
        .module('app.someModule')
        .config('someModuleConfig', someModuleConfig);

    someModuleConfig.$inject = ['categoryProvider'];

    function someModuleConfig(categoryProvider){
         categoryProvider.setData1(data1Value);
         categoryProvider.setData2(data2Value);
    }

})();

And in you controller:

(function () {
    'use strict';

    angular
        .module('app.someModule')
        .controller('someController', someController);

    someController.$inject = ['category'];

    function someController(category) {
        var vm = this;
        vm.data = {};
        vm.activate = activate;
        vm.title = 'someController';

        activate();

        ////////////////

        function activate() {
            vm.data = {
                data1 = category.data1
                data2 = category.data2
            }
        }
    }
})();

Upvotes: 4

Related Questions