详解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 ocLazyLoad分步加载js文件实例
  • AngularJS中的按需加载ocLazyLoad示例
  • JS实现图片延迟加载并淡入淡出效果的简单方法
  • Webpack 实现 AngularJS 的延迟加载
  • AngularJS中的Directive实现延迟加载
  • javascript实现图片延迟加载方法汇总(三种方法)
  • js实现延迟加载的方法
  • 关于延迟加载JavaScript
  • 浅析js预加载/延迟加载
  • AngularJS使用ocLazyLoad实现js延迟加载
张贴在3