Angularjs - add a service to a self invoking function

Question

Im reworking my app to load the page after the data is loaded. I have the data, but i need to get it to my other two controllers. I have a self provoking function inside my main app.js. I also have a service in there.

I am unable to figure out how to reference the service, in the function, so i can add the data there. Therefore, be accessible from my other controllers.

Here is the app.js with the function i need to reference the service and the service itself. I will post the full code.

var app = angular.module('UtilityApp', ['ngRoute', 'ngDialog', 'uiSwitch', 'ui.select', 'ngResource', 'ui.bootstrap'])
.config(

    [ '$routeProvider', function($routeProvider) {
        $routeProvider.when('/edit', {
            templateUrl: 'templates/login-page.html',
            controller : 'LoginController'
        });

        $routeProvider.otherwise({
            resolve:{
                'LoginServiceData':function(LoginService){
                    return LoginService.promise;
                }},
            templateUrl: 'templates/Homepage.html'
        });

    }]);

(function($scope, UserService) {

var initInjector = angular.injector(['ng']);
var $http = initInjector.get('$http');


    $http.get('rest/userdata/').
    success(function (data) {

       //  angular.module('metadata', []).constant('userdata', data);
        // UserDataService.setUserData(data);
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['UtilityApp']);

        });

    }).
    error(function (error) {
        console.log(error.message);
    });

setInterval(function(){
    $scope.getMetaData();
}, 300000);

})();

Hopefully, theres a way to use the UserService in the function. I added it as a parameter but it cant find setUserData.

EDIT I need a way to get the data from the $http.get to the other controllers I have not shown in different js files

How do you get `$scope` into the function? I don't see any arguments passed to it. Either way, you should be able to inject your custom service just like you inject `$http` — Thor Jacobsen, Apr 11 '18 at 19:36
In the AngularJS world, all post-bootstrap code should be in a registered Angular injectable. You shouldn't have any IIFE running out in the global space. Your `$http.get()` should be in a service. If you need to load that data as soon as the app loads, call that service from a `.run()` block. — JC Ford, Apr 11 '18 at 19:36
I need a way to get the data from the $http.get to the other controllers I have not shown in different js files — , Apr 11 '18 at 19:41
The `.success` and `.error` methods are [deprecated and removed from V1.6](https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). That `makePromise` function is unnecessary. Simply return the promise created by the `$http.get` service. — georgeawg, Apr 11 '18 at 19:47
This is a classic [XY Problem](http://xyproblem.info/). The OP wants get data from an `$http.get` promise to another service. Instead of asking how to do that the OP is asking about self-invoking functions and injectors. — georgeawg, Apr 11 '18 at 19:52
You are correct, but i think i refined my problem down. My apologies. — , Apr 11 '18 at 19:53
The reason why i asked the way i did because doing so out of a self-invoking functions seems impossible. — , Apr 11 '18 at 19:57
I think you probably could use the `$injector` to get the `UserDataService` outside of the scope of your AngularJS application but _you really should not_. The `$injector` you're currently getting is only accessing the 'ng' module. If you add your app module there, you should be able to get the services you registered. — JC Ford, Apr 11 '18 at 20:07
How would i inject the module? I tried var initInjectorModule = angular.injector(['mappingUtilityApp']); but i get a host of errors. like ngdialog. — , Apr 11 '18 at 20:53

score 0 · Accepted Answer · answered Apr 11 '18 at 19:57

Your app structure is wrong. You should not try to load data in an IIFE then bootstrap the AngularJS app. Do it all in AngularJS instead as below. There is a myDataService that handles loading and providing the data. There is a .run() block that triggers the data load as soon as the app starts. You can then disable functionality in your app as needed until the myDataService.dataLoaded flag is set to true.

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

app.service("myDataService", function($http) {
  var service = this;
  service.data = [];

  service.dataLoaded = false;

  service.loadData = function() {
    return $http.get("/my/data/url")
      .then(function(response) {
        service.data = response.data;
        service.dataLoaded = true;
      });
  };

});

app.run(function(myDataService) {
  myDataService.loadData();
});

You probably aren't bootstrapping your app anymore. Use the `ng-app` method or the manual bootstrap method. — JC Ford, Apr 11 '18 at 20:56

Angularjs - add a service to a self invoking function

1 Answers1