AngularJS-使用LazyLoad-Webpack动态加载脚本文件
发布时间：2020-12-17 07:41:16 所属栏目：安全 来源：网络整理
导读：现在在我的index.html页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件. 即 在我身体的底部 https://somedomain.com/files/js/js.min.js 并在头上 https://somedomain.com/files/css/css.min.css 但是现在,我们的主页上并不需要它,只是在一条特定的路
|
现在在我的index.html页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件.
即 https://somedomain.com/files/js/js.min.js 并在头上 https://somedomain.com/files/css/css.min.css 但是现在,我们的主页上并不需要它,只是在一条特定的路线上.所以我正在研究如何懒惰加载这些CDN资源,当路线被命中,即/个人资料,然后呢？ 这些不是通过bower或npm安装,而是通过CDN网址加载,例如jquery.如何在角度1和Webpack我可以懒惰加载基于路由？
这里你可以使用oclazyload.看下面的代码.下面连接一个plunker
我有一个模块称为myApp如下 angular.module('myApp',['ui.router','oc.lazyLoad'])
.config(function ($stateProvider,$locationProvider,$ocLazyLoadProvider) {
$stateProvider
.state("home",{
url: "/home",templateUrl: "Home.html",controller: 'homeCtrl',resolve: {
loadMyCtrl: ['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load('homeCtrl.js');
}]
}
})
.state("profile",{
url:"/profile",templateUrl: "profile.html",resolve: {
loadMyCtrl: ['$ocLazyLoad',function ($ocLazyLoad) {
return $ocLazyLoad.load('someModule.js');
}]
}
})
});
我还有一个名为someApp的模块如下 (function () {
var mynewapp=angular.module('someApp',['myApp']);
mynewapp.config(function(){
//your code to route from here!
});
mynewapp.controller("profileCtrl",function ($scope) {
console.log("reached profile controller");
});
})();
我有一个Live Plunker为您演示here （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |