Angular-Ui-Router+ocLazyLoad动态加载脚本的示例分析

这篇文章主要介绍了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/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动态加载脚本的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

文章名称：Angular-Ui-Router+ocLazyLoad动态加载脚本的示例分析
网页网址：https://www.cdcxhl.com/article44/jhighe.html

成都网站建设公司_创新互联，为您提供外贸网站建设、虚拟主机、服务器托管、网站建设、营销型网站建设、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联