您好,登錄后才能下訂單哦!
這篇文章主要介紹AngularJS中如何使用應(yīng)用模塊化,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一.模塊化的好處
(1)實(shí)現(xiàn)邏輯更清晰、可讀性強(qiáng);
(2)團(tuán)隊(duì)開發(fā)分工明確,容易控制;
(3)充分利用可以重用代碼;
(4)抽象出可公用的模塊,可維護(hù)性強(qiáng);
(5)模塊化的遺留系統(tǒng)方便組裝開發(fā)新的相似系統(tǒng).
二.AngularJS模塊的定義
(1)angular對象的module()使用方法:
// 定義一個(gè)無依賴模塊 angular.module('appModule',[]); // 定義一個(gè)依賴module1、module2的模塊 angular.module('appModule',['module1','module2']);
(2)angular.module()方法:接收三個(gè)參數(shù)
第一個(gè)為模塊的名稱,第二個(gè)是數(shù)組,表示模塊依賴的模塊的名稱。如果不需要依賴其他模塊,傳入空數(shù)組即可.第三個(gè)參數(shù)可選,接收一個(gè)方法,用于對模塊進(jìn)行配置,作用和模塊實(shí)例的config()方法相同.
angular.module()方法返回一個(gè)模塊實(shí)例對象,可以調(diào)用該對象的controller()、directive()、filter()等方法向模塊中添加控制器、指令、過濾器等其他組件.
(3)頁面引用模塊:ng-app指令
<html ng-app="appMobile">
三.使用模塊解決命名沖突問題
兩個(gè)頁面共用一個(gè)js文件,控制器的定義放在common.js中,當(dāng)兩個(gè)頁面定義的控制器名稱相同時(shí)就會(huì)產(chǎn)生沖突,AngularJS中通過使用模塊化來解決命名沖突.調(diào)用 angular.module()方法創(chuàng)建兩個(gè)模塊實(shí)例,分別調(diào)用這兩個(gè)模塊實(shí)例的controller()方法創(chuàng)建兩個(gè)名稱相同的控制器,但這兩個(gè)控制器屬于不同的模塊.雖然html頁面中的控制器名稱都是UserController,但是分屬于不同的模塊,因此避免了沖突.
var loginModule = angular.module("loginModule",[]); loginModule.controller("UserController",function($scope,$log){ $scope.uname = "login"; $scope.pword = "admin"; $scope.submit = function(){ alert("登錄模塊: UserController"); } }) var registerModule = angular.module("registerModule",[]); registerModule.controller("UserController",function($scope,$log){ $scope.uname = "register"; $scope.pword = "admin"; $scope.submit = function(){ alert("注冊模塊: UserController"); } })
四.模塊化的最佳實(shí)踐
假設(shè)項(xiàng)目名稱:app,包含login和register兩個(gè)模塊:
├─app │ │ │ ├──css---------------CSS樣式 │ ├──img---------------圖片資源 │ ├──js----------------JS代碼 │ │ common.js // 公共JS代碼 │ │ │ ├──modules │ │ │ │ │ ├─login----------------登錄模塊 │ │ │ │ │ │ │ │ loginModule.js----------------登錄模塊定義 │ │ │ │ │ │ │ ├─css │ │ │ ├─js │ │ │ │ directives.js │ │ │ │ filters.js │ │ │ │ controllers.js----------------控制器定義 │ │ │ │ │ │ │ │ │ │ │ └─views │ │ │ login.html │ │ │ │ │ └──register----------------注冊模塊 │ │ │ │ │ │ registerModule.js----------------注冊模塊定義 │ │ │ │ │ ├─css │ │ ├─js │ │ │ directives.js │ │ │ filters.js │ │ │ controllers.js----------------控制器定義 │ │ │ │ │ │ │ │ └─views │ │ register.html │ │
以上是“AngularJS中如何使用應(yīng)用模塊化”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。