AngularJS-使用LazyLoad- Webpack动态加载脚本文件 [英] AngularJS- Dynamic Loading of script files using LazyLoad- Webpack
问题描述
现在在我的index.html
页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件.
即 在我的身体底部
https://somedomain.com/files/js/js.min.js
并在头部
https://somedomain.com/files/css/css.min.css
但是现在我的主页上并不需要它们,而只是在一条特定的路线上.因此,我一直在研究如何在路由被击中时(例如/profile
,然后才是?)来延迟加载这些CDN资源?
这些不是通过bower或npm安装的,而是通过CDN URL加载的,例如jquery.如何在Angular 1和Webpack中基于路由懒加载它?
在这里,您可以使用 oclazyload 来实现.看看下面的代码.下方链接着一个矮人
我有一个名为 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");
});
})();
我为您的演示提供了实时柱塞此处
Right now in my index.html
page I have links to two CDN files one being a JS and the other a CSS file.
i.e. in the the bottom of my body
https://somedomain.com/files/js/js.min.js
and in the head
https://somedomain.com/files/css/css.min.css
But right now they aren't needed on my homepage but just in one particular route. So I was looking into how I can lazy load these CDN resources when that routes gets hit i.e. /profile
and only then ?
These aren't installed via bower or npm but just loaded via CDN url for example jquery. How in Angular 1 and Webpack can I lazy load that based on a route ?
Here you go.. It is made possible using oclazyload. Have a look at below code. A plunker linked below
I have a module Called myApp as below
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');
}]
}
})
});
I have another module called someApp as below
(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");
});
})();
I have a Live Plunker for your demo here
这篇关于AngularJS-使用LazyLoad- Webpack动态加载脚本文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!