2015-12-23 73 views
6

我需要動態地在我的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使用的,是不確定的得到一個錯誤。

有沒有什麼辦法從angularjs開始處理網頁之前從服務器獲取應用程序版本幷包含腳本?

+0

你是什麼意思的應用程序版本?角? –

+0

upvote for both questions,because you did not change [previous one](http://stackoverflow.com/questions/34433750/get-script-location-from-server)當發現下一個問題時。 –

+0

應用程序版本是「/ version/get」返回的數字。 Angular - 是js框架(https://angularjs.org/) – Kirill

回答

0

有趣的問題。您可以在HTML文檔頭部的正常腳本標記中獲取版本,確保它是同步加載的,這是我相信的默認值(我相信即使在執行異步操作時也會同步加載腳本標記在他們之內)。該腳本會在頭上添加一個CSS類來表示版本號。

然後之後你可以爲有條件的腳本標記加載腳本標籤角,然後做...

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

希望有所幫助。

或者使用Node的grunt或gulp來啓動一個服務器,它使得HTTP請求獲得版本,然後根據版本寫入index.html頁面,然後啓動服務器。

值得注意的是,Node的wiredep自動將腳本標籤包含在基於bower組件的index.html中。

我覺得咕嚕或吞嚥的方法是更自然的,儘管看起來60%以上的webdev社區仍然生活在網絡的黑暗時代,從未使用或聽說過Node或咕嚕聲或吞嚥。大聲笑。

1

AngularJS的工作方式是創建應用程序,並在包含.js文件時構建所有控制器/指令/服務字典。

通過在AngularJS完成構建之後添加另一個腳本,控制器不會被添加到應用程序中。

你需要查找如何動態地添加控制器:Loading an AngularJS controller dynamically

你的其他選擇越來越版本和腳本之前,你的HTML引用,並構建AngularJS依賴。在AngularJS開始做魔術的時候,腳本已經被加載了。

0

謝謝你的回答。我這樣修復問題:

<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> 
相關問題