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

AngularJS的工作原理是，当您包含.js文件时，它会创建应用程序并构建所有控制器/指令/服务字典。

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

您需要查找如何动态添加控制器：Loading an AngularJS controller dynamically

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

Answer 2

有趣的问题。

你可以在HTML文档的头部获取正常脚本标签中的版本，确保它是同步加载的，这是我认为的默认值（我认为即使在异步操作中执行异步操作也会同步加载脚本标签他们）。该脚本会在头上添加一个CSS类来表示版本号。

然后你可以在脚本标签中加载角度然后执行...

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

用于条件脚本标记。

希望有所帮助。

或者使用Node的grunt或gulp来启动服务器，该服务器发出HTTP请求以获取版本，然后根据版本编写index.html页面，然后启动服务器。

值得注意的是，Node的wiredep auto会根据bower组件将脚本标签包含到index.html中。

我觉得grunt或gulp方法更自然，尽管似乎60％以上的webdev社区仍然生活在网络的黑暗时代，并且从未使用或听说过Node或咕噜声或一饮而尽。洛尔。

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>

在加载角度之前从服务器获取脚本位置

3 个答案: