Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖


Posted in Javascript onNovember 25, 2018

什么是ui-router

ui-router是AngularUI库最有用的组件之一(AngularUI库由AngularJS社区构建)。它是一个第三方路由框架,允许通过状态机制组织接口,而不是简单的URL路由。

 什么是ocLoayLoad

ocLoayLoad是AngularJS的模块按需加载器。按需加载的对象

 

简单说就是哪个页面需要什么资源,在加载哪个页面的时候在加载,而不是把所有的资源放在模板里。

 三个主要文件

<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>

推荐

1:首先下载插件 可以百度搜索,这里我推荐在线测试的 https://www.bootcdn.cn/angular-ui-router/

2:github url :https://github.com/366065186/angularjs-oclazyload

    3:Angularjs https://code.angularjs.org/

html文件(部分代码)简单说明

1:首先页面引入上面三个文件

2:在a标签中写入 ui-sref='链接路径' 标签

2:在页面定义一块区域用于显示链接内容 <ui-view></ui-view>

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

 js代码:

首先在module中注入

'ui.router', 'oc.lazyLoad'然后在通过config进行路由配置。

(function () {
 var app = angular.module("app", ['ui.router', 'oc.lazyLoad']) 
 
 // 配置路由
 app.config(function ($stateProvider) {
  $stateProvider
  // 个人中心主页
   .state('admin/index', {
    url: '/admin/index',
    templateUrl: "/admin/index",
    // 加载页面需要的js
    resolve: load(['/static/js/transfer/adminlte/index.js'])
   })
   // 分类管理列表
   .state('class/index', {
    url: '/class/index',
    templateUrl: "/class/index",
    resolve: load([
     '/static/js/transfer/adminlte/classification/index.js'
    ])
   })
   // 轮播图列表
   .state('roll', {
    url: '/roll',
    templateUrl: "/roll",
    resolve: load([
     '/static/js/transfer/adminlte/broadcat.js'
    ])
   })
   // 验证码列表
   .state('code', {
    url: '/code',
    templateUrl: "/code",
    resolve: load([
     '/static/js/transfer/adminlte/code.js'
    ])
   })
   // 电影列表
   .state('movie', {
    url: '/movie',
    templateUrl: "/movie",
    resolve: load([
     '/static/js/transfer/adminlte/movie/movie.js'
    ])
   })
   // 电影编辑
   .state('movie/edit', {
    url: '/movie/edit',
    templateUrl: "/movie/edit",
    resolve: load([
     '/static/js/transfer/adminlte/movie/movieedit.js'
    ])
   })
 });

 // 在加载该模块的时候调用$state.go('admin/index');,以激活admin/index状态。
 app.run(function ($state) {
  $state.go('admin/index');
 });
/*
   * 通过$ocLazyLoad加载页面对应的所需的JS数据
   * 通过$q异步加载JS文件数据其中使用的是promise【保护模式】
  */
function load(srcs, callback) {
 return {
  deps: [
   '$ocLazyLoad', '$q',
   function ($ocLazyLoad, $q) {
    var deferred = $q.defer();
    var promise = false;
    srcs = angular.isArray(srcs) ? srcs : srcs.split(/\s+/);
    if (!promise) {
     promise = deferred.promise;
    }
    angular.forEach(srcs,
     function (src) {
      promise = promise.then(function () {
       angular.forEach([],
        function (module) {
         if (module.name === src) {
          src = module.module ? module.name : module.files;
         }
        });
       return $ocLazyLoad.load(src);
      });
     });
    deferred.resolve();
    return callback ? promise.then(function () {
     return callback();
    }) : promise;
   }
  ]
 };
}
})();

AngularJS路由设置对象参数规则:

属性 类型 描述
template string 在ng-view中插入简单的html内容
templateUrl string 在ng-view中插入html模版文件
controller string,function / array 在当前模版上执行的controller函数
controllerAs string 为controller指定别名
redirectTo string,function 重定向的地址
resolve object 指定当前controller所依赖的其他模块

 效果图:

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

总结

以上所述是小编给大家介绍的Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
js继承实现方法详解
Dec 16 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue实现数字滚动效果
Jun 29 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 #Javascript
详解js静态检查工具eslint配置文件
Nov 23 #Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 #Javascript
创建echart多个联动的示例代码
Nov 23 #Javascript
详解Angular模板引用变量及其作用域
Nov 23 #Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 #Javascript
详解Vue2.0组件的继承与扩展
Nov 23 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python使用PyQt5的简单方法
2019/02/27 Python
Python字符串的常见操作实例小结
2019/04/08 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
Python 中@property的用法详解
2020/01/15 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
向领导表决心的话
2014/03/11 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
机械专业求职信范文
2014/07/15 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
孔庙导游词
2015/02/04 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技