從零開始操作AngularJS實作應用模組化

這次帶給大家從零開始操作AngularJS實作應用模組化，操作AngularJS實作應用模組化的注意事項有哪些，以下就是實戰案例，一起來看一下。

一.模組化的好處

(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指令

三.使用模組解決命名衝突問題

兩個頁面共用一個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
│ │

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue mint-ui在專案中如何使用

JS刪除DOM物件節點方法總結

以上是從零開始操作AngularJS實作應用模組化的詳細內容。更多資訊請關注PHP中文網其他相關文章！