文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

AngularJS怎么通过ocLazyLoad实现动态懒加载模块和依赖

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关AngularJS怎么通过ocLazyLoad实现动态懒加载模块和依赖,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

实现的过程主要是引用3个主要的JS文件:

<script src="angular/1.4.8/angular/angular.min.js"></script>
<script src="angular/ui-router/release/angular-ui-router.min.js"></script>
<script src="angular/oclazyload/src/ocLazyLoad.min.js"></script>

然后通过 APP 配置,将依赖的脚本进行注入操作:

var app = angular.module('pkcms', ["ui.router", "oc.lazyLoad"]);

  app.config(["$provide", "$compileProvider", "$controllerProvider", "$filterProvider",

     function ($provide, $compileProvider, $controllerProvider, $filterProvider) {

       app.controller = $controllerProvider.register;

       app.directive = $compileProvider.directive;

       app.filter = $filterProvider.register;

       app.factory = $provide.factory;

       app.service = $provide.service;

       app.constant = $provide.constant;

     }]);

    // 按模块化加载其他的脚本文件

      app.constant('Modules_Config', [

       {

         name: 'treeControl',

         serie: true,

         files: [

           "Scripts/angular-bootstrap/ui-bootstrap-tpls-0.14.3.min.js"

         ]<br>}]);

      app.config(["$ocLazyLoadProvider","Modules_Config",routeFn]);

      function routeFn($ocLazyLoadProvider,Modules_Config){

       $ocLazyLoadProvider.config({

       debug:false,

       events:false,

       modules:Modules_Config

   });

};

以上是初始化动态加载的配置过程。

接着是建立路由:

"use strict"
app.config(["$stateProvider","$urlRouterProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
 $urlRouterProvider.otherwise("/main");
 $stateProvider
 .state("main",{
 url:"/main",
 templateUrl:"views/main.html",
 controller:"mainCtrl",
 controllerAs:"main",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/main.js");
 }]
 }
 })
 .state("adminUser",{
 url:"/adminUser",
 templateUrl:"views/adminUser.html",
 controller:"adminUserCtrl",
 controllerAs:"adminUser",
 resolve:{
 deps:["$ocLazyLoad",function($ocLazyLoad){
 return $ocLazyLoad.load("controllers/adminUser.js");
 }]
 }
 })
};

最后是按路由配置的在对应目录下建2个HTML页面文件和2个JS文件用做测试

main.html

<div>
 {{main.value}}
</div>

adminUser.html

<div>
 {{adminUser.value}}
</div>

main.js 


(function () {
 "use strict"
 app.controller("mainCtrl", mainCtrlFn);
 function mainCtrlFn() {
 this.value = "Hello World";
 }
}())

adminUser.js

 
(function () {
 app.controller('adminUserCtrl',adminUserCtrlFn);
 function adminUserCtrlFn() {
 this.value = "welcome to admin user";
 }
}());

关于“AngularJS怎么通过ocLazyLoad实现动态懒加载模块和依赖”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