帶你走近AngularJS - 基本功能介紹AngularJS 子產品項目組織結構

AngularJS是Google推出的一款Web應用開發架構。它提供了一系列相容性良好并且可擴充的服務，包括資料綁定、DOM操作、MVC設計模式和子產品加載等。本文專注于AngularJS 指令的使用，在我們進入主題之前，我們将快速浏覽AngularJS的基本用法。

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

了解AngularJS的開發人員，你肯定會為AngularJS自定義指令（它的功能相當于.NET 平台下的自定義控件）功能感到興奮。自定義指令允許你擴充HTML标簽和特性。指令可以複用并且可以跨項目使用。

自定義指令已經得到了廣泛的應用，其中值得一提的是-。它包含了近50款基于AngularJS 控件。Wijmo是用于建立桌面和移動Web應用程式的HTML5前端控件集。從互動式圖表到強大的表格控件，Wijmo幾乎包含了我們所需要的一切。可以從了解Wijmo的更多資訊。是以，Wijmo是學習AngularJS很好的參考示例：

建立自定義指令是非常容易的。指令可以測試、維護并且在多個項目中複用。

使用AngularJS, 需要在HTML頁面引用腳本檔案，給HTML或Body标簽添加ng-app 特性。下面是一個使用AngularJS的簡單執行個體：

當AngularJS 加載後，它會在文檔中搜尋ng-app 特性。這個标簽通常被設定給項目的主要子產品。一旦發現，Angular 就會對文檔進行操作。

在這個例子中，ng-init 特性初始化了一個msg 變量“葡萄城控件團隊部落格”， ng-model 特性把它和input 控件進行了雙向綁定（注意：大括号是綁定的标記）。AngularJS 會解析這個标記，随着input值改變實時更新msg 文本值。可以從連結檢視效果:

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

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

AngularJS

.NET

摘要

module

Assembly

應用開發子產品

controller

ViewModel

控制器，啟到不同層面間的組織作用

scope

DataContext

為視圖提供綁定資料

filter

ValueConverter

資料傳輸到視圖之前修改資料

directive

Component

可複用的UI元素，也可以了解為前端插件

factory, service

Utility classes

為其他子產品元素提供服務

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

上面示例中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 事件用于切換文本高亮顯示。這是一個功能簡單的指令，在後續的章節将展示如何建立一些複雜指令。

下面是使用子產品建構的頁面：

可以從連結檢視效果:

注意應用中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

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

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

如果你的應用包含多個子產品，注意在添加子產品時添加其它子產品的引用。例如，一個應用包含三個子產品app、controls、和data ：

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

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

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