Get script location from server

Question

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

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

How can I 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't use <div> in header...

Answer 1

I think this might just work,

1. Have a script tag and link tag, provide them certain Ids,

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

2. Modify 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 the script and css tags dynamically.