一尘不染

AngularJS-使用LazyLoad- Webpack动态加载脚本文件

angularjs

现在,在我的index.html页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件。

即在我的身体底部

https://somedomain.com/files/js/js.min.js

在头上

https://somedomain.com/files/css/css.min.css

但是现在,我的主页上并不需要它们,而只需要一条特定的路线。所以我一直在研究如何在路由被命中时才延迟加载这些CDN资源,即/profile只有那时?

这些不是通过bower或npm安装的,而是通过CDN URL加载的,例如jquery。如何在Angular 1和Webpack中基于路由延迟加载?


阅读 277

收藏
2020-07-04

共1个答案

一尘不染

随您去..使用 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");
        });

})();

在这里有一个现场柱塞供您演示

2020-07-04