什么是ui-router

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

什么是ocLoayLoad

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

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

三个主要文件

  1. <script src="angular/1.4.8/angular/angular.min.js"></script>
  2. <script src="angular/ui-router/release/angular-ui-router.min.js"></script>
  3. <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 实现动态(懒)加载模块和依赖的更多相关文章

  1. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖

    好了,现进入正题,在 AngularJs 实现动态(懒)加载主要是依赖于3个主JS文件和一段依赖的脚本. 实现的过程主要是引用3个主要的JS文件 <script src="angula ...

  2. AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖-转

    http://blog.csdn.net/zhangh8627/article/details/51752872 AngularJs 通过 ocLazyLoad 实现动态(懒)加载模块和依赖 标签:  ...

  3. Angular性能优化实践——巧用第三方组件和懒加载技术

    应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...

  4. AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔 ...

  5. Angular中懒加载一个模块并动态创建显示该模块下声明的组件

    angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组 ...

  6. angular 引入ocLazyLoad实现js、controller懒加载

    项目之前是直接在index.html中引用了controller.js,其中包含了所有的controller.现引入ocLazyLoad实现按需加载,到指定页面再加载指定js.controller 1 ...

  7. angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...

  8. angularjs的懒加载

    1.angularJS懒加载依赖模块 //设置 .config [ '$ocLazyLoadProvider' ($ocLazyLoadProvider) -> # We configure o ...

  9. AngularJS中多个ng-app(手动加载模块)

    1.当有多个ng-app时:(首先是要加载angularJS) <div ng-app=""> <p>姓名:<input type="tex ...

随机推荐

  1. 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践

    - 2018-2019-2 网络对抗技术 20165206 Exp2 后门原理与实践 - 实验任务 (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用socat获取主 ...

  2. C#应用编程小例子-03-展示另一个窗体

    C#应用编程小例子-03-展示另一个窗体 using System; using System.Collections.Generic; using System.ComponentModel; us ...

  3. 如何把遗留的Java应用托管在Service Fabric中

    一.概述 众所周知,微服务化尤其对遗留系统进行微服务化一般采用"Lift and Shift"的模式进行. Service Fabric作为一个微服务托管平台,不仅仅可以在上面跑. ...

  4. html_jQuery_ajax

    ajax核心对象:  XMLHttpRequest 那年创建的XMLHttpRequest对象 创建的.. ajax 几种常用方法: load(); $.get(); $.post(); $.getS ...

  5. UOJ#375. 【ZJOI2018】迷宫

    原文链接https://www.cnblogs.com/zhouzhendong/p/UOJ375.html 题解 首先,我们可以建出一个 k 个点的自动机,第 i 个点表示当前数对 k 取模为 i- ...

  6. 如何明确区分代码中的1和l

    如poly1d 单独将其复制到记事本,然后按ctrl+F,输入要查找的对象,数字1或者小写字母l,找到的对象会已高亮表示,所以就可以确定了高亮表示的是数字1还是字母l.

  7. jetbrains 系列 webstorm、IntelliJ Idea 免费激活方法免激活码

    方法一: 到网站 http://idea.lanyus.com/ 获取注册码. 方法二:填入下面的license server: http://intellij.mandroid.cn/ http:/ ...

  8. BlockChain:Py实现区块链简单场景应用:程序猿记录在区块里的收入记录图——Jason niu

    # -*- coding: utf-8 -*- ''' Created on 2018年3月11日 @author: Jason niu ''' import hashlib #该模块实现了诸多安全哈 ...

  9. ubuntu“少折腾”

    1.python版本默认python3 sudo update-alternatives --install /usr/bin/python python /usr/bin/python2 sudo ...

  10. 怎样在ASP.NET(C#) 使用Json序列化反序列化问题?

    using System; using System.Collections.Generic; using System.Web; using System.Web.Script.Serializat ...