ocLazyLoad angular 按需加载

ionic 框架

1.引用

index.html 加载 <script type="text/javascript" src="lib/oclazyload/ocLazyLoad.min.js"></script>

2.注入

angular.module(‘starter‘, [‘ionic‘, ‘oc.lazyLoad‘])

3.配置

.state(‘app.myinfo‘, {
            url: ‘/user/myinfo‘,
            views: {
                ‘menuContent‘: {
                    templateUrl: ‘templates/user/myinfo.html‘,
                    controller: ‘myinfoCtrl‘
                }
            }
          , resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
              loadMyCtrl: [‘$ocLazyLoad‘, function ($ocLazyLoad) {
                  // you can lazy load files for an existing module
                  return $ocLazyLoad.load([‘js/controllersuser.js‘, ‘js/directive.js‘]);
              }]
          }
        })
时间: 2024-10-26 11:03:38

ocLazyLoad angular 按需加载的相关文章

angular 按需加载

 angular.module('app',[]) .controller('ctrl',function ($http,$scope){ //ctrl控制器,名称作用的范围 html中ng-controoler='ctrl' var page=1;  //读取的页数 f=false                         //判断是否读取内容 $scope.posts=[]           //数组接受每次划过相应位置加载的键值对 function push() { if(!f)

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

Vue按需加载提升用户体验

Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染. 原图文来自http://www.cnblogs.com/Kummy/p/5254754.html vue 按需加载  相关文章: 1: http://cn.vuejs.org/guide/components.html#异步组件 2

AngularJS中的按需加载ocLazyLoad

欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越来越慢,用户体验不好.二来,分模块加载易于团队协作,减低代码冲突. 二.按需加载的对象 各个Controller模块.Directive模块.Server模块.template模板,其实这些都是一些 .js文件或者 .html文件 .  

angualrjs+AMD规范示例(主要使用requirejs)-实现按需加载

1.背景说明 最近一段时间,一直在研究angularjs及AMD.common规范等.但怎么把angularjs有效的与AMD模块组织结合在一起使用,还是值得深思. 本人研究一段时间,为了巩固下研究成果,特意写了一个demo,仅供参考. 2.使用技术点说明       kendo:主要使用kendo开源一些组件(由于本人对kendo研究比较多) angular:angular作为基础框架(MVC.DI.数据绑定.页面路由.相关服务等) requireJS:AMD模块加载器 bootstrap:主

AngularJS 进阶(一) 按需加载controller js (转帖)

我们在AngularJS中可以根据网址不同直接切换view,动态加载网页模板,但是控制模板的控制器需要先定义好才可以,不能和网页模板同时加载,这样就造成整个网站的JS都要先加载完成. requireJS是大家第一个想到的东西,但是体积有点大,github上就有个人用它写了Angular的动态加载controller模块,是通过js promise异步编程技术实现的,最后的解决很简单~~ 首先在$routeProvider里面加resolve属性 $routeProvider. when('/ph

【实例分解二】angularjs根据路由按需加载Controller

开始笔记之前,把早上检测到的angularjs中的命名问题做一下记录. 检测工具:google浏览器扩展工具angularJS,结果如下: angularjs中,module要遵守lowerCamelCase原则,例:"myApp"; controller要遵守UpperCamelCase原则并且要以Controller结尾,例:"MainController". 这一篇笔记主要对angularjs根据路由按需加载Controller的操作进行了说明,也就是上一篇中

利用 React/Redux/React-Router 4/webpack 开发大型 web 项目时如何按需加载

如何设计一个大型 web 项目? React + webpack 如何按需加载? React + React-Router 4 + webpack 如何按需加载? React + Redux + React-Router 4 + webpack 如何按需加载? 实录提要: bundle-loader 和 Webpack 内置的 import() 有什么区别? 按需加载能否支持通过请求后台数据,动态配置页面的的应用场景? 参与过几个 React 项目,被依赖包搞的晕晕的,不知道该怎么选择? 什么包

使用babel-plugin-import实现antd组件库中的组件按需加载

Ant Design是蚂蚁金服基于react实现的一个UI 设计库,基于 npm + webpack + babel 的工作流,支持 ES2015.babel-plugin-import 可以从组件库中仅仅引入需要的模块,而不是把整个库都引入,从而提高性能. 如果使用 import { Button } from 'antd'; 的写法会引入 antd 下所有的模块. 为了提高打包编译的速度和浏览器下载资源的速度,可以通过以下的写法来只加载需要的组件: import Button from 'a