我需要根据应用程序版本在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开始处理网页之前,有没有办法从服务器获取应用程序版本并包含脚本?
答案 0 :(得分:1)
AngularJS的工作原理是,当您包含.js
文件时,它会创建应用程序并构建所有控制器/指令/服务字典。
在AngularJS完成构建之后添加另一个脚本,控制器将不会添加到应用程序中。
您需要查找如何动态添加控制器:Loading an AngularJS controller dynamically
您的另一个选择是在您的html引用之前获取版本和脚本并构建AngularJS依赖项。这种方式,当AngularJS开始发挥其魔力时,脚本已经被加载。
答案 1 :(得分:0)
有趣的问题。
你可以在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或咕噜声或一饮而尽。洛尔。
答案 2 :(得分:0)
谢谢你的回答。我用这种方式解决了问题:
<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>