• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > 详解AngularJS中module模块的导入导出

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

作者:Darren Ji 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含详解AngularJS中module模块的导入导出等相关知识,Darren Ji 希望在学习及工作中可以帮助到您

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; 
</div>

以上,通过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; 
</div>

接着,在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;

</div>

在math.js中:

exports = {
 add: function (x, y) {
  return x + y;
 },
 mul: function (x, y) {
  return x * y;
 }
}; 

</div>

最后,在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);
 }]);
</div>

以上所述是小编给大家分享的AngularJS中module模块的导入导出,希望大家喜欢。

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30Angularjs中使用layDate日期控件示例
  • 2017-05-30使用angular写一个hello world
  • 2017-05-30AngularJS过滤器filter用法实例分析
  • 2017-05-30Angularjs实现带查找筛选功能的select下拉框示例代码
  • 2017-05-30AngularJS使用ng-app自动加载bootstrap框架问题分析
  • 2017-05-30AngularJS基础 ng-keypress 指令简单示例
  • 2017-05-30Angular2使用Angular CLI快速搭建工程(一)
  • 2017-05-30AngularJS执行流程详解
  • 2017-05-30Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
  • 2017-05-30关于angularJs指令的Scope(作用域)介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 浅谈Angular.js中使用$watch监听模型变化
    • 解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
    • Angular中$cacheFactory的作用和用法实例详解
    • ANGULARJS中使用JQUERY分页控件
    • 整理AngularJS框架使用过程当中的一些性能优化要点
    • AngularJS延迟加载html template
    • Angular.js与Bootstrap相结合实现手风琴菜单代码
    • AngularJS中的指令全面解析(必看)
    • 关于angularJs指令的Scope(作用域)介绍
    • AngularJS定时器的使用与移除操作方法【interval与timeout】

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有