requirejs按需加载angularjs文件
7.module2.html2代码如下:
之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载的资料.方案如下:
项目的主结构如下图:
1.index.html是最外层的页面,页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require angularjs</title>
</head>
<body>
<a href="#module1">module1</a><br/>
<a href="#module2">module2</a>
<div style="height: 30px;width: 100px">{{str}}</div>
<div id="container" ui-view></div>
<script data-main="main.js" src="require.js" id="main"></script>
</body>
</html>
2.页面中的script标签中,会首先引用require.js这个文件,然后再去引用main.js这个文件,main.js主要是一些关于require的config信息,代码如下:
var config = {
baseUrl: './', //依赖相对路径
paths: { //如果某个前缀的依赖不是按照baseUrl拼接这么简单，就需要在这里指出
domReady:'domReady',
angular: '../node_modules/angular/angular',
app:'app',
router:'../node_modules/angular-ui-router/release/angular-ui-router'
},
shim: { //引入没有使用requirejs模块写法的类库。例如underscore这个类库，本来会有一个全局变量'_'。这里shim等于快速定义一个模块，把原来的全局变量'_'封装在局部，并导出为一个exports，变成跟普通requirejs模块一样
'router': {
deps: ['angular'], //依赖什么模块
},
'angular': {
exports: 'angular'
}
}
};
require.config(config);
// deps:['webapp']
require(['domReady','app','angular'],function(){
angular.bootstrap(document, ['webapp'])//这里会去执行app.js这个文件
})
3.接下来进入app.js
/**
* Created by Administrator on 2016/7/28.
*/
define(['router'], function () {
var app = angular.module('webapp', ['ui.router']);
app.config(
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('module1');//如果没有指定路由,会默认访问module1
$stateProvider.
state('module1', {
url:"/module1",
// controller: 'ctr1', //这里如果写了controller,那么在加载module1.js时,js文件里面的console.log()会运行两次
templateUrl: 'module1/module1.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module1'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
.state("module2",{
url:"/module2",
// controller: 'ctr2',
templateUrl: 'module1/module2.html',
resolve: {
loadCtrl: ["$q", function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
require([
'module1/module2'
], function() { deferred.resolve(); });
return deferred.promise;
}]
}
})
});
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $compileProvider.register,
service: $provide.service
};
})
return app;
});
4.module1.js代码如下:
define(['app'],function(app){
app.register
.controller('ctr1', function($scope){
$scope.str = 'home page';
console.log('page1')
})
})
5.module2.js代码如下:
define(['app'],function(app){
app.register
.controller('ctr2',function($scope){
$scope.str = 'local page';
console.log('page2')
})
})
6.module1.html代码如下:
<div ng-controller="ctr1">
这是tp1
<div id="navigator" style="width: 100%;height: 40px;line-height: 40px">
<a href="http://www.cnblogs.com/">博客园首页</a>
<a href="http://www.cnblogs.com/Ricky-Huang/">Ricky的首页</a>
<a href="http://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a>
<a href="http://msg.cnblogs.com/send/Ricky_Huang">联系我</a>
<a href="http://www.cnblogs.com/Ricky-Huang/rss">订阅他</a>
<a href="http://i.cnblogs.com/">管理</a>
</div>
</div>
7.module2.html2代码如下:
<div ng-controller="ctr2">
这是tp2
{{str}}
</div>
到了这一步,我们运行index.html文件,我们得到如下效果:(右图是控制台输出)
点击module2可以尽心正常切换,而且也可以看到js文件确实动态加载了;
注意:module1.js,module1.html,module2.js,module2.html折四个文件全部在module这个文件夹里面
requirejs按需加载angularjs文件的更多相关文章
- requirejs实践一 加载JavaScript文件
首先,目录如下(根目录有一个index.html文件.有一个scripts文件夹): scripts文件夹有如下的文件 以下是index.html代码 <!DOCTYPE html> &l ...
- angularJS+requireJS实现controller及directive的按需加载
最近因为项目的比较大,需要加载的js文件较多,为了提高首屏页面的加载速度,需要对js文件进行按需加载,然后网上参考了一些资料,自己也深入研究一番之后,实现了按需加载控制器js文件及指令js文件的效果: ...
- Android动态加载so文件
在Android中调用动态库文件(*.so)都是通过jni的方式,而且往往在apk或jar包中调用so文件时,都要将对应so文件打包进apk或jar包,工程目录下图: 以上方式的存在的问题: 1.缺少 ...
- 【webpack整理】一、安装、配置、按需加载
如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...
- webpack2 热加载js 文件
如果只要普通的热加载 只要如下配置就好了 package.json { "devDependencies": { "webpack": "^2.6.1 ...
- angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js
用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所 ...
- 按需加载.js .css文件
首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script> ...
- AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出 一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
- AngularJS中的按需加载ocLazyLoad插件应用；
一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越 ...
随机推荐
- MessageDigest消息摘要
<1>MessageDigest基础 MessageDigest 类为应用程序提供信息摘要算法的功能,如 MD5 或 SHA 算法. MessageDigest 对象开始被初始化.该对象通 ...
- MySQL-->基础-->002-->MySQL存储引擎
mysql的存储引擎主要有:MyISAM和InnoDB MyISAM和InnoDB的主要区别:InnoDB支持事务和参照完整性(即为主键约束,数据库的主键和外键类型一定要一致) 存储引擎是针对表而言而 ...
- (原创)通用查询实现方案(可用于DDD)[附源码] -- 设计思路
[声明] 写作不易,转载请注明出处(http://www.cnblogs.com/wiseant/p/3988592.html). [系列文章] 通用查询实现方案(可用于DDD)[附源码] -- ...
- 【如何快速的开发一个完整的iOS直播app】(美颜篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...
- xcode5.1+osx.10.9编译x264的问题
最近忙于编译x264开源框架进行视频编码,百度了很多方法没有实现.很多方法都过时了.根本不能成功.因为在xcode5以后,编译器不在默认为gcc,而是Apple自带的clang编译器.本人试了很多方法 ...
- javascript eval和JSON之间的联系
原出处:http://www.jb51.net/article/21688.htm eval函数的工作原理 eval函数会评估一个给定的含有JavaScript代码的字符串,并且试图去执行包含在字符串 ...
- ASP数组全集，多维数组和一维数组[转]
ASP数组是比较好用的装载大量数据的容器.1 定义数组 有两种方式:DIM和REDIM. DIM定义的是固定个数.数据类型的数组:而REDIM则不同,它可以定义不同类型的数据,也可以定义个数并非固定的 ...
- Sprint3（12.18）总结
Sprint3第三阶段 1.类名:软件工程-第三阶段 2.时间:至12.18 3.选题内容:web版-餐厅到店点餐系统 4.团队博客地址: http://www.cnblogs.com/queenju ...
- 【java】：常用工具类
PS; 平时用到的一些工具类,验证非空.字符切割.时间转换.金额转换 package com.jws.common.util; import java.io.UnsupportedEncodingEx ...
- php 学习日志- 变量作用域
1.global 函数内访问全局变量 <?php $x=5; $y=10; function myTest() { global $x,$y; $y=$x+$y; } myTest(); ech ...