AngularJS中如何使用應(yīng)用模塊化

這篇文章主要介紹AngularJS中如何使用應(yīng)用模塊化，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、單縣網(wǎng)站維護(hù)、網(wǎng)站推廣。

一.模塊化的好處

(1)實(shí)現(xiàn)邏輯更清晰、可讀性強(qiáng);
(2)團(tuán)隊(duì)開(kāi)發(fā)分工明確,容易控制;
(3)充分利用可以重用代碼;
(4)抽象出可公用的模塊,可維護(hù)性強(qiáng);
(5)模塊化的遺留系統(tǒng)方便組裝開(kāi)發(fā)新的相似系統(tǒng).

二.AngularJS模塊的定義

(1)angular對(duì)象的module()使用方法：

  // 定義一個(gè)無(wú)依賴模塊
  angular.module('appModule',[]);
  // 定義一個(gè)依賴module1、module2的模塊
  angular.module('appModule',['module1','module2']);

(2)angular.module()方法：接收三個(gè)參數(shù)

第一個(gè)為模塊的名稱,第二個(gè)是數(shù)組,表示模塊依賴的模塊的名稱。如果不需要依賴其他模塊,傳入空數(shù)組即可.第三個(gè)參數(shù)可選,接收一個(gè)方法,用于對(duì)模塊進(jìn)行配置,作用和模塊實(shí)例的config()方法相同.

angular.module()方法返回一個(gè)模塊實(shí)例對(duì)象,可以調(diào)用該對(duì)象的controller()、directive()、filter()等方法向模塊中添加控制器、指令、過(guò)濾器等其他組件.

(3)頁(yè)面引用模塊：ng-app指令

<html ng-app="appMobile">

三.使用模塊解決命名沖突問(wèn)題

兩個(gè)頁(yè)面共用一個(gè)js文件,控制器的定義放在common.js中,當(dāng)兩個(gè)頁(yè)面定義的控制器名稱相同時(shí)就會(huì)產(chǎn)生沖突,AngularJS中通過(guò)使用模塊化來(lái)解決命名沖突.調(diào)用 angular.module()方法創(chuàng)建兩個(gè)模塊實(shí)例,分別調(diào)用這兩個(gè)模塊實(shí)例的controller()方法創(chuàng)建兩個(gè)名稱相同的控制器,但這兩個(gè)控制器屬于不同的模塊.雖然html頁(yè)面中的控制器名稱都是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("注冊(cè)模塊： 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----------------注冊(cè)模塊  
│ │     │  
│ │     │   registerModule.js----------------注冊(cè)模塊定義
│ │     │   
│ │     ├─css
│ │     ├─js  
│ │     │   directives.js
│ │     │   filters.js
│ │     │   controllers.js----------------控制器定義
│ │     │  
│ │     │  
│ │     └─views  
│ │       register.html
│ │

以上是“AngularJS中如何使用應(yīng)用模塊化”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：AngularJS中如何使用應(yīng)用模塊化
文章出自：http://muchs.cn/article0/jpedio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、企業(yè)建站、搜索引擎優(yōu)化、外貿(mào)建站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容