最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
时间:2017-05-15 编辑:简简单单 来源:一聚教程网
在使用angular过程以前同事是采取一次性加载方式,在index页面一次性加载所有的js跟css,这种加载方式只适合教学和小型项目中,中大型不建议使用,加载速度影响到用户体验。
在使用了Ui-Router以后,我第一想法就是把每个功能组件化,在请求视图的时候再去加载该页面js和css,index页面主要加载必须文件:angular.js
于是尝试了下,这样去写,但是发现angular报错,原因是控制器没有注入主程序
后面在angular库里面发现ocLazyLoad,这是一个为angular量身定制脚本加载器,它只有15K
使用它很简单:
依次载入文件
代码如下 | 复制代码 |
跟平常写路由一样只是需要多一层resolve
路由在渲染之前会执行resolve对象比如用来加载js和css,当然还有其他用处
代码:(不用担心脚本重复加载,之前加载的脚本会在浏览器做缓存)
代码如下 | 复制代码 |
angular.module('myRouters', ['ui.router','oc.lazyLoad']) .state('index', { url:'/index', title:' | !', views: { 'A': { templateUrl:'components/header/header.html', controller:'headerCtrl' }, 'C@index': { templateUrl:'components/header/h1.html', controller:'H2Ctrl' } }, resolve: { loadMyCtrl: ['$ocLazyLoad',function($ocLazyLoad) { return$ocLazyLoad.load(['components/header/H2.js', 'components/header/header.js', 'components/header/h3.js', 'components/header/header1.css']); }] } }) |
相关文章
- vue2笔记 ― vue-router路由懒加载的实现 05-20
- b站视频加载出错怎么办 05-10
- Framewrok7 预加载提示模态框(Preloader Modal)用法 09-17
- Framework7 加载指示符(Preloader)使用说明 09-17
- prisma加载不出怎么办 Prisma一直加载中怎么办 07-29
- 生化危机0:HD重制版怎么加载DLC 加载DLC方法分享 01-22