欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【详解AngularJS中module模块的导入导出】,下面是详细的讲解!
详解AngularJS中module模块的导入导出
AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。
关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码。
在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主module调用。就是这样:

以上,app.mymodule1, app.mymodule2,app.mymodule都是针对某个领域的,比如app.mymodule1中定义directive, app.mymodule2中定义controller, app.mymodule把app.mymodule1和app.mymodule2汇总到一处,然后app这个主module依赖app.mymodule。
文件结构:
mymodule/
.....helloworld.controller.js <在app.mymodule2中>
.....helloworld.direcitve.js <在app.mymodule1中>
.....index.js <在app.mymodule中>
.....math.js <在一个单独的module中>
app.js <在app这个module中>
index.html
helloworld.controller.js:
var angular=require('angular');
module.exports=angular.module('app.mymodule2', []).controller('HWController', ['$scope', function ($scope) {
$scope.message="This is HWController";
}]).name;
以上,通过module.exports导出module,通过require导入module。
helloworld.direcitve.js:
var angular=require('angular');
module.exports=angular.module('app.mymodule1', []).directive('helloWorld', function () {
return {
restrict: 'EA',
replace: true,
scope: {
message: "@"
},
template: '<div><h1>Message is {{message}}.</h1><ng-transclude></ng-transclude></div>',
transclude: true
}
}).name;
接着,在index.js把pp.mymodule1和app.mymodule2汇总到一处。
var angular=require('angular');
var d=require('./helloworld.directive');
var c=require('./helloworld.controller');
module.exports=angular.module('app.mymodule', [d, c]).name;
在math.js中:
exports={
add: function (x, y) {
return x + y;
},
mul: function (x, y) {
return x * y;
}
};
最后,在app.js中引用app.mymodule1:
var angular=require('angular');
var mymodule=require('./mymodule');
var math=require('./mymodule/math');
angular.module('app', [mymodule])
.controller('AppController', ['$scope', function ($scope) {
$scope.message="hello world";
$scope.result=math.add(1, 2);
}]);
以上所述是小编给大家分享的AngularJS中module模块的导入导出,希望大家喜欢。
关于详解AngularJS中module模块的导入导出的用户互动如下:
相关问题:angularJS关于依赖和模块与amd/cmd的区别,分享下...
答:双向绑定,可测试性的代码结构,模型视图分离的一个前端MV*框架 其中angular也提供了模型的概念和依赖管理,不过这个依赖都是要在js对象都已经定义的前提下,没有像amd/cmd提供按需加载。 我个人比较喜欢cmd(seajs),它对顶级作用域window的使用... >>详细
相关问题:python2.7 导入time模块的时候,提示 no module na...
答:time是自带的。你确定IDE提示的是no module named time吗? 会不会是让你把import分两行写? >>详细
相关问题:python导入模块pygame时'module' object has no at...
答:具体错误是什么,粘上来代码看看,可能是编码问题,IDLE的编码支持不是很好,加上encoding:UTF-8试试 >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【ajax】用js来解决ajax读取页面乱码-页面乱码
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【angularjs_scope】AngularJS中监视Scope变量以
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
