Загрузите местоположение сценария с сервера до того, как угловой загрузится

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, не определен.

Есть ли способ получить версию приложения с сервера и включить скрипт, прежде чем angularjs начнет обрабатывать веб-страницу?

Answer 1

интересный вопрос.

Вы можете получить версию в обычном теге скрипта в заголовке HTML-документа, убедившись, что он загружен синхронно, что по умолчанию я считаю (скриптовые теги, которые, как мне кажется, загружаются синхронно, даже если выполняются асинхронные операции внутри них). Этот скрипт добавит класс CSS на голову, чтобы отобразить номер версии.

Тогда после этого вы можете загрузить угловатым тег сценария, а затем сделать ...

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

для условных тегов сценария.

Надеюсь, что это поможет.

В качестве альтернативы можно использовать Grunt или gulp узла для запуска сервера, который делает HTTP-запрос для получения версии, а затем записывает страницу index.html в соответствии с версией и затем запускает сервер.

Стоит отметить, что wiredep auto узла содержит теги скриптов в index.html, основанные на компонентах bower.

Я чувствую, что подход с ворчанием или глотком является более естественным, хотя по-прежнему кажется, что 60%% сообщества webdev все еще живут в темных веках Интернета и никогда не использовали или не слышали об Узеле или хрюкать или глотать. лол.

Answer 2

Как работает AngularJS, он создает приложение и строит все словари для контроллеров/директив/сервисов, когда вы включаете файлы .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>