Angular-Ui-Router+ocLazyLoad动态加载脚本示例
编程学习 2021-07-04 19:20www.dzhlxh.cn编程入门
本篇文章主要介绍了Angular-Ui-Router+ocLazyLoad动态加载脚本示例，可以提高加载速度，使用户体验更好，有兴趣的可以了解一下。
在使用angular过程以前同事是采取一次性加载方式，在index页面一次性加载所有的js跟css，这种加载方式只适合教学和小型项目中，中大型不建议使用，加载速度影响到用户体验。
在使用了Ui-Router以后，我第一想法就是把每个功能组件化，在请求视图的时候再去加载该页面js和css，index页面主要加载必须文件：angular.js
于是尝试了下，这样去写，但是发现angular报错，原因是控制器没有注入主程序
后面在angular库里面发现ocLazyLoad，这是一个为angular量身定制脚本加载器，它只有15K
使用它很简单：
依次载入文件
<script src="framework/angular/angular.min.js"></script> <script src="framework/angular-ui-router.js"></script> <script src="framework/ocLazyLoad.min.js"></script> <script src="framework/app.js"></script>
跟平常写路由一样只是需要多一层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']);
}]
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：使用grunt合并压缩js和css文件的方法
下一篇：浅谈Vue.js