Javascript: Conditional include of a script in angularJS based webapp

Question

My webapp (a Single page application) is based on AngularJS. The index.html page is structured like this:

<html>

<body ng-app="FDAApp" ng-controller="formController">
    // D3 directives
</body>
// external scripts inclusion (angular.js, d3.js, topojson.js etc)

// app-controller.js contains the ng-app and ng-controllers
<script type="text/javascript" src="js/controller/app-controller.js"></script>

// Here I want to introduce conditional inclusion of either factory-splunk.js or factory-elastic.js based on initial dialog popup
<!--<script type="text/javascript" src="js/factory/factory-splunk.js"></script>-->
<!--<script type="text/javascript" src="js/factory/factory-elastic.js"></script>-->

<script>
    $(function() {
        $("#dataServerpopUpDiv").dialog();
        $("#dataServer").val("");
        $('#dataServer').on('change', '', function (e) {
            $('#dataServerpopUpDiv').dialog('close');
            if($("#dataServer").val()=="splunk")
                $.getScript("js/factory/factory-splunk.js");
            else if($("#dataServer").val()=="elastic")
                $.getScript("js/factory/factory-elastic.js");
        });
    });

</script>

<div id="dataServerpopUpDiv" title="Select Data Source">
    <select id="dataServer">
        <option value="Splunk">Splunk</option>
        <option value="Elastic">Elastic</option>
    </select>
</div>


</html>

The signature of app-controller.js is shown below. Notice that the DataService object is used here which is provided by the factory-xxx.js :

    var app = angular.module('FDAApp', []);

    app.controller('formController', function ($scope, $http, $templateCache, $interval, $timeout, DataService) {
      DataService.initService();
    }

The signature of factory-xxx.js is;

angular.module('FDAApp').factory('DataService', function($http) {
}

What I am trying here: I want to provide user the selection dialog among the two options, based on which the appropriate factory will be loaded.

Problem: Jquery dialog being asyncronous, the DataService object is uninitialized and method call DataService.initService() does not happen.

Is there any alternative way of including scripts and controlling the sequence of their loading?

New Dev · Accepted Answer · 2015-05-28 07:14:22Z

ng-app makes Angular to automatically bootstrap the app once DOM has loaded.

From Angular's documentation:

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

And so, you can, if you wish, load the .js files that constitute an Angular modules conditionally, but then you have to call angular.bootstrap() manually (and remove ng-app):

// after choice is made
if($("#dataServer").val()=="splunk")
     $.getScript("js/factory/controller-splunk.js", bootstrapAngular);
else if($("#dataServer").val()=="elastic")
     $.getScript("js/factory/controller-elastic.js", bootstrapAngular);

function bootstrapAngular(){
   angular.bootstrap(document, ["FDAApp"]);
}

Off-topic:

I would also strongly suggest adhering to one-module-per-file best practice to avoid issues with script loading order. So, define a new dependent module in your controller-splunk.js/controller-elastic.js files:

angular.module("someName", []);

and have the app module FDAApp depend on it:

angular.module("FDAApp", ["someName"])

Iman Mohamadi · Accepted Answer · 2015-05-28 07:14:23Z

0

Since you are using jQuery in your project you can use it's Promise/Deferred helpers to manage your scripts execution order.

function loadDialog () {
  var dfd = new $.Deferred();
  //I'm not sure which dialog plugin are you using
  //so I consider first argument as callback of your dialog
  $("#dataServerpopUpDiv").dialog(function () {
    dfd.resolve();
  });
  return dfd.promise();
}

$.when(loadDialog()).
  then(function () {
    //do what ever you need here
    //you can continue to chain more that one then
    //and they will be executed one after the other
  });

to understand it better you can read: https://api.jquery.com/category/deferred-object/

answered May 28, 2015 at 7:14

Iman Mohamadi

6,8693 gold badges37 silver badges33 bronze badges

Collectives™ on Stack Overflow

Javascript: Conditional include of a script in angularJS based webapp

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related