Erhalte den Skriptspeicherort vom Server, bevor eckig geladen wird

Question

Ich muss Skript in meiner index.html Seite abhängig von der Anwendungsversion dynamisch hinzufügen. Ich habe einen Controller, der App-Version zurückkehrt und versucht, diese mit AngularJS zu tun:

var resourceLoader = angular.module('MyTabs', []); 
    resourceLoader.controller('ResourceLoaderController', ['$scope', '$http', function ($scope, $http) { 
     $scope.getVersion = function() { 
      $http.get('/version/get').then(function (response) { 
       $scope.version = response.data; 
       var link = document.createElement("link"); 
       link.setAttribute("type", "text/css"); 
       link.setAttribute("rel", "stylesheet"); 
       link.setAttribute("href", '/r/' + $scope.version +'/css/app.css'); 
       document.getElementsByTagName("head")[0].appendChild(link); 

       var script = document.createElement("script"); 
       script.setAttribute("type", "text/javascript"); 
       script.setAttribute("src", '/r/' + $scope.version +'/js/app.js'); 
       document.getElementsByTagName("head")[0].appendChild(script); 
      }); 
     }; 

     $scope.getVersion(); 
    }]); 

Es funktioniert, aber es gibt Winkel Controller in app.js, und ich erhalte eine Fehlermeldung in Runtime, die AuthController, verwendet in index.html, nicht definiert ist.

Gibt es eine Möglichkeit, die Anwendungsversion vom Server abzurufen und Skript einzuschließen, bevor angularjs startet, um die Webseite zu verarbeiten?

Answer 1

interessante Frage.

Sie könnten, die Version in einem normalen Skript-Tag im Kopf des HTML-Dokuments, sicherzustellen, dass es synchron geladen wird, was der Standard ist glaube ich (Skript-Tags glaube ich synchron geladen werden, auch wenn Async-Operationen ausgeführt werden in ihnen). Dieses Skript würde eine CSS-Klasse hinzufügen, um die Versionsnummer darzustellen.

Dann danach könnten Sie in einem Script-Tag Winkel laden und dann tun ...

<script ng-if="version==='something'" src='/somePath'></script> 

für bedingte Script-Tags.

Hoffe, dass hilft.

Alternativ verwenden Sie grunt oder gulp von Node, um einen Server zu starten, der eine HTTP-Anforderung zum Abrufen der Version erstellt und dann die Seite index.html entsprechend der Version schreibt und anschließend den Server startet.

Bemerkenswert, dass der Drahtdep von Node scripts automatisch in Index.html integriert ist, basierend auf Bower-Komponenten.

Ich denke, dass die Grunt oder Schluck Ansatz ist die natürlichere, obwohl immer noch scheint, dass 60 +% der Webdev-Community immer noch in den dunklen Zeiten des Webs leben und nie von Node verwendet oder gehört haben oder grunzen oder schlucken. lol.

Answer 2

Wie AngularJS funktioniert, erstellt es die App und erstellt alle Wörterbücher für Controller/Direktiven/Services, wenn Sie die .js Dateien einschließen.

Durch Hinzufügen eines weiteren Skripts, nachdem AngularJS mit dem Erstellen fertig ist, werden die Controller nicht zur App hinzugefügt.

Sie müssen sehen, wie Controller dynamisch hinzuzufügen: Loading an AngularJS controller dynamically

Ihre andere Wahl, um die Version und Script vor Ihren HTML Referenzen wird immer und baut die AngularJS Abhängigkeit. Auf diese Weise werden die Skripte bereits geladen, wenn AngularJS mit seiner Magie beginnt.

Answer 3

Vielen Dank für die Antworten. Ich habe das Problem auf diese Weise behoben:

<script> 
    var xmlhttp; 

    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLXTTP"); 
    } 

    function getVersion() { 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       var version = xmlhttp.responseText; 
       var link = document.createElement("link"); 
       link.setAttribute("type", "text/css"); 
       link.setAttribute("rel", "stylesheet"); 
       link.setAttribute("href", '/r/' + version +'/css/app.css'); 
       document.getElementsByTagName("head")[0].appendChild(link); 

       var script = document.createElement("script"); 
       script.setAttribute("type", "text/javascript"); 
       script.setAttribute("src", '/r/' + version +'/js/app.js'); 
       document.getElementsByTagName("head")[0].appendChild(script); 
      } else if (xmlhttp.status != 200) { 
       console.log("Something went wrong. HTTP Status: " + xmlhttp.status); 
      } 
     }; 
     xmlhttp.open("GET", "version/get" , true); 
     xmlhttp.send(); 
    } 
    getVersion(); 
</script>