How to pass initialization data to angular module?

Question

I have a webmethod on my remote server returning a JSon object. Said json object contains strings which are required for the module to proper work.

So, is there a way to pass something to an angular module? An idea could be to perform an http request inside of the initialization of the module:

$scope.init = function(){
        $http.get ()
            ...
         then(){
               $scope.mydata = result;
         }

};

But that would be asynchronous...

why not pass a service. that can provide you with that end point? — jstuartmilne
– jstuartmilne, Commented Dec 21, 2015 at 17:37
I'm doing exactly that to initialize schemaform.io form definition and schema JSONobjects. If you are using a third party module you can trigger an event to reinitialize on your $http.get() success or if it's your own module, create a function that will reinitialize the module with the new data. — Marc Nuri
– Marc Nuri, Commented Dec 21, 2015 at 17:47

Marcidius · Accepted Answer · 2015-12-21 18:08:33Z

1

If you are worried about the async nature of an HTTP request to fill out your $scope.mydata variable, then you need to include this in a RESOLVE in your route.

I'm using UI-ROUTER in my current project:

(function() {
    'use strict';

    angular
        .module('capps.core')
        .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');

            $stateProvider
                .state('home.capps', {
                    url: '/',
                    template: '<ui-view/>',
                    data: {
                        requireLogin: true
                    },
                    resolve:{
                        resolveFunction: resolveFunction
                    }
                });
        }
    ]);

    resolveFunction['$inject'] = ['$http'];
    function resolveFunction($http) {
        return $http.get(API_URL)
                .then(function(res) {
                    console.log(res);
                });
    }
})();

Then in your controller, you can pass 'resolveFunction' as a dependency... then use that to assign to your $scope.myData.

...
angular.controller('myController', myController);

myController.$inject = ['resolveFunction', '$scope'];
function myController(resolveFunction, $scope) {
    $scope.mydata = resolveFunction.data;
    console.log(mydata);
};

edited Dec 21, 2015 at 18:08

answered Dec 21, 2015 at 17:58

Marcidius

2491 silver badge5 bronze badges

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

1 Comment

Marcidius Over a year ago

There are other ways of doing this like Suda said... personally I would contain all of the REST interaction inside a service. Then within the resolve I would call a loadMyData() function to GET the data from the API... then in the controller you know the data is already initialized in the service. So you can set ... $scope.myData = myDataService.getMyData(); (this is not an API call but a reference to the singleton service that contains the data it already pulled from the API).

Collectives™ on Stack Overflow

How to pass initialization data to angular module?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related