详解AngularJS中module模块的导入导出


Posted in Javascript onDecember 10, 2015

AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、HTML模板,以及对常用工具的封装,例如$http、$cookies、$location等。

关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码。

在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主module调用。就是这样:

详解AngularJS中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模块的导入导出,希望大家喜欢。

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
学习vue.js计算属性
Dec 03 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 #Javascript
Spring mvc 接收json对象
Dec 10 #Javascript
SpringMVC返回json数据的三种方式
Dec 10 #Javascript
js操作数组函数实例小结
Dec 10 #Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 #Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 #Javascript
javascript图片预加载完整实例
Dec 10 #Javascript
You might like
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
php文件上传的例子及参数详解
2013/12/12 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
微信小程序设置滚动条过程详解
2019/07/25 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python自定义类并使用的方法
2015/05/07 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python之array赋值技巧分享
2019/11/28 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
出生医学证明样本
2014/01/17 职场文书
干部行政关系介绍信
2014/01/17 职场文书
2014春晚主持词
2014/03/25 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
结婚典礼主持词
2015/06/29 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
入门学习Go的基本语法
2021/07/07 Golang