Geek Answers Handbook

Get script location from server before loading angular

I need to dynamically add a script on my index.html page depending on the version of the application. I have a controller that returns the version of the application and tried to do this using 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(); }]);

This works, but there are angular controllers in app.js , and I get a runtime error that the AuthController used in index.html is undefined.

Is there a way to get the version of the application from the server and enable the script before angularjs starts processing the web page?

+6
source share
3 answers

How AngularJS works, it creates an application and builds all the dictionaries for controllers / directives / services when including .js files.

By adding another script after AngularJS completes their creation, the controllers will not be added to the application.

You need to see how to dynamically add controllers: Dynamically load an AngularJS controller

Your other option is to get the version and script BEFORE your html links and build the AngularJS dependency. Thus, by the time AngularJS starts to do its magic, scripts will already be loaded.

+1
source

interest Ask.

You can get the version in the regular script tag in the header of the HTML document, making sure that it is loaded synchronously, which I believe by default (script tags that, it seems to me, are loaded synchronously, even when async operations are performed on them). This script will add a CSS class on the head to display the version number.

Then after that you can load angular into the script tag and then do ...

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

for conditional script tags.

Hope this helps.

Alternatively, use Node grunt or gulp to start the server, which makes an HTTP request to get the version, then writes the index.html page according to the version and then starts the server.

It is worth noting that Node wiredep auto includes script tags in index.html based on bower components.

I feel that the grunt or gulp approach is more natural, although it still seems that 60 %% of the webdev community still live in web shadow ages and have never used or heard of Node or grunted or gulp. lol.

0
source

Thanks for answers. I fixed the problem as follows:

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

More articles:


All Articles