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 相关文章推荐
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
js 链式延迟执行DOME
Jan 04 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
详解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
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
深入理解Python变量与常量
2016/06/02 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
上海方立数码笔试题
2013/10/18 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
学生档案自我鉴定
2013/10/07 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
委托书怎样写
2014/08/30 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
客户答谢会致辞
2015/01/20 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
乔迁新居祝福语
2019/11/04 职场文书