AngularJS: Module not found error when creating module from asynchronous function's callback

Question

When i try to create angularjs module in usual way, it works perfect, but when i try to execute same code inside a callback function of aync function call, it throws error that module not found:

The following code works fine:

 var myApp = angular.module('SSApp',[]);

    myApp.controller('config', function($scope) {

    });

But following throws error:

Init_Data(function() {
    initApp();
});


function initApp() {
    var myApp = angular.module('SSApp',[]);

    myApp.controller('config', function($scope) {

    });

}

function Init_Data(callback) {
    chrome.storage.local.get(null, function(data) {
        window.data = data;
        callback();
    });
}

I've defined ng-app="SSApp" directive in respective html code.

Answer 1

The reason your code is not doing what you expect is because, Angular tries to bootstrap the module "SSApp" automatically when the DOM is ready. But, finds no such module defined by your JavaScript code when it tries to do so.

You probably have ng-app="SSApp" somewhere in your HTML which is why Angular tries to bootstrap the module automatically.

You can choose to bootstrap the module manually by removing the ng-app directive and doing

angular.bootstrap(document.documentElement, ['SSApp']);

Answer 2

This is the change you have to do:

 var myApp = angular.module("SSApp", []);

 Init_Data(function () {
     initApp();
 });

 function initApp() {            

     myApp.controller('config', function ($scope) {

     });

     console.log(myApp)

 }

 function Init_Data(callback) {
     setTimeout(function () {
         callback();
     },4000);                
 }

From what I understand in your code, first you want to load data and then to add config controller to your app...so define your app first and then in your callback configure