从文件动态注入 ui-router 中的 js/css 文件

Question

我有一个ŧest.json文件：

{
"general": 
{
"css": [
"css/test.css"
],
"js": [
"js/test.js"
]
}
}

以及我的 AngularJS 应用程序的以下代码：

$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/test.html',
resolve: {
loadAssets: ['DynamicService', function (DynamicService) {
return DynamicService.get();
}]
}
})

这是我将文件内容作为JS对象获取的服务：

.factory('DynamicService', ['$resource', '$q', '$http',
function ($resource, $q, $http) {
var dynService = {};
var dynUrl = 'api/dynService'; // API to get "ŧest.json" file content
var error = function (response) {
// ...
};
dynService.get = function () {
return $http
.get(dynUrl)
.then(function (response) {
return response.data;
}, error);
};
return dynService;
}]);

我想在完成路由器初始化之前，css/test.css和js/test.js文件动态加载这些文件，并在读取ŧest.json文件后拍摄，以便在访问/时，这些文件将被注入到DOM。

如您所见，我在$stateProvider中尝试了该代码，但它不起作用。

请帮忙吗？ 我有角度v1.7.0

谢谢

Answer 1

实际上你走在正确的方向上，Ui-Router 在获得 Promise 时resolve属性，它会等到它解析，然后才会过渡到状态 ('/'(。

您需要做的就是返回一个承诺，该承诺等到所有css和js文件都加载完毕。 您可以使用接收一系列承诺并返回新承诺的$q.all来实现这一点，该承诺将在所有承诺都解决时解析。

小例子：

factory('DynamicService', ['$resource', '$q', '$http',
function($resource, $q, $http) {
var dynService = {};
var dynUrl = 'api/dynService'; // API to get "ŧest.json" file content
var error = function(response) {
// ...
};
var loadAsset = function(url, type) {
var defered = $q.defer();
if (type === 'js') {
var script = document.createElement('script');
script.src = url;
script.onload = defered.resolve;
script.onerror = defered.reject;
document.body.appendChild(script);
} else if (type === 'css') {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
link.onload = defered.resolve;
link.onerror = defered.reject;
document.body.appendChild(link);
}
return defered.promise;
}
var loadAssets = function(assets) {
// prepare a list of promises & return promise that waits to all.
var allPromises = ['css', 'js'].reduce((acc, key) => {
var currentAssets = assets.general[key].map((url) => loadAsset(url, key));
return acc.concat(currentAssets);
}, []);
return $q.all(allPromises);
}
dynService.get = function() {
return $http
.get(dynUrl)
.then(function(response) {
return loadAssets(response.data);
}, error);
};
return dynService;
}
]);