欢迎来到代码驿站!

AngularJS

当前位置:首页 > 网页前端 > AngularJS

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

时间:2021-01-08 12:21:18|栏目:AngularJS|点击:

在使用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']); 
    }] 
  } 
}) 

上一篇:AngularJS路由切换实现方法分析

栏    目:AngularJS

下一篇:Angular异步变同步处理方法

本文标题:Angular-Ui-Router+ocLazyLoad动态加载脚本示例

本文地址:http://www.codeinn.net/misctech/42328.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有