欢迎大家讨论与指导 : )

  初学者,有不足的地方希望各位指出

  一、前言

    ocLoayLoad是AngularJS的模块按需加载器。一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题。但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好。二来,分模块加载易于团队协作,减低代码冲突。

  二、按需加载的对象

    各个Controller模块、Directive模块、Server模块、template模板,其实这些都是一些 .js文件或者 .html文件 。

    三 、按需加载的场景

    三、1 路由加载(resolve/uiRouter)

      基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作,它帮助我们初始化我们所要前往的那一个视图。只有be solved(操作完成),controller才会被实例化。因此,我们可以在resolve步骤里面加载我们所需要的controller。

    $stateProvider
.state('index', {
url: '/',
views: {
'lazyLoadView': {
templateUrl: 'partials/main.html',
controller: 'AppCtrl'
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){
return $ocLazyLoad.load('js/AppCtrl.js')
}]
}
})

    其中,'js/AppCtrl.js'里面放着一个我们所需要的controller

angular.module('myApp')
.controller('AppCtrl', ['$scope', function($scope){
//...
}])

     三、2 依赖加载

      在依赖项里面导入我们所需要的一系列模块(这里有一层'[ ]'符合哦)

angular.module('gridModule', [[
'bower_components/angular-ui-grid/ui-grid.js',
'bower_components/angular-ui-grid/ui-grid.css'
]]).controller('GridModuleCtrl', ['$scope', function($scope){
//...
}])

     三、3 Cotroller里动态加载

angular.module('myApp')
.controller('AppCtrl', ['$scope','$ocLazyLoad', function($scope, $ocLazyLoad){
$scope.loadBootstrap = function(){
$ocLazyLoad.load([
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/bootstrap/dist/css/bootstrap.css'
])
}
var unbind = $scope.$on('ocLazyLoad.fileLoaded', function(e, file){
$scope.bootstrapLoaded = true;
console.log('下载boot完成');
unbind();
})
}])

     三、4 template包含加载(config)

    如何处理我们所加载的html模板里面嵌套的controller呢?这里需要oc-lazy-load指令和$ocLazyLoadProvider的配置

/*template A.html*/
<h1>hi i am hzp </h1>
<div oc-lazy-load="gridModule">
<div ng-controller="GridModuleCtrl">
<span>{{test}}</span><br/>
<div ui-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
</div>
    $ocLazyLoadProvider.config({
modules: [{
name: 'gridModule',
files: [
'js/gridModule.js'
]
}]
})

    四、如何组织按需加载

    分路由、按功能来区分、打包成不同的多个或单个controller.directive.server模块

  

AngularJS中的按需加载ocLazyLoad的更多相关文章

  1. AngularJS中的按需加载ocLazyLoad插件应用;

    一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越 ...

  2. webpack中实现按需加载

    webpack中的require.ensure()可以实现按需加载资源包括js,css等,它会给里面require的文件单独打包,不和主文件打包在一起,webpack会自动配置名字,如0.js,1.j ...

  3. .NET中的按需加载/延迟加载 Lazy<T>

    业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载 延迟初始化出现于.NET 4.0,主要用于 ...

  4. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  5. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

  6. 配合angularjs中interceptor一劳永逸的加载$ionicloading的方法

    在我们日常的项目开发中,每当页面需要和服务端存在交互的时候,为了界面的友好,我们都会在界面中给个loading的加载图标,当从服务端获取到数据或者已经把本地数据送到服务端并且得到相应的回应的时候我们就 ...

  7. nuxt中iview按需加载配置

    在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'ivie ...

  8. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  9. Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

随机推荐

  1. 【代码笔记】iOS-浮动的云

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  2. 【代码笔记】iOS-3个section,每个都有header.

    一,效果图: 二,工程目录. 三,代码 RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  3. Play Framework安装和配置

    安装环境: jdk 1.7; play 1.3.1; eclipse 安装指南:http://play-framework.herokuapp.com/zh/install 安装Play Framew ...

  4. 见证历史 -- 2013 NBA 热火夺冠之路有感

    见证历史-- 2013 NBA 热火夺冠之路有感今年NBA季后赛从第一轮看起,到最终的热火夺冠,应该看得是最爽的一次.但一些情节和细节,回忆起来,深有感悟. 1. 做人要低调詹宁斯豪言演黑八雄鹿本赛季 ...

  5. android双击返回键退出程序的实现

    /** * 菜单.返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-gen ...

  6. SQL Server 2014新特性——事务持久性控制

    控制事务持久性 SQL Server 2014之后事务分为2种:完全持久, 默认或延迟的持久. 完全持久,当事务被提交之后,会把事务日志写入到磁盘,完成后返回给客户端. 延迟持久,事务提交是异步的,在 ...

  7. SQL Server:服务器角色

    角色 描述 sysadmin 执行SQL Server中的任何动作 serveradmin 配置服务器设置 setupadmin 安装复制和管理扩展过程 securityadmin 管理登录和CREA ...

  8. HTML5游戏开发引擎,初识CreateJS

    CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...

  9. 说下查询动作 Pivot

    上一篇说了一下查询5步走~然后就几天_(:з」∠)_ ~今天继续说一下其中 表里面操作符里面的 Pivot ~ Pivot 在实现行转列的时候灰常有用.通常一个例子 ), ),LoginTime TI ...

  10. 今天简单说一下cdc 的使用

    从08开始,sql server 提供了一种叫做 变更数据捕获 cdc(Change Data Capture) 的功能,可以通过启用这个功能,来实现查看数据库中的表对象的数据的变化情况.(我感觉就是 ...