1. Require是什么?
1) 当我们在一个页面中引入很多个js的时候,http请求就增多,浏览器会停止渲染,失去响应的时间会增长
2) 因为要根据各js之间的依赖来进行引入,因此必须严格保证加载顺序,依赖性最大的模块一定要放到最后加载有时候依赖过于复杂,引入容易出现问题;
引入require.js就是来解决这两个问题的,require引入的一个js就是一个模块!
2. 怎么引入?
下载并 引入require
为了避免出现失去响应的问题,可使用两种方式解决;
1)<script src="js/require.js"defer async="true" ></script>
2)一个是把它放在网页底部加载
3)加载之后引入main.js。<script src="js/require.js"defer async="true" data-main="js/main"></script>
Ps: data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js,
所以可以把main.js简写成main。
可能遇到的问题:上面的两个引入必须都要写上,不写任何一个都会出现(require.js和main.js)
3. 引入之后的在主模块内怎么写代码(在main.js)中;
前提:首先我们的require.js只有两个参数,第一个是一个数组,第二个是一个回调函数,这个回调函数里写着我们主模块的代码;
有两种方式来写:(例如引入的是jquery,angular还有angular的ng-grid这几个js);
首先要进行配置
require.config({
baseUrl: "js/lib", (假如我是在js下的lib文件夹下。我们可以提取出来进行代码优化;这部分根据文件夹来写);
paths: {
"jquery": "jquery.min"或者也可以直接指定网址,
遇到的问题:1)写网址的时候要注意,如果协议是https的,不会报错,但是不出效果,引用的地址的协议需要是 http的
2)写具体位置的时候,不需要加文件后缀,加上后缀会报错,不出现效果
"angular":"angular",
"ng-grid":"ng-grid"
},
shim:{
"angular":{exports:"angular"},
"ng-grid":{deps:["jquery","angular"],exports:"ng-grid"}
}
})
遇到的问题:引用angular文件出现问题,因为angular不是用AMD规范写的,所以不可以直接使用
require(["jquery","angular","ng-grid","app"],function($,angular){
angular.element().ready(function(){
angular.bootstrap($("#ng-app"),['webApp']); // 手工装配angular app
主模块的代码都在这里
})
})
require.js会先加载jQuery、angular和ng-grid,然后再运行回调函数。
遇到的问题:这是这几个模块与require在一个js文件夹下的情况。不在就不能这么写;
4.建一个app.js文件(主要模块),因为要符合AMD模块规范,进行defined;
defined(["jquery","angular","ng-grid"],function($,angular){
var app=angular.module('app',['ngGrId']),; 数组中放要依赖的模块
})
下面就是一个实例
使用angular+require.js+na-grid实现数据展示总结
1.建立如图的文件结构2.
第二步:在index.html页面
<!doctype html>
<html id="ng-app"> 这个id必须写上,不需要写ng-app=“webApp”之类的
<head>
<meta charset="utf-8">
<metahttp-equiv="X-UA-Compatible" content="IE=edge,chrome=1">(可写可不写)
<link rel="stylesheet"href="css/bootstrap.css">
<link rel="stylesheet" href="css/ng-grid.css">
<style>
.gridStyle{
margin: 20px auto;
border:1px solid green;
width:1000px;
height:300px;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<div class="gridStyle"ng-grid="gridOptions"></div> (写表格组件)
</div>
<!--其他html内容-->
<script type='text/javascript' src='script/lib/require.js' data-main='script/main.js'></script>这里要注意,main前面的路径就是相当于根路径,在之后的paths中,就以这个路径来进行找相对位置
</body>
</html>
3.
第三步 在main.js文件中
1)指路和配置
require.config({
paths:{
//一些库文件
'jquery': 'lib/jquery.min',
'angular': 'lib/angular',
'angular-route': 'lib/angular-ui-router',
'ng-grid':'lib/ng-grid',
//也可以放一些js文件
‘controll1’:‘controller/controll’’
},
注意:paths中的一些就是文件的路径,并不代表这些文件已经加载进去了,只是指了路!方便下面加载,其实没有什么根本意义,减少代码吧,而且,这些属性值后缀是js的,不可以写,写上会报错
对于非AMD得文件进行配置
shim:{
'angular':{
exports:'angular'
},
'ng-grid':{
deps:['jquery','angular'],
exports:'ng-grid'
},
注意:上面的ng-grid这里错了很多次。在这里进行ng-grid的配置,依赖,在下面有进行的加载。在app.js里边又进行了引用,然后注入,最后成功使用
'angular-route':{
deps:['angular'],
exports: 'angular-route'
}
}
注意:shim只是配置!,并没有加载
});
2下面就是加载
在加载这块的引入的模块,如果上面路径中指过路,那么这里就直接引入,如果上面paths中没有指过路,那么引入的这个模块写的就是自己的相对路径,以便加载
require([
'jquery',
'angular', 'angular-route',
'ng-grid',
'app'], function ($, angular) {
angular.element().ready(function () {
angular.bootstrap($('#ng-app'), ['webApp']); });
注意:这里的$('#ng-app')就是根据index文件中的id得到的。后面的“webApp”就是我们通过这句话手动加载的一个模块名;这个和我们之后的app.js会有关联;});
-->>第四步 在app.js文件中
define(['jquery',"angular",'ng-grid'],
注意:由于ng-grid是依赖于jquery和angular的,所以这里必须要先将这两个模块依赖进来,才可以引入ng-grid,最后注入ngGrid这个模块,不这么写就会报错UncaughtTypeError: Cannot read property 'module' of undefined(…)
function($,angular){var app = angular.module("webApp", ['ngGrid'])
app.controller("myCtrl",function ($scope) {
接下来的这些都是ng-grid的一些代码,我们也可以在这里写一些别的code
$scope.users=[{id:'1',type:'房贷',time:'2016-11-10 11:49:28',name:'李四',id_card:'111',autoCheck:
'未审核',rule:'0',company:'滴滴',personCheck:'未审核',checkPeople:'张三',report:'查看',play:'删除'}
];
$scope.pagingOptions={
pageSizes:[1,10,20],
pageSize:1,
currentPage:1
};
$scope.gridOptions={
columnDefs:[//定义列
{
field:'id',//数据中的属性名
displayName:'序号' // 表头显示的内容
},
],
enablePaging:true,//显示分页文本框
showFooter:true,//显示页脚
pagingOptions:$scope.pagingOptions,//设置分页数据
}
})
return app;
})
总结:由于在main.js中也加载过app这个模块,所以,不需要再去写别的,这个表格会找到自己的位置,然后进行展示
之前总出现错的原因是,ng-grid这个插件的引入不正确,bootstrap这个不理解,以及依赖关系不清晰;
Index.html页面写引入文件—>main.js中写指路和配置以及加载(这里边要手动指定ng-app位置)àapp.js中根据引入的模块写依赖关系,进行数据的展示!
在使用angular+require过程中,angular-ui-router模板渲染会在js加载之后进行,这会导致不可以给这些dom元素增加事件,使用 $(document).on("mousedown","div[name='test']",function(e) { });可给动态增加的元素增加效果,事件;