Javascript 在加载angular之前从服务器获取脚本位置

我需要根据应用程序版本在我的

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

中有角度控制器，我在运行时遇到一个错误，即

index.html

中使用的

AuthController

，未定义

在angularjs开始处理网页之前，有没有办法从服务器获取应用程序版本并包含脚本？

有趣的问题

您可以在HTML文档头部的普通脚本标记中获取版本，确保同步加载，这是我认为的默认设置（脚本标记即使在其中执行异步操作时也是同步加载的）。该脚本将在头部添加一个CSS类来表示版本号

然后，您可以在脚本标记中加载angular，然后执行

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

用于条件脚本标记

希望有帮助

或者使用节点的咕噜声或咕噜声启动服务器，该服务器发出HTTP请求以获取版本，然后根据版本写入index.html页面，然后启动服务器

值得注意的是，Node的wiredep auto基于bower组件将脚本标记包含到index.html中

---

我觉得咕噜或者咕噜或者咕噜更自然，尽管60%以上的webdev社区似乎仍然生活在网络的黑暗时代，从未使用或者听说过Node或者咕噜或者咕噜。哈哈。

AngularJS的工作原理是，当您包含

.js

文件时，它创建应用程序并构建所有控制器/指令/服务字典

通过在AngularJS完成构建后添加另一个脚本，控制器将不会添加到应用程序中

您需要查看如何动态添加控制器：

---

另一个选择是在html引用和构建AngularJS依赖项之前获取版本和脚本。这样，当AngularJS开始发挥其魔力时，脚本已经加载。

谢谢您的回答。我这样解决了这个问题：

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

var-xmlhttp；
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}否则{
xmlhttp=新的ActiveXObject（“Microsoft.XMLXTTP”）；
}
函数getVersion（）{
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
var version=xmlhttp.responseText；
var link=document.createElement（“链接”）；
link.setAttribute（“类型”、“文本/css”）；
setAttribute（“rel”、“样式表”）；
link.setAttribute（“href”、'/r/'+version+'/css/app.css'）；
document.getElementsByTagName（“头”）[0].appendChild（链接）；
var script=document.createElement（“脚本”）；
setAttribute（“type”、“text/javascript”）；
setAttribute（“src”、'/r/'+version+'/js/app.js'）；
document.getElementsByTagName（“head”）[0].appendChild（脚本）；
}else if（xmlhttp.status！=200）{
log（“出错了。HTTP状态：+xmlhttp.Status”）；
}
};
open（“GET”，“version/GET”，true）；
xmlhttp.send（）；
}
getVersion（）；

应用程序版本是什么意思？对这两个问题都投票，因为在发现下一个问题时您没有更改。应用程序版本是“/version/get”返回的数字。Angular是js框架（），通常，应用程序在运行时不会获得自己的版本号。您可能会部署同一应用程序的多个版本，使用URL中的/v2或/v3来区分……所以我很好奇为什么您不在构建过程中处理版本控制。