模組-AngularJS基礎教程

模組-AngularJS基礎教程
0. 目錄

目錄 前言 本文 1 Why use Angular modules為什麼使用模組化 2 建立應用模組-Creating the application module 3 載入應用模組-Loading the application module 4 定義控制器-Defining a controller 5 鏈式定義-Chaining definitions 6 載入模組-Loading modules 7 結論 聲明

1. 前言

AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了，所以AngularJS做了一些工作來來解決靜態網頁技術在構建Live App上的不足。

AngularJS的初衷是為了簡化web APP開發，精髓是簡單。但是國內外有很多AngularJS的教程，都著重講AngularJS的強大之處，從而增加了AngularJS學習的難度，本教程試圖用通俗的語言講解最為基礎、最為實用的內容，簡化學習進程、降低學習難度是本教程的初衷。

本系列教程以翻譯Chris Smith的Angualr Basics為梗概，融合博主自己的理解，為大家提供一個簡單明了的學習教程。

本文為系列教程第7篇模組，翻譯自Modules。

序 引言-Introduction 基礎-Basics 控制器-Controllers 範圍-Scopes 集合-Collections 模組-Modules 依賴注入-Dependency Injection 服務-Services 過濾器-Filters 指令-Directives 指令範圍-Directive Scopes 路由-Routing 通訊-HTTP 結論2.本文

總的來說，模組（modules）的目的是通過定義公用APIs、限制行為（功能）和資料（屬性和變數）的可視化實現關注點分離(separation of concerns，soc)。大部分的編程平台內建了對模組化的支援，以致於我們會覺得理所當然而無所察覺。但是用戶端javascript沒有支援，對附加的解決方案(例如CommonJS、AMD)的好處和壞處也進行了諸多爭論。

需要注意的是，Angular的模組化系統不是模組化載入（它不從檔案或internet載入源碼），Angular提供的是內建的、私人的模組化方案工作原理類似於其內建的、私人的依賴注入方案，兩個系統提供了令人印象深刻的通用基礎設施。儘管使用模組化功能是每個開發人員的需要掌握的內在能力，但問題是，為什麼我們需要？

儘管模組化和依賴注入通常是必要命題，但是其實Angular允許我們不使用模組實現很多事情。截止目前，我們已經完成了一系列通過建構函式（在全域範圍定義和控制器一樣名稱的函數）不用模組的案例。通過一點簡單的設定，ng-controller指令在全域範圍和模組化系統中尋找控制器函數，允許我們使用簡化的方法使用Angular，但僅僅是一定程度上。

2.1 Why use Angular modules?（為什麼使用模組化）

為了我們可以在Angular基礎特性之後走的更遠，我們需要精通它的模組化系統。相對於JS對象的管理複雜性問題來說，我們應該使用簡單的方法解決問題，尋找您自己的最佳實務，因此本書不想詳細介紹模組化和依賴注入的本質特性，只介紹跟Angular使用密切相關的模組和依賴注入的內容。

因此，讓我們審視下必須使用Angular模組的重要特性：

特殊組件-Specialized components，在定義您自己的控制器、指令、過濾器和動畫的時候，我們必須使用模組系統（控制器可能例外，前面已經說過） 依賴注入-Dependency injection，儘管服務是普通的JS對象和函數， 但使用模組系統建立的服務可以簡單地被隨著依賴性注入，進行依賴注入。 外部模組-External modules，Angular擁有非常迷人的開發社區，海量免費的官方外掛程式、第三方外掛程式，如果您要在您的應用中使用這些庫，我們就不得不用到模組系統。 載入時配置-Load-time configuration ，Angular的模組系統提供了訪問內部配置、外掛程式配置的功能，我們將在最後一章配置自訂HTTP頭的案例中示範後面一個特性。 測試-Testing， Angular令人心動的測試功能基於依賴注入實現，同樣離不開模組系統

下一章我們講服務，主要示範如何為自訂JS組件定義提供支援。本章講解如何定義控制器載入外部模組，同時為您講解模組系統的基礎。

2.2 建立應用模組-Creating the application module

一個Angular應用通常起始於一個根模組，在我們的案例中這個模組名字叫做app，注意，這個名字雖說常見，很多時候就是簡單起見，未必是最好的選擇。

/* module.js */angular.module('app', []);

在上面的案例中，需要特別注意module的第二個參數，儘管它看起來只是一個空的數組，但是它是非常重要的，如果您忽略它，angular.module的行為將產生根本改變。考慮到API的合理性設計， 當你指定第二個參數調用angular.module時，該方法處於建立模式，如果名為app的模組不存在，將建立一個名字為app的模組。但是調用angular.module時不指定第二個參數，它處於尋找模式，如果給定名稱的模組存在將返回該模組，如果不存在將拋出錯誤，提醒我們注意第二個參數。該案例我們使用了正確的方式，但我們需要明白代碼中的重要區別。這個參數用於匯入外部模組，我們將會在angular動畫模組時通過案例說明這一點。

2.3 載入應用模組-Loading the application module

在承載應用的HTML文檔中，我們需要通過傳遞模組名稱作為參數給ng-app指令告訴Angular載入應用模組。

我們添加到應用模組中的任何組件都可以使用，讓我們來看看如何使用模組定義一個控制器（不在使用全域的scope）。

2.4 定義控制器-Defining a controller

