Get script location from server

Question

I have a controller (spring) that returns the version of the application (" version/get ") and I need to use this version to indicate the location of the js file:

 <script src="/r/{{appVersion}}/js/app.js"></script> 

How to do this using javascript or angularjs?

I tried to do something like this:

 module.controller('ResourceLoaderController', [ '$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) { 'use strict'; $scope.getVersion = function() { $http.get('/version/get').then(function (response) { $rootScope.appVer = response.data; }); }; $scope.getVersion(); }]); 

And then:

 <script src="js/controllers/ResourceLoaderController.js"></script> <div ng-controller="ResourceLoaderController"> <link rel="stylesheet" type="text/css" href="/r/{{appVer.text}}/css/app.css" charset="utf-8"> <script src="/r/{{appVer.text}}/js/app.js"></script> </div> 

But I can not use the <div> in the header ...

Answer 1

Try this in your $http success.

 // use global document since Angular $document is weak var s = document.createElement('script'); s.src = '/r/'+response.data.text+'/js/app.js'; document.body.appendChild(s); 

It will create a new script element with the correct src.

Angular processes a web page only after the page loads and by which the time of the <script> processed at a time (script tags are executed only once). Other tags, such as img , will change the appearance of the screen when their properties after loading the page ... but, as already mentioned, the script is processed once and even then during page loading and before Angular can ever gain control.

So you need to add the script tag. Or you can achieve this by server-side coding.

Answer 2

I think it might work

1 . Have a script tag and a link tag, provide them with specific identifiers,

<link rel="stylesheet" type="text/css" href="" charset="utf-8" id="theCSS"> <script src="" id="theScript"></script>

2 . Change your controller to look like

 module.controller('ResourceLoaderController', [ '$rootScope', '$scope', '$http', function ($rootScope, $scope, $http) { 'use strict'; $scope.getVersion = function() { $http.get('/version/get').then(function (response) { // $rootScope.appVer = response.data; var scriptElement = angular.element(document.querySelector( '#theScript')); scriptElement.src = '/r/' + response.data.text +'/js/app.js'; var cssElement = angular.element(document.querySelector( '#theCSS')); cssElement.href = '/r/' + response.data.text +'/css/app.css'; }); }; $scope.getVersion(); }]); 

Put the ng-controller attribute in the html tag / head tag.

Alternatively try creating dynamic script and css tags.

Answer 3

You should dynamically inject a script like:

 $scope.getVersion = function() { $http.get('/version/get').then(function (response) { $rootScope.appVer = response.data; var myScript = document.createElement('script'); myScript.type ='text/javascript'; myScript.async ='true'; myScript.src = window.location.protocol + "//" + window.location.host + "/r/" + response.data + "/js/app.js" document.getElementsByTagName('head')[0].appendChild(myScript); }); }; $scope.getVersion();