详解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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
vue项目中使用Svg的方法
Oct 24 Javascript
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 类型转换函数intval
2009/06/20 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
使用PHP处理数据库数据如何将数据返回客户端并显示当前状态
2016/02/16 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP getName()函数讲解
2019/02/03 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python二维图制作的实例代码
2020/12/03 Python
英国123鲜花网站:123 Flowers
2019/07/07 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
快递员岗位职责
2014/09/12 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
运动会表扬稿范文
2015/05/05 职场文书
《七律·长征》教学反思
2016/02/16 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers