详解AngularJS中组件模块的导入导出

AngularJS是一款来自谷歌的前端射流研究…框架，它的核心特性有：MVC、双向数据绑定、指令和语义化标签、模块化工具、依赖注入、超文本标记语言模板，以及对常用工具的封装，例如$http、$cookies、$location等。

关于AngularJS中组件的导入导出，在上下移动告诉我之前还没写过，谢谢上下移动在这方面的指导，给到我案例代码。

在AngularJS实际项目中，我们可能需要把针对某个领域的各个方面放在不同的组件中，然后把各个组件汇总到该领域的一个文件中，再由主组件调用。就是这样：

以上，app.mymodule1，app.mymodule2，app.mymodule都是针对某个领域的，比如app.mymodule1中定义指令，app.mymodule2中定义控制器，app.mymodule把app.mymodule1和app.mymodule2汇总到一处，然后应用这个主组件依赖app.mymodule。

文件结构：

mymodule/.helloworld.controller.js在app.mymodule2中.helloworld.direcitve.js在app.mymodule1中.index.js在app.mymodule中.math.js在一个单独的组件中

app.js在应用这个组件中

index.html

你好世界。控制器。js : var angular=required(' angular ')；模块。导出=角度。模块(' app。我的模块2 '，[]).控制器(“HWController”，[“$ scope”，函数($scope) { $scope.message='这是HW controller '；}]).姓名；以上，通过模块。导出导出模块，通过需要导入模块。

你好世界。导演。js : var angular=required(' angular ')；模块。导出=角度。模块(' app。我的模块1 '，[]).指令(' helloWorld '，函数(){ return { restrict: 'EA '，replace: true，scope: { message: '@' }，template : ' div h1消息为{ { message } } ./h1 ng-trans clude/ng-trans clude/div '，transclude: true }}).姓名；接着，在index.js把pp.mymodule1和app.mymodule2汇总到一处。

var angular=必需(' angular ')；var d=require(' ./hello world。指令')；var c=必需('。/hello world。控制器’)；模块。导出=角度。模块(' app。我的模块'，[d，c]).姓名；在math.js中：

导出={ add:函数(x，y){返回x，y；}，mul:函数(x，y){返回x * y；}};最后，在app.js中引用app.mymodule1:

var angular=必需(' angular ')；var mymodule=require(' ./my module’)；var math=require(' ./我的模块/数学’；angular.module('app '，[mymodule]).controller('AppController '，['$scope '，function($ scope){ $ scope。消息=' hello world$scope.result=math.add(1，2)；}]);以上所述是小编给大家分享的AngularJS中组件模块的导入导出，希望大家喜欢。