详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖

 更新时间:2017年03月01日 14:39:26   作者:糖粑粑  
本篇文章主要介绍了详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

最近在使用AngularJS,发现AngularJS菜鸟教程上的东西太过于基础,很多东西都没有提及,比如今天的一个关于前端的优化问题,懒加载。通过路由实现地址分发的时候,再通过懒加载模式加载你所需的文件,比如是相关的controller,就是js,这样有利于提高首次加载的负担。

下面就是一个懒加载的实现过程。

实现的过程主要是引用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 

/**
 * mainCtrl
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 "use strict"
 app.controller("mainCtrl", mainCtrlFn);
 function mainCtrlFn() {
 this.value = "Hello World";
 }
}())

adminUser.js

 /**
 * adminUserCtrlFn
 * Created by pkcms.cn on 2016/6/24.
 */
(function () {
 app.controller('adminUserCtrl',adminUserCtrlFn);
 function adminUserCtrlFn() {
 this.value = "welcome to admin user";
 }
}());

demo下载:angularjs-oclazyload_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    分页在很多时候都能用到,这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • AngularJS表单基本操作

    AngularJS表单基本操作

    这篇文章主要为大家详细介绍了AngularJS表单基本操作的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Angularjs实现数组随机排序的方法

    Angularjs实现数组随机排序的方法

    今天小编就为大家分享一篇Angularjs实现数组随机排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • angular中如何绑定iframe中src的方法

    angular中如何绑定iframe中src的方法

    这篇文章主要介绍了angular中如何绑定iframe中src的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 深入浅析AngularJS中的module(模块)

    深入浅析AngularJS中的module(模块)

    我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块,本文给大家介绍AngularJS中的module(模块) ,感兴趣的朋友一起学习吧
    2016-01-01
  • Angularjs 手写日历的实现代码(不用插件)

    Angularjs 手写日历的实现代码(不用插件)

    本篇文章介绍了Angularjs 手写日历的实现代码(不用插件),整理了详细的代码,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • AugularJS从入门到实践(必看篇)

    AugularJS从入门到实践(必看篇)

    下面小编就为大家带来一篇AugularJS从入门到实践(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS表单详解及示例代码

    AngularJS表单详解及示例代码

    本文主要介绍AngularJS表单的知识,这里整理了表单的基础知识和简单的示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解

    这篇文章主要介绍了AngularJS中使用three.js的实例详解,我将之前自己做的demo放到了angularJS的一个component中,其实一开始是没有准备用框架的但是后面发现需要进行的双向绑定越来越多,后期表单数据的变化量也很大,最后还是选择用NG来做这些事情
    2017-07-07

最新评论