-
AngularJS
鎖定
AngularJS誕生於2009年,由Misko Hevery 等人創建,是一款構建用户界面的前端框架,後為Google所收購。
[3]
Angular是AngularJS的重寫,Angular2以後官方命名為Angular,2.0以前版本稱為AngularJS。AngularJS是用JavaScript編寫,而Angular採用TypeScript語言編寫,是ECMAScript 6的超集。
[8]
AngularJS產生背景
AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言,但要構建WEB應用的話它就顯得乏力了。所以做了一些工作(可以覺得是小花招)來讓瀏覽器做想要的事。通常,是通過以下技術來解決靜態網頁技術在構建動態應用上的不足:
類庫 - 類庫是一些函數的集合,它能幫助寫WEB應用。起主導作用的是代碼,來決定何時使用類庫。類庫有:jQuery等
AngularJS使用了不同的方法,它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用稱為指令(directives)的結構,讓瀏覽器能夠識別新的語法。例如:
使用雙大括號{{}}語法進行數據綁定;
支持表單和表單的驗證;
能將邏輯代碼關聯到相關的DOM元素上;
能將HTML分組成可重用的組件。
AngularJS語言特點
AngularJS試圖成為WEB應用中的一種客户端的解決方案。這意味着它不只是WEB應用中的一個小部分,還是一個完整的客户端的解決方案。這會讓AngularJS在構建一個CRUD(增加Create、查詢Retrieve、更新Update、刪除Delete)的應用時顯得很“固執”(原文為 opinionated,意指沒有太多的其他方式)。但是,儘管它很“固執”,它仍然能確保它的“固執”只是在構建應用的起點,並且仍能靈活變動。AngularJS的一些出眾之處如下:
具有目錄佈局和測試腳本的種子應用作為起點。
AngularJS主要功能
AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣,這也會損失一部分靈活性。換句話説,並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是,至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建
[1]
,就得了解什麼不適合用AngularJS構建。
下面是一個包含了一個表單的典型CRUD應用。表單值先經過驗證,然後用來計算總值,這個總值會被格式化成本地的樣式。下面有一些開發者常見的概念,需要先了解一下:
1.將數據模型(data-model)關聯到視圖(UI)上;
2.寫、讀、驗證用户的輸入;
3.根據模型計算新的值;
4.將輸出格式本地化,
index.html:
<!doctype html> <html ng-app> <head> <script src="angular-1.1.0.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="InvoiceCntl"> <b>Invoice:</b> <br> <br> <table> <tr><td>Quantity</td><td>Cost</td></tr> <tr> <td><input type="integer" min="0" ng-model="qty" required ></td> <td><input type="number" ng-model="cost" required ></td> </tr> </table> <hr> <b>Total:</b> {{qty * cost | currency}} </div> </body> </html>
script.js
試一下上面這個例子。然後一起來看下這個例子的工作原理。
在標籤裏,用一個ng-app標識符標明這是一個AngularJS應用。這個ng-app標識符會使AngularJS自動初始化(auto initialize)你的應用。
用標籤來加載AngularJS腳本:
Quantity:Cost:這個輸入框的widget看起來很普通,但如果認識到以下幾點那它就不普通了:
當頁面加載完後,AngularJS會依照widget裏的聲明的模型名字(qty、cost)生成同名變量。你可以把這些變量認為是MVC設計模式中的M(Model);
終於,我們可以來看一下神秘的雙大括號{{}}了:
Total:{{qty *cost |currency}}這個{{表達式}}標記是AngularJS的數據綁定。其中的表達式可以是表達式和過濾器({{ expression | filter }})的組合。AngularJS提供了過濾器來對輸入輸出數據格式化。
上面的這個例子裏,{{}}裏的表達式讓AngularJS把從輸入框中獲得的數據相乘,然後把相乘結果格式化成本地貨幣樣式,然後輸出到頁面上。
值得一提的是,我們既沒有調用任何AngularJS的方法,也沒有像用框架一樣去編寫某個具體邏輯,就是完成了上述功能。這個實現的背後是因為瀏覽器做了比以往生成 靜態頁面更多的工作,讓它能滿足動態WEB應用的需要。AngularJS使得動態WEB應用的開發門檻降到不需要類庫或者框架的程度。
AngularJS語言風格
將測試和開發同等看待是一種非常非常好的思路,測試的難度在很大程度上取決於代碼的結構;
將客户端和服務器端解耦是一種特別好的做法,它能使兩邊並行開發,並且使兩邊代碼都能實現重用;
如果框架能夠在整個開發流程裏都引導着開發者:從設計UI,到編寫業務邏輯,再到測試,那對開發者將是極大的幫助;
“化繁為簡,化簡為零”總是好的。
AngularJS能將你從以下的噩夢中解脱出來:
使用回調:回調的使用會打亂你的代碼的可讀性,讓你的代碼變得支離破碎,很難看清本來的業務邏輯。移除一些常見的代碼,例如回調,是件好事。大幅度地減少你因為JavaScript這門語言的設計而不得不寫的代碼,能讓你把自己應用的邏輯看得更清楚。
手動編寫操作DOM元素的代碼:操作DOM是AJAX應用很基礎的一部分,但它也總是很“笨重”並且容易出錯。用聲明的方式描述的UI界面可隨着應用狀態的改變而變化,能讓你從編寫低級的DOM操作代碼中解脱出來。絕大部分用AngularJS寫的應用裏,開發者都不用再自己去寫操作DOM的代碼,不過如果你想的話還是可以去寫。
對UI界面讀寫數據:AJAX應用的很大一部是CRUD操作。一個經典的流程是把服務端的數據組建成內部對象,再把對象編成HTML表單,用户修改表單後再驗證表單,如果有錯再顯示錯誤,然後將數據重新組建成內部對象,再返回給服務器。這個流程裏有太多太多要重複寫的代碼,使得代碼看起來總是在描述應用的全部執行流程,而不是具體的業務邏輯和業務細節。
開始前得寫大量的基礎性的代碼:通常你需要寫很多的基礎性的代碼才能實現一個“Hello World”的應用。用AngularJS的話,它會提供一些服務讓你很容易地正式開始寫你的應用,而這些服務都是以一種Guice-like dependency-injection式的依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是,你還能全盤掌握自動化測試的初始化過程。
AngularJS 表達式
[6]
把數據綁定到 HTML,這與ng-bind指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式很像JavaScript 表達式:它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
- 參考資料
-
- 1. AngularJS精選教程 .IGOUYU[引用日期2017-07-25]
- 2. AngularJS 表達式 .菜鳥教程.2015-05-17[引用日期2015-08-17]
- 3. AngularJS教程 .AngularJS中文網.2020-01-05[引用日期2021-02-27]
- 4. Angular .AngularJS官方.2020-01-05[引用日期2021-03-31]
- 5. Angular - Angular 文檔簡介 .AngularJS官方.2020-01-05[引用日期2021-03-31]
- 6. Index of 1.8.2/ .AngularJS.2020-01-05[引用日期2021-03-31]
- 7. Including AngularJS scripts from the Google CDN .AngularJS官方.2020-01-05[引用日期2021-03-31]
- 8. angular和angularjs的區別是什麼 - html中文網 .html中文網.2020-01-05[引用日期2021-05-23]
- 9. Angular .angular官方.2023-09-28[引用日期2023-11-11]