帶你走近AngularJS - 準系統介紹

AngularJS是Google推出的一款Web應用開發架構。它提供了一系列相容性良好並且可擴充的服務，包括資料繫結、DOM操作、MVC設計模式和模組載入等。本文專註於AngularJS 指令的使用，在我們進入主題之前，我們將快速探索AngularJS的基本用法。

AngularJS 不僅僅是一個類庫，而是提供了一個完整的架構。它避免了您和多個類庫互動，需要熟悉多套介面的繁瑣工作。它由Google Chrome的開發人員設計，引領著下一代Web應用開發。也許我們5年或10年後不會使用AngularJS，但是它的設計精髓將會一直被沿用。

瞭解AngularJS的開發人員，你肯定會為AngularJS自訂指令（它的功能相當於.NET 平台下的自訂控制項）功能感到興奮。自訂指令允許你擴充HTML標籤和特性。指令可以複用並且可以跨項目使用。

自訂指令已經得到了廣泛的應用，其中值得一提的是-Wijmo控制項集。它包含了近50款基於AngularJS 控制項。Wijmo是用於建立案頭和移動Web應用程式的HTML5前端控制項集。從互動式圖表到強大的表格控制項，Wijmo幾乎包含了我們所需要的一切。可以從官網瞭解Wijmo的更多資訊。所以，Wijmo是學習AngularJS很好的參考樣本：

建立自訂指令是非常容易的。指令可以測試、維護並且在多重專案中複用。

使用AngularJS, 需要在HTML頁面引用指令檔，給HTML或Body標籤添加ng-app 特性。下面是一個使用AngularJS的簡單一實例：

      <script src="http://code.angularjs.org/angular-1.0.1.js"></script>            
{{msg}}
  

當AngularJS 載入後，它會在文檔中搜尋ng-app 特性。這個標籤通常被設定給項目的主要模組。一旦發現，Angular 就會對文檔進行操作。

在這個例子中，ng-init 特性初始化了一個msg 變數“葡萄城控制項團隊部落格”， ng-model 特性把它和input 控制項進行了雙向繫結（注意：大括弧是綁定的標記）。AngularJS 會解析這個標記，隨著input值改變即時更新msg 文本值。可以從連結查看效果:點擊進入

AngularJS 模組

模組可以說是AngularJS 的根本。它包含配置、控制、過濾、原廠模式、指令及其它模組。

如果你熟悉.NET平台，但初步學習Angular。下面的表格是一個簡要的對比，協助你理解Angular中的角色扮演情況：

AngularJS	.NET	摘要
module	Assembly	應用開發模組
controller	ViewModel	控制器，啟到不同層面間的組織作用
scope	DataContext	為視圖提供綁定資料
filter	ValueConverter	資料轉送到視圖之前修改資料
directive	Component	可複用的UI元素，也可以理解為前端外掛程式
factory, service	Utility classes	為其他模組元素提供服務

例如，下面的代碼使用控制器、過濾器和指令建立了一個模組：

// the main (app) modulevar myApp = angular.module("myApp", []);// add a controllermyApp.controller("myCtrl", function($scope) {    $scope.msg = "grapecity team blog";});// add a filtermyApp.filter("myUpperFilter", function() {    return function(input) {        return input.toUpperCase();    }});// add a directivemyApp.directive("myDctv", function() {    return function(scope, element, attrs) {        element.bind("mouseenter", function() {            element.css("background", "yellow");        });                    element.bind("mouseleave", function() {            element.css("background", "none");        });                }});

上面樣本中module 方法的第一個參數為模組的名稱，第二個參數為它的相依模組列表。我們建立了一個獨立的模組，不依賴於其它模組。所以第二個參數為空白數組（注意：即使它為空白，我們也必須填寫這個參數。否則，該方法回去檢索之前的同名模組）。這部分我們將在後續的文章中詳細闡述。

controller 建構函式擷取$scope 對象，用於儲存所有controller 暴露的介面和方法。scope 由Angular 傳遞到視圖和指令層。在這個例子中， controller 添加了msg 屬性給scope對象。一個應用模組可以包含多個controller，每個controller各司其職，控制一個或多個視圖。

filter 建構函式返回一個方法用於更改input文本的顯示方式。Angular 提供很多內建的filter，同時，你也可以添加自訂filter，操作方式Angular內建filter相同。在這個例子中，實現了小寫到大寫的轉換。Filter不僅可以格式化文本值，還可以更改數組。AngularJS 內建的格式化Filter有number、date、currency、uppercase和lowercase。數組 filter有filter、orderBy和 limitTo。Filter需要設定參數，文法格式也是固定的：someValue |filterName:filterParameter1:filterParameter2....

directive 建構函式返回了一個方法，該方法用於傳遞一個元素，並依據scope中的參數對其進行修改。樣本中我們綁定了mouseenter 和mouseleave 事件用於切換文本高亮顯示。這是一個功能簡單的指令，在後續的章節將展示如何建立一些複雜指令。

下面是使用模組構建的頁面：

        
        {{msg | myUpperFilter }}    

可以從連結查看效果:點擊進入

注意應用中module、controller和filter 作為特性值應用。它們代表JavaScript 對象，因此名稱是區分大小寫。指令的名稱同樣也是屬性值，它作為HTML標籤被解析，所以也是區分大小寫。但AngularJS 會自動轉換這些特性為小寫，例如“myDctv" 指令變成"my-dctv" (就像內建的指令ngApp, ngController, 和ngModel會轉換成 "ng-app", "ng-controller", 和"ng-model"。

項目組織圖

使用AngularJS 可以建立大型Web項目。你可以把項目拆分為多個模組，把一個模組拆分為多個模組檔案。同時，可以按照你的使用習慣組織這些檔案。

列舉一個典型的項目結構：

Root
default.html
styles
app.css
partials
home.html
product.html
store.html
scripts
app.js
controllers
productCtrl.js
storeCtrl.js
directives
gridDctv.js
chartDctv.js
filters
formatFilter.js
services
dataSvc.js
vendor
angular.js
angular.min.js

假設如果你僅希望項目中使用一個模組，你可以如此定義：

// app.jsangular.module("appModule", []);

如果希望在模組中添加元素，你可以通過名稱調用模組向其中添加。例如： formatFilter.js 檔案包含以下元素：

// formatFilter.js// 通過名稱擷取模組var app = angular.module("appModule");// 向模組中添加filterapp.filter("formatFilter", function() {  return function(input, format) {    return Globalize.format(input, format);  }}})

如果你的應用程式套件含多個模組，注意在添加模組時添加其它模組的引用。例如，一個應用程式套件含三個模組app、controls、和data ：

// app.js (名稱為app的模組依賴於controls和data模組)angular.module("app", [ "controls", "data"])// controls.js (controls 模組依賴於data 模組)angular.module("controls", [ "data" ])// data.js (data 模組沒有依賴項，數組為空白)angular.module("data", [])

應用的首頁面中需要聲明ng-app 指令， AngularJS 會自動添加需要的引用：

...

進行以上聲明後，你就可以在所有的頁面中使用其它三個模組聲明的元素了。

這篇文章中我們瞭解了AngularJS的基本使用方法及結構。在下一個章節中，我們將闡述基本的指令概念，同時，會建立一些執行個體來協助你加深指令作用的理解。