AngularJS: Dynamic injection of modules after loading another js file

Question

My broader problem statement is to reduce the JS file size used in the main web page. I minified using grunt uglify to reduce it from 455KB to 140KB.

As a second step, I am removing unnecessary file(s) which are not required on main page. Hence I was able to reduce the initial JS file size to 90KB, with the remaining 50KB file to be loaded later on.

I used Ben Thielker's loadScript function mentioned in Single page application - load js file dynamically based on partial view to dynamically load the JS file onto head.

Now the issue is that the modules defined in the 2nd JS file are not loaded as their dependency could not be mentioned earlier at the start of app(Would throw error). I want to load the modules present in 2nd JS file dynamically.

I tried the below in callback function of loadScript mentioned earlier:

angular.module('reportsApp', ['reportsApp.DList', 'reportsApp.item', 'reportsApp.Filters', 'reportsApp.Download'])
.controller('ReportsCtrl', ['$scope', '$rootScope', '$injector', function($scope, $rootScope, $injector) {
    $rootScope.accessDenied = !$scope.accessReports;
    $rootScope.loadScript('public/js/grid.min.js','text/javascript','utf-8', function() {
        console.log('****************grid.min.js loaded successfully.....');                        
        var grid;
        var bool = $injector.has('reportsApp.Grids');
        console.log(bool);//outputs "false"         
        if(bool) {              
            grid = $injector.get('reportsApp.Grids');
        }           
    });     
}])

But the above code does not even detect the module. When I looked into angular's createInjector function, I found they are adding a string 'Provider' at the end of the modulename. Not sure if this is messing things up.

Also, this is the reportsApp.Grids module's 1st line:

angular.module('reportsApp.Grids', ['ui.grid'])

Here, reportsApp.Grids is present in the initial JS file itself, but 'ui.grid' is only present in the 2nd JS file loaded later on.

How exactly should I use $injector.invoke function here? OR What is the best approach for this?

Can you show how you define 'reportsApp.Grids' and what it is? If reportsApp is the name of your module you should probably just try `$injector.has('Grids')` and see what happens — Michael Rose, Dec 10 '15 at 09:50
Hi @MichaelRose , this is the asked module:- angular.module('reportsApp.Grids', ['ui.grid']) In fact, reportsApp.Grids is present in the initial JS file. It's 'ui.grid' which is coming from the 2nd JS file loaded later. — riju, Dec 10 '15 at 10:45
Do not ask the $injector for a module - the $injector can only give you services etc. by name - not a complete module! — Michael Rose, Dec 10 '15 at 10:50
@MichaelRose I tried 'var bool = $injector.has('AuditTrailGridCtrl')' also where this is a controller inside _reportsApp.Grids_. Still it's giving false. — riju, Dec 10 '15 at 11:04
To be clear - you cannot get a controller via $injector! $injector can only give you things that can be injected into functions... See this fiddle for an example: http://jsfiddle.net/u1k6qdrr/ — Michael Rose, Dec 10 '15 at 11:07
basically, there would be a reports page that would be loaded from the main page. When the reports page is opening, I load the 2nd JS file which consists of 'ui.grid' module. Initially there is no JS error. There are 4 tabs in this view. When any 1 tab is clicked, it's corresponding template and controller is supposed to be loaded. But since the controller is present in 'reportsApp.Grids' module, whose dependency was never mentioned in the first place, it is never loaded and the controller is never called. — riju, Dec 10 '15 at 11:16

AngularJS: Dynamic injection of modules after loading another js file

0 Answers0