详解AngularJS中module模块的导入导出,AngularJS中m
分类:关于计算机

AngularJS是一款来自Google的前端JS框架,它的核心本性有:MVC、双向数据绑定、指令和语义化标签、模块化学工业具、重视注入、HTML模板,以及对常用工具的包裹,比如$http、$cookies、$location等。

 

有关AngularJS中module的导入导出,在Bob告诉笔者在此之前还没写过,谢谢鲍伯在那上头的辅导,给到自家案例代码。

关于AngularJS中module的导入导出,在Bob告诉本身以前还没写过,多谢鲍勃在那下边包车型客车指引,给到本人案例代码。

在AngularJS实际项目中,我们大概须要把针对有些圈子的各种方面放在分裂的module中,然后把种种module汇总到该领域的贰个文书中,再由主module调用。正是那般:

在AngularJS实际项目中,大家大概需求把针对有个别圈子的种种方面放在分化的module中,然后把各样module汇总到该领域的多少个文件中,再由主module调用。正是这般:

图片 1

图片 2

上述,app.mymodule1, app.mymodule2,app.mymodule都以针对性某些圈子的,比方app.mymodule第11中学定义directive, app.mymodule第22中学定义controller, app.mymodule把app.mymodule1和app.mymodule2汇总到一处,然后app那些主module正视app.mymodule。

以上,app.mymodule1, app.mymodule2,app.mymodule都以对准有些世界的,例如app.mymodule第11中学定义directive, app.mymodule第22中学定义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中>

mymodule/
.....helloworld.controller.js <在app.mymodule2中>
.....helloworld.direcitve.js <在app.mymodule1中>
.....index.js <在app.mymodule中>
.....math.js <在三个单身的module中>
app.js <在app这个module中>
index.html

app.js <在app这个module中>

helloworld.controller.js:

index.html

var angular = require('angular');
module.exports = angular.module('app.mymodule2', []).controller('HWController', ['$scope', function ($scope) {

    $scope.message = "This is HWController";


}]).name;
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。

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

helloworld.direcitve.js:

继之,在index.js把pp.mymodule1和app.mymodule2汇总到一处。

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;
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中:

随之,在index.js把pp.mymodule1和app.mymodule2汇总到一处。

exports = {
 add: function (x, y) {
  return x + y;
 },
 mul: function (x, y) {
  return x * y;
 }
}; 
var angular = require('angular');
var d = require('./helloworld.directive');
var c = require('./helloworld.controller');



module.exports = angular.module('app.mymodule', [d, c]).name;

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

在math.js中:

如上所述是小编给大家大快朵颐的AngularJS中module模块的导入导出,希望大家喜爱得舍不得放手。

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

你也许感兴趣的作品:

  • AngularJs动态加载模块和依赖性注入详解
  • 深刻浅析AngularJS中的module(模块)
  • angularjs学习笔记之三大模块(modal,controller,view)
  • AngularJS中的模块详解
  • Jquery中.bind()、.live()、.delegate()和.on()之间的分别详解
  • 详解VUE中v-bind的核心用法
  • vue学习笔记之指令v-text && v-html && v-bind详解
  • 深远浅析AngularJs模版与v-bind

 

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

 

如上, require('./mymodule');会活动到mymodule文件中找index.js中的module,那些是规矩。  

 

本文由正版必中一肖图发布于关于计算机,转载请注明出处:详解AngularJS中module模块的导入导出,AngularJS中m

上一篇:自在学习JavaScript十一,详解JavaScript基本类型和引 下一篇:没有了
猜你喜欢
热门排行
精彩图文