從零開始操作AngularJS實作應用模組化
- php中世界最好的语言原創
- 2018-06-11 14:33:571361瀏覽
這次帶給大家從零開始操作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指令
<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 │ │
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是從零開始操作AngularJS實作應用模組化的詳細內容。更多資訊請關注PHP中文網其他相關文章！