Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
什么是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>
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 实现动态(懒)加载模块和依赖的更多相关文章
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...
- AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转
http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签: ...
- Angular性能优化实践——巧用第三方组件和懒加载技术
应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...
- AngularJs 动态加载模块和依赖
最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...
- Angular中懒加载一个模块并动态创建显示该模块下声明的组件
angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...
- angular 引入ocLazyLoad实现js、controller懒加载
项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...
- angular懒加载的一些坑
写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...
- angularjs的懒加载
1.angularJS懒加载依赖模块 //设置 .config [ '$ocLazyLoadProvider' ($ocLazyLoadProvider) -> # We configure o ...
- AngularJS中多个ng-app(手动加载模块)
1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...
随机推荐
- 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践
- 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践 - 实验任务 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主 ...
- C#应用编程小例子-03-展示另一个窗体
C#应用编程小例子-03-展示另一个窗体 using System; using System.Collections.Generic; using System.ComponentModel; us ...
- 如何把遗留的Java应用托管在Service Fabric中
一.概述 众所周知,微服务化尤其对遗留系统进行微服务化一般采用"Lift and Shift"的模式进行. Service Fabric作为一个微服务托管平台,不仅仅可以在上面跑. ...
- html_jQuery_ajax
ajax核心对象: XMLHttpRequest 那年创建的XMLHttpRequest对象 创建的.. ajax 几种常用方法: load(); $.get(); $.post(); $.getS ...
- UOJ#375. 【ZJOI2018】迷宫
原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ375.html 题解 首先,我们可以建出一个 k 个点的自动机,第 i 个点表示当前数对 k 取模为 i- ...
- 如何明确区分代码中的1和l
如poly1d 单独将其复制到记事本,然后按ctrl+F,输入要查找的对象,数字1或者小写字母l,找到的对象会已高亮表示,所以就可以确定了高亮表示的是数字1还是字母l.
- jetbrains 系列 webstorm、IntelliJ Idea 免费激活方法免激活码
方法一: 到网站 http://idea.lanyus.com/ 获取注册码. 方法二:填入下面的license server: http://intellij.mandroid.cn/ http:/ ...
- BlockChain:Py实现区块链简单场景应用:程序猿记录在区块里的收入记录图——Jason niu
# -*- coding: utf-8 -*- ''' Created on 2018年3月11日 @author: Jason niu ''' import hashlib #该模块实现了诸多安全哈 ...
- ubuntu“少折腾”
1.python版本默认python3 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 sudo ...
- 怎样在ASP.NET(C#) 使用Json序列化反序列化问题?
using System; using System.Collections.Generic; using System.Web; using System.Web.Script.Serializat ...