詳解AngularJS中module模塊的導(dǎo)入導(dǎo)出
AngularJS是一款來(lái)自Google的前端JS框架，它的核心特性有：MVC、雙向數(shù)據(jù)綁定、指令和語(yǔ)義化標(biāo)簽、模塊化工具、依賴注入、HTML模板，以及對(duì)常用工具的封裝，例如$http、$cookies、$location等。
關(guān)于AngularJS中module的導(dǎo)入導(dǎo)出，在Bob告訴我之前還沒寫過(guò)，謝謝Bob在這方面的指導(dǎo)，給到我案例代碼。
在AngularJS實(shí)際項(xiàng)目中，我們可能需要把針對(duì)某個(gè)領(lǐng)域的各個(gè)方面放在不同的module中，然后把各個(gè)module匯總到該領(lǐng)域的一個(gè)文件中，再由主module調(diào)用。就是這樣：
以上，app.mymodule1, app.mymodule2,app.mymodule都是針對(duì)某個(gè)領(lǐng)域的，比如app.mymodule1中定義directive, app.mymodule2中定義controller， app.mymodule把a(bǔ)pp.mymodule1和app.mymodule2匯總到一處，然后app這個(gè)主module依賴app.mymodule。
文件結(jié)構(gòu)：
mymodule/
.....helloworld.controller.js <在app.mymodule2中>
.....helloworld.direcitve.js <在app.mymodule1中>
.....index.js <在app.mymodule中>
.....math.js <在一個(gè)單獨(dú)的module中>
app.js <在app這個(gè)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;
以上，通過(guò)module.exports導(dǎo)出module，通過(guò)require導(dǎo)入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模塊的導(dǎo)入導(dǎo)出，希望大家喜歡。
相關(guān)文章
本文主要介紹AngularJS 視圖，這里整理了相關(guān)知識(shí)，并附代碼示例和實(shí)現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器，相對(duì)于CK編輯器更加精簡(jiǎn)，但必須滿足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE（漢化+上傳）的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05
本文主要介紹了Angular的自定義指令，并提供了實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
AngularJS在IE8的不支持怎么辦？下面小編就為大家?guī)?lái)一篇AngularJS在IE8的不支持的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
過(guò)濾器（filter）正如其名，作用就是接收一個(gè)輸入，通過(guò)某個(gè)規(guī)則進(jìn)行處理，然后返回處理后的結(jié)果。主要用在數(shù)據(jù)的格式化上，例如獲取一個(gè)數(shù)組中的子集，對(duì)數(shù)組中的元素進(jìn)行排序等2015-12-12
本文主要介紹AngularJS 表單,這里對(duì)AngularJS 表單知識(shí)做了詳細(xì)整理介紹,希望能幫助有需要的小伙伴2016-07-07
Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能
AngularJS 表單和控件可以驗(yàn)證輸入的數(shù)據(jù)。本文給大家介紹Angular 輸入框?qū)崿F(xiàn)自定義驗(yàn)證功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
angular + express 實(shí)現(xiàn)websocket通信
最近需要實(shí)現(xiàn)一個(gè)功能,后端通過(guò)TCP協(xié)議連接雷達(dá)硬件的控制器,前端通過(guò)websocket連接后端,當(dāng)控制器觸發(fā)消息的時(shí)候,把信息通知給所以前端,本文給的大家講解angular + express 實(shí)現(xiàn)websocket通信的思路,感興趣的朋友一起看看吧2023-09-09
Angularjs自定義指令實(shí)現(xiàn)分頁(yè)插件(DEMO)
由于最近的一個(gè)項(xiàng)目使用的是angularjs1.0的版本，涉及到分頁(yè)查詢數(shù)據(jù)的功能，后來(lái)自己就用自定義指令實(shí)現(xiàn)了該功能，下面小編把實(shí)例demo分享到腳本之家平臺(tái)，需要的朋友參考下2017-09-09
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09