कोणीय लोड होने से पहले सर्वर से स्क्रिप्ट स्थान प्राप्त करें

Question

मुझे एप्लिकेशन संस्करण के आधार पर अपने index.html पृष्ठ में गतिशील रूप से स्क्रिप्ट जोड़ने की आवश्यकता है। मैं एक नियंत्रक कि एप्लिकेशन संस्करण रिटर्न है और इस AngularJS का उपयोग कर करने की कोशिश की:

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(); 
    }]); 

यह काम करता है लेकिन वहाँ app.js में कोणीय नियंत्रकों हैं, और मैं क्रम कि AuthController, index.html में इस्तेमाल किया, अपरिभाषित है में कोई त्रुटि मिलती है।

क्या सर्वर से एप्लिकेशन संस्करण प्राप्त करने का कोई तरीका है और एंजुलरज वेब पेज को संसाधित करने से पहले स्क्रिप्ट शामिल है?

Answer 1

दिलचस्प सवाल।

आप HTML दस्तावेज़ के शीर्ष में एक सामान्य स्क्रिप्ट टैग में संस्करण प्राप्त कर सकते हैं, यह सुनिश्चित कर लें कि यह सिंक्रनाइज़ रूप से लोड हो गया है, जो डिफ़ॉल्ट मुझे विश्वास है (स्क्रिप्ट टैग्स का मानना ​​है कि एसिंक ऑपरेशन किए जाने पर भी मुझे सिंक्रनाइज़ लोड किया जाता है उनके भीतर)। वह स्क्रिप्ट संस्करण संख्या का प्रतिनिधित्व करने के लिए एक सीएसएस वर्ग को सिर पर जोड़ देगा।

फिर बाद में आप सशर्त स्क्रिप्ट टैग के लिए एक स्क्रिप्ट टैग में कोणीय लोड कर सकता है और उसके बाद करना ...

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

।

उम्मीद है कि मदद करता है।

वैकल्पिक रूप से एक सर्वर शुरू करने के लिए नोड की गड़बड़ी या गल्प का उपयोग करें जो संस्करण प्राप्त करने के लिए HTTP अनुरोध करता है और फिर संस्करण के अनुसार index.html पृष्ठ लिखता है और फिर सर्वर प्रारंभ करता है।

यह ध्यान देने योग्य है कि नोड के वायर्डेप ऑटो में बॉडी घटकों के आधार पर index.html में स्क्रिप्ट टैग शामिल हैं।

मुझे लगता है कि कुल्ला या गल्प दृष्टिकोण अधिक स्वाभाविक है हालांकि यह अभी भी लगता है कि वेबदेव समुदाय का 60 +% अभी भी वेब के अंधेरे युग में रह रहा है और कभी भी नोड या ग्रंट या गल्प के बारे में सुना या सुना नहीं है। जबरदस्त हंसी।

Answer 2

एंगुलरजेएस कैसे काम करता है यह ऐप बनाता है और जब आप .js फ़ाइलों को शामिल करते हैं तो सभी नियंत्रक/निर्देश/सेवाएं शब्दकोश बनाता है।

AngularJS के निर्माण के बाद एक और स्क्रिप्ट जोड़कर, नियंत्रकों को ऐप में जोड़ा नहीं जाएगा।

आप गतिशील नियंत्रकों को जोड़ने का तरीका को देखने के लिए की जरूरत है: Loading an AngularJS controller dynamically

आपका अन्य विकल्प संस्करण और स्क्रिप्ट अपने html संदर्भ से पहले हो रही है और AngularJS निर्भरता बनाता है। इस तरह से AngularJS अपने जादू कर शुरू करता है, स्क्रिप्ट पहले ही लोड हो जाएगी।

Answer 3

उत्तर के लिए धन्यवाद। मैंने इस तरह की समस्या तय की:

<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>