详解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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
利用jQuery实现一个简单的表格上下翻页效果
Mar 14 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
Vue实现数据请求拦截
Oct 23 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
Symfony核心类概述
2016/03/17 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
用jquery来定位
2007/02/20 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python求解平方根的方法
2015/03/11 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
环境科学专业大学生自荐信格式
2013/09/21 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
职代会闭幕词
2015/01/28 职场文书
原告离婚代理词
2015/05/23 职场文书