详解AngularJS中module模块的导入导出  更新时间:2015年12月10日 15:07:24   作者:Darren Ji   本文给大家介绍angularjs中module模块的导入导出,涉及到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 …..helloworld.direcitve.js …..index.js …..math.js app.js 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: ‘Message is {{message}}.’, 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的Module模式编程深入分析 nodejs中exports与module.exports的区别详细介绍 seajs1.3.0源码解析之module依赖有序加载 node.js的exports、module.exports与ES6的export、export default深入详解 详解Sea.js中Module.exports和exports的区别 node.js报错:Cannot find module ”ejs”的解决办法 node.js中module.exports与exports用法上的区别 深入浅析AngularJS中的module(模块) AngularJS Module方法详解 js module大战 angularjs module 相关文章 Angular整合zTree的示例代码 本篇文章主要介绍了Angular整合zTree的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-01-01 AngularJS实现星星等级评分功能 这篇文章主要为大家详细介绍了AngularJS实现星星等级评分功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-09-09 使用AngularJS创建单页应用的编程指引 这篇文章主要介绍了使用AngularJS创建单页应用的编程指引,AngularJS是一款高人气的JavaScript库,需要的朋友可以参考下 2015-06-06 AngularJs动态加载模块和依赖注入详解 这篇文章主要为大家介绍了AngularJs动态加载模块和依赖注入,感兴趣的小伙伴们可以参考一下 2016-01-01 python爬取安居客二手房网站数据(实例讲解) 下面小编就为大家带来一篇python爬取安居客二手房网站数据(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-10-10 angularjs实现与服务器交互分享 AngularJS是Google开发的纯客户端JavaScript技术的WEB框架,用于扩展、增强HTML功能,它专为构建强大的WEB应用而设计。 2014-06-06 AngularJS入门教程之Helloworld示例 这篇文章主要介绍了AngularJS入门教程之Helloworld示例,结合Helloworld入门示例分析了AngularJS的功能、原理、MVC框架、数据绑定与相关使用技巧,需要的朋友可以参考下 2016-12-12 AngularJS之自定义服务详解(factory、service、provider) 本篇文章主要介绍了AngularJS之自定义服务详解(factory、service、provider),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-04-04 将angular.js项目整合到.net mvc中的方法详解 这篇文章主要给大家介绍了将angular.js项目整合到.net mvc中的相关资料,文中通过示例代码将实现的过程介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。 2017-06-06 AngularJS 自定义指令详解及实例代码 这篇文章主要介绍了AngularJS 自定义指令,这里整理了详细的资料及简单实例代码,有需要的小伙伴可以参考下 2016-09-09 最新评论

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

您可能感兴趣的文章:

  • JavaScript的Module模式编程深入分析
  • nodejs中exports与module.exports的区别详细介绍
  • seajs1.3.0源码解析之module依赖有序加载
  • node.js的exports、module.exports与ES6的export、export default深入详解
  • 详解Sea.js中Module.exports和exports的区别
  • node.js报错:Cannot find module ”ejs”的解决办法
  • node.js中module.exports与exports用法上的区别
  • 深入浅析AngularJS中的module(模块)
  • AngularJS Module方法详解
  • js module大战
张贴在3