脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angular2 动态加载

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

 更新时间：2017年03月02日 10:29:32   作者：侞婼冇罪  
本篇文章主要介绍了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']); 
    }] 
  } 
})

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

您可能感兴趣的文章:

相关文章

  • Angular中innerHTML标签的样式不起作用的原因解析

    Angular中innerHTML标签的样式不起作用的原因解析

    这篇文章主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-06-06
  • Angular 2父子组件数据传递之@Input和@Output详解(下)

    Angular 2父子组件数据传递之@Input和@Output详解(下)

    这篇文章主要给大家介绍了关于Angular 2父子组件数据传递之@Input和@Output的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • AngularJS使用拦截器实现的loading功能完整实例

    AngularJS使用拦截器实现的loading功能完整实例

    这篇文章主要介绍了AngularJS使用拦截器实现的loading功能,结合完整实例形式分析了AngularJS拦截器的设置、调用及loading功能实现技巧,需要的朋友可以参考下
    2017-05-05
  • AngularJS实现进度条功能示例

    AngularJS实现进度条功能示例

    这篇文章主要介绍了AngularJS实现进度条功能,结合具体完整实例形式分析了AngularJS实现进度条功能的原理、相关知识点与注意事项,需要的朋友可以参考下
    2017-07-07
  • AngularJS中$watch和$timeout的使用示例

    AngularJS中$watch和$timeout的使用示例

    这篇文章给大家介绍了AngularJS中$watch和$timeout的使用例子，通过示例代码相信更能让大家理解，有需要的朋友们下面来一起看看吧。
    2016-09-09
  • 什么是 AngularJS？AngularJS简介

    什么是 AngularJS？AngularJS简介

    这篇文章主要介绍了什么是 AngularJS？AngularJS简介,本文讲解了AngularJS方方面面的基础知识,AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件,需要的朋友可以参考下
    2014-12-12
  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    这篇文章主要介绍了AngularJS基于ui-route实现深层路由的方法,涉及AngularJS路由嵌套操作相关实现步骤与技巧,需要的朋友可以参考下
    2016-12-12
  • Angular.js与Bootstrap相结合实现手风琴菜单代码

    Angular.js与Bootstrap相结合实现手风琴菜单代码

    这篇文章主要介绍了Angular.js与Bootstrap相结合实现手风琴菜单的相关资料,需要的朋友可以参考下
    2016-04-04
  • angular 内存溢出的问题解决

    angular 内存溢出的问题解决

    这篇文章主要介绍了angular 内存溢出的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Angular Excel 导入与导出的实现代码

    Angular Excel 导入与导出的实现代码

    这篇文章主要介绍了Angular Excel 导入与导出的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04

最新评论