现在,在我的index.html页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件。
index.html
即在我的身体底部
https://somedomain.com/files/js/js.min.js
在头上
https://somedomain.com/files/css/css.min.css
但是现在,我的主页上并不需要它们,而只需要一条特定的路线。所以我一直在研究如何在路由被命中时才延迟加载这些CDN资源,即/profile只有那时?
/profile
这些不是通过bower或npm安装的,而是通过CDN URL加载的,例如jquery。如何在Angular 1和Webpack中基于路由延迟加载?
随您去..使用 oclazyload 使其成为可能。看看下面的代码。下方有一个pl子
我有一个名为 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"); }); })();
我在这里有一个现场柱塞供您演示