十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了Angular-Ui-Router+ocLazyLoad动态加载脚本的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联专注于网站建设,为客户提供成都网站制作、成都网站设计、网页设计开发服务,多年建网站服务经验,各类网站都可以开发,品牌网站制作,公司官网,公司展示网站,网站设计,建网站费用,建网站多少钱,价格优惠,收费合理。
在使用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/h2.html', controller: 'H2Ctrl' } }, resolve: { loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load(['components/header/H2.js', 'components/header/header.js', 'components/header/h4.js', 'components/header/header1.css']); }] } })
感谢你能够认真阅读完这篇文章,希望小编分享的“Angular-Ui-Router+ocLazyLoad动态加载脚本的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!