一.模塊化的好處
(1)實現邏輯更清晰、可讀性強;
(2)團隊開發分工明確,容易控制;
(3)充分利用可以重用代碼;
(4)抽象出可公用的模塊,可維護性強;
(5)模塊化的遺留系統方便組裝開發新的相似系統.
二.AngularJS模塊的定義
(1)angular對象的module()使用方法：
// 定義一個無依賴模塊 angular.module('appModule',[]); // 定義一個依賴module1、module2的模塊 angular.module('appModule',['module1','module2']);(2)angular.module()方法：接收三個參數
第一個為模塊的名稱,第二個是數組,表示模塊依賴的模塊的名稱。如果不需要依賴其他模塊,傳入空數組即可.第三個參數可選,接收一個方法,用于對模塊進行配置,作用和模塊實例的config()方法相同.
angular.module()方法返回一個模塊實例對象,可以調用該對象的controller()、directive()、filter()等方法向模塊中添加控制器、指令、過濾器等其他組件.
(3)頁面引用模塊：ng-app指令
<html ng-app="appMobile">
三.使用模塊解決命名沖突問題
兩個頁面共用一個js文件,控制器的定義放在common.js中,當兩個頁面定義的控制器名稱相同時就會產生沖突,AngularJS中通過使用模塊化來解決命名沖突.調用 angular.module()方法創建兩個模塊實例,分別調用這兩個模塊實例的controller()方法創建兩個名稱相同的控制器,但這兩個控制器屬于不同的模塊.雖然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"); } })四.模塊化的最佳實踐
假設項目名稱：app,包含login和register兩個模塊：
├─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│ │
新聞熱點
疑難解答
圖片精選
