Javascript 从文件在ui路由器中动态注入js/css文件

我有一个

ŧ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

中尝试了该代码，但它不起作用

需要帮忙吗？ 我有angularjs

v1.7.0

---

谢谢

事实上，您的方向是正确的，Ui Router

resolve

属性在获得承诺时，它将等待解决，直到解决，然后才会转换到状态（“/”）

您需要做的就是返回一个承诺，等待所有

css

&

js

文件加载完毕。 您可以使用接收承诺数组并返回一个新承诺来实现这一点，该承诺将在所有承诺都得到解决时得到解决

小例子：

factory（'DynamicService'，['$resource'，'$q'，'$http'，
函数（$resource，$q，$http）{
var dynService={}；
var dynUrl='api/dynService'；//获取“ŧest.json”文件内容的api
var错误=功能（响应）{
// ...
};
var loadAsset=函数（url，类型）{
var defered=$q.defer（）；
如果（类型=='js'）{
var script=document.createElement（'script'）；
script.src=url；
script.onload=defered.resolve；
script.onerror=defered.reject；
document.body.appendChild（脚本）；
}else if（type==='css'）{
var link=document.createElement（'link'）；
link.rel='stylesheet'；
link.href=url；
link.onload=defered.resolve；
link.onerror=延迟。拒绝；
document.body.appendChild（链接）；
}
延期归还。承诺；
}
var loadAssets=功能（资产）{
//准备一份承诺列表，并返回等待所有人的承诺。
var allPromises=['css'，'js'].reduce（（acc，key）=>{
var currentAssets=assets.general[key].map（（url）=>loadAsset（url，key））；
返回会计科目（流动资产）；
}, []);
返回$q.all（所有承诺）；
}
dynService.get=函数（）{
返回$http
.get（dynUrl）
.然后（功能（响应）{
返回loadAssets（response.data）；
}，错误）；
};
返回动态服务；
}
]);