moduleAPI裡麵包含了定義特殊Angular組件的一些方法，截至目前我們比較熟悉的controller方法，我們使用controller方法建立控制器。首先我們需要取得一個應用模組的引用，同時我們需要給angular.module不指定第二個參數讓它處於查詢模式（主要是因為我們上文已經建立過應用模組了）。

/* message-controller.js */var app = angular.module('app');app.controller('MessageController', function($scope) {  $scope.message = "This is a model.";});

然後我們需要在調用ng-app的元素裡面的某個位置，使用ng-controller調用我們的控制器。

{{message}}

編譯結果為：This is a model.

您已經看到了，使用模組定義控制器比全域scope的方式稍微麻煩點，但不至於太糟。

2.5 鏈式定義-Chaining definitions

假設我們需要定義如下的兩個控制器

{{message}}

{{message}}

module的定義方法可以是鏈式操作，這樣我們可以在一個語句裡定義兩個控制器。

/* chained-controllers.js */angular.module('app')  .controller('MessageController', function($scope) {    $scope.message = "This is a model.";  })  .controller('AnotherMessageController', function($scope) {    $scope.message = "This is another model.";  });

編譯結果為：
This is a model.
This is another model.

注意，第一個控制器的聲明語句沒有用分號結束。

如果你不喜歡鏈式操作風格，你可以隨時檢索調用模組，當然也可以儲存在一個變數裡（如下面代碼所示）。如果您使用了變數，最好能夠在IIFE（立即調用函數運算式）或者其他閉包裡避免汙染全域變數。

/* separate-controllers.js */var app = angular.module('app');app.controller('MessageController', function($scope) {  $scope.message = "This is a model.";});app.controller('AnotherMessageController', function($scope) {  $scope.message = "This is another model.";});

選擇哪種風格由您決定，不過鏈式風格更加流行些。

2.6 載入模組-Loading modules

Animation是Angular的一個新增特性，是一個名字叫做ngAnimate的獨立模組。使用animations的第一步是引入包含模組，源檔案中是Angular的核心部分，但是分發的時候以一個單獨檔案分發，如下所示。

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script><script src="//cdn.bootcss.com/angular.js/1.3.14/angular.js"></script><scriptsrc="//cdn.bootcss.com/angular.js/1.3.14//angular-animate.js"></script>

是時候我們使用module方法的第二個數組參數了，前面的案例我們只是傳遞了一個空參數， 這次我們聲明模組的依賴性。

/* ng-animate-module.js */angular.module('app', ['ngAnimate']);

這樣，我們在應用中引入了ngAnimate。 模板中的ng-show、ng-hide、ng-class等指令將會在css和js裡檢測JS animation，也許會應用在類似於add、enter、leave、move、remove等DOM事件中 。在DOM事件中應用animation無需模板做任何改變（感覺像透明一樣）， 如果動畫代碼沒有呈現， 或者作為css或者作為js通過[module.animation](http://docs.angularjs.cn/api/ng/type/angular.Module)註冊，指令代碼還是普通代碼。

Check the box to show the message

The secret message.

編譯結果為：

單擊上面的複選框，我們能夠看到元素之間的顯示與隱藏式立刻進行的，因為我們沒有在css或js中添加動畫。接下來，我們使用css（通過聲明式風格建立一般動畫的較好選擇），當然使用jQuery的animate方法也不錯，Angular的module.animation能夠相容這些方法。<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPr/Y1sa1rcjrta2z9tDo0qrLxLj2tu7N4rXEY3NzwOCjrG5nLWhpZGUtYWRkoaJuZy1oaWRlLWFkZC1hY3RpdmWhom5nLWhpZGUtcmVtb3ZloaJuZy1oaWRlLXJlbW92ZS1hY3RpdmW1yKGjPC9wPg0KPHByZSBjbGFzcz0="brush:java;">/* ng-animate.css */.ng-hide-add,.ng-hide-remove { transition: all linear 1s; display: block !important;}.ng-hide-add.ng-hide-add-active,.ng-hide-remove { opacity: 0;}.ng-hide-add,.ng-hide-remove.ng-hide-remove-active { opacity: 1;}

這次的編譯結果如下所示。

根據您的網站的使用者需要，你可能需要給特定的css屬性增加瀏覽器引擎首碼(vendor-prefix)，例如針對iOS Safari6增加-webkit-transition（caniuse.com是一個比較好的html5、css3瀏覽器安全色性網站）。注意這個動畫將附加到任何一次ng-show、ng-hide使用中，為了做更好的控制，我們可以在元素和選取器上增加自訂css類，例如.my-class.ng-hide-add和.my-class.ng-hide-remove等等。

2.7 結論

添加ngAnimate的案例我想讓您確信理解Angular 模組系統的重要性。而且，令人高興的是，ngAnimate只是使用Angular附件模組的開始，除了可以使用官方提供的模組資源外，大家還可以到github之類的網站上尋找更多的第三方開源模組。最流行的一個項目是AngularUI，提供了UI Router、UI Bootstrap等強大的模組，這些模組可以方便地使用Bower進行安裝，當您上手Angular之後，您也可以在Github和Bower發布您的Angular模組，等你喲！

ngAnimate模組示範一個如何使用附件模組發揮強大功能的案例，但是因為它特殊的嵌入方式，沒有使用依賴注入。因為模組和依賴注入需要相互協作，下一章我們將講解依賴注入。