AngularJS是Google推出的一款Web應用開發框架。它提供了一系列兼容性良好並且可擴展的服務，包括數據綁定、DOM操作、MVC設計模式和模塊加載等。本文專注於AngularJS 指令的使用，在我們進入主題之前，我們將快速浏覽AngularJS的基本用法。
AngularJS 不僅僅是一個類庫，而是提供了一個完整的框架。它避免了您和多個類庫交互，需要熟悉多套接口的繁瑣工作。它由Google Chrome的開發人員設計，引領著下一代Web應用開發。也許我們5年或10年後不會使用AngularJS，但是它的設計精髓將會一直被沿用。
帶你走近AngularJS系列：
了解AngularJS的開發人員，你肯定會為AngularJS自定義指令（它的功能相當於.NET 平台下的自定義控件）功能感到興奮。自定義指令允許你擴展HTML標簽和特性。指令可以復用並且可以跨項目使用。
自定義指令已經得到了廣泛的應用，其中值得一提的是-Wijmo控件集。它包含了近50款基於AngularJS 控件。Wijmo是用於創建桌面和移動Web應用程序的HTML5前端控件集。從交互式圖表到強大的表格控件，Wijmo幾乎包含了我們所需要的一切。可以從官網了解Wijmo的更多信息。所以，Wijmo是學習AngularJS很好的參考示例：AngularJS Directive Gallery
創建自定義指令是非常容易的。指令可以測試、維護並且在多個項目中復用。
使用AngularJS, 需要在HTML頁面引用腳本文件，給HTML或Body標簽添加ng-app 特性。下面是一個使用AngularJS的簡單實例：
<html>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
</head>
<body ng-app ng-init="msg = '葡萄城控件團隊博客'">
<input ng-model="msg" />
<p>{{msg}}</p>
</body>
</html>
當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) module
var myApp = angular.module("myApp", []);
// add a controller
myApp.controller("myCtrl", function($scope) {
$scope.msg = "grapecity team blog";
});
// add a filter
myApp.filter("myUpperFilter", function() {
return function(input) {
return input.toUpperCase();
}
});
// add a directive
myApp.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 事件用於切換文本高亮顯示。這是一個功能簡單的指令，在後續的章節將展示如何創建一些復雜指令。
下面是使用模塊構建的頁面：
<body ng-app="myApp" ng-controller="myCtrl">
<input ng-model="msg" />
<p my-dctv >
{{msg | myUpperFilter }}
</p>
</body>
可以從鏈接查看效果:點擊進入
注意應用中module、controller和filter 作為特性值應用。它們代表JavaScript 對象，因此名稱是區分大小寫的。指令的名稱同樣也是屬性值，它作為HTML標簽被解析，所以也是區分大小寫的。但AngularJS 會自動轉換這些特性為小寫，例如“myDctv" 指令變成"my-dctv" (就像內置的指令ngApp, ngController, 和ngModel會轉換成 "ng-app", "ng-controller", 和"ng-model"。
更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-05/102140p2.htm