详解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 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
Aug 17 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
JavaScript动态数量的文件上传控件
Nov 18 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
Sep 30 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
php 发送带附件邮件示例
2014/01/23 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
2015/09/04 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python实现爬虫下载美女图片
2015/07/14 Python
详解Python多线程
2016/11/14 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
python导入坐标点的具体操作
2019/05/10 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
合伙协议书
2014/04/23 职场文书
贷款委托书
2014/08/01 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
学生逃课检讨书
2015/02/17 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
SQL Server实现分页方法介绍
2022/03/16 SQL Server
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL