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的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当我们的网站渐渐庞大起来,这样子的加载策略让网速初始化速度变得越 ...
随机推荐
- flask文件的上传和下载
from werkzeug.utils import secure_filename from flask import Flask,render_template,jsonify,request i ...
- C#中的线程(一)入门
文章系参考转载,英文原文网址请参考:http://www.albahari.com/threading/ 作者 Joseph Albahari, 翻译 Swanky Wu 中文翻译作者把原文放在了& ...
- memcached 分布式
memcached定义 memcached 是一套分布式的高速缓存系统,被广泛应用于应用系统的缓存层来提升应用程序的访问速度:memcache缺乏认证以及安全管制,这表明应将memcached服务器放 ...
- pil
http://effbot.org/imagingbook/ 一.安装 pip install PIL --allow-external PIL --allow-unverified PIL 出现 ...
- 在c#中IO流读写操作
1.使用FileStream读写文件 文件头: using System;using System.Collections.Generic;using System.Text;using System ...
- AngularJs自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- 激活神器 KMSAuto Net 2015 v1.3.8
KMSAuto Net – Windows 操作系统 KMS 自动激活工具!支持 Windows Vista,7,8,8.1,10, Server 2008,2008 R2,2012,2012 R2, ...
- web测试方法总结
链接地址:http://www.cnblogs.com/Jessy/p/3539638.html 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~ ...
- postgreSQL 统计语句
pg_stat_statements 是 postgresql 的一个扩展,用来统计查询语句,类似于 mysql 的 慢查询. 安装二进制文件 有些发行版可能没有附带这个扩展,则需要用户自己安装, 本 ...
- aa12
option = { backgroundColor: '#1b1b1b', color: ['gold','aqua','lime'], title : { text: '模拟迁徙', subtex ...