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和FireFox)
Mar 09 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
js查错流程归纳
May 04 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
jQuery表单选择器用法详解
Aug 22 jQuery
详解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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
对Python发送带header的http请求方法详解
2019/01/02 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
幼儿教育感言
2014/02/05 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
高三毕业感言
2015/07/30 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android