帶你走近AngularJS - 基本功能介紹
帶你走近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 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"。
項目組織結構
使用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.js angular.module("appModule", []);
如果希望在模塊中添加元素,你可以通過名稱調用模塊向其中添加。例如: formatFilter.js 文件包含以下元素:
// formatFilter.js // 通過名稱獲取模塊 var app = angular.module("appModule"); // 向模塊中添加filter app.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 會自動添加需要的引用:
<html ng-app="app"> ... </html>
進行以上聲明後,你就可以在所有的頁面中使用其它三個模塊聲明的元素了。
這篇文章中我們瞭解了AngularJS的基本使用方法及結構。在下一個章節中,我們將闡述基本的指令概念,同時,會創建一些實例來幫助你加深指令作用的理解。