当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angular-Ui-Router+ocLazyLoad动态加载脚本示例

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

2018年05月01日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网