Angular - Call function when all JS has been loaded

Question

I want to call a function when all my files (JS) are loaded (because I would like to call a function that's inside one of these files). How do I do that?

     .state('dashboard', {
         url: "/dashboard.html",
         templateUrl: "views/dashboard.html",            
         data: {pageTitle: 'Dashboard'},
         controller: "DashboardController",
         resolve: {
             deps: ['$ocLazyLoad', function($ocLazyLoad) {
                 return $ocLazyLoad.load({
                     name: 'MetronicApp',
                     insertBefore: '#ng_load_plugins_before', 
                     files: [
                         '/assets/global/plugins/morris/morris.css',
                         '/assets/admin/pages/css/tasks.css',

                         '/assets/global/plugins/morris/morris.min.js',
                         '/assets/global/plugins/morris/raphael-min.js',
                         '/assets/global/plugins/jquery.sparkline.min.js',

                         '/assets/admin/pages/scripts/index3.js',
                         '/assets/admin/pages/scripts/tasks.js', 
                         //'/js_custom/dashboard.js', 

                         'js/controllers/DashboardController.js'
                     ] 
                 });
             }]
         }
     })

source: Metronic Template AngularJS version

Answer 1

Looks like $ocLazyLoad.load() returns a promise. It should be resolved when all files have been loaded. There is an example in the docs that seems similar to what you want:

[...]
return $ocLazyLoad.load('js/ServiceTest.js').then(function() {
  var $serviceTest = $injector.get("$serviceTest");
  $serviceTest.doSomething();
});