歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> AngularJS開發指南1:AngularJS簡介

AngularJS開發指南1:AngularJS簡介

日期:2017/3/1 9:34:07   编辑:Linux編程

什麼是 AngularJS?

AngularJS 是一個為動態WEB應用設計的結構框架。它能讓你使用HTML作為模板語言,通過擴展HTML的語法,讓你能更清楚、簡潔地構建你的應用組件。它的創新點在於,利用 數據綁定 和 依賴注入,它使你不用再寫大量的代碼了。

AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言,但要構建WEB應用的話它就顯得乏力了。

通常,我們是通過以下技術來解決靜態網頁技術在構建動態應用上的不足:

類庫 - 類庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的代碼,由你來決定何時使用類庫。類庫有:jQuery等
框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填充具體的業務邏輯。這裡框架是起主導作用的,由它來根據具體的應用邏輯來調用你的代碼。框架有:knockout、Backbone等。

AngularJS使用了不同的方法,它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為標識符(directives)的結構,讓浏覽器能夠識別新的語法。例如:

使用雙大括號{{}}語法進行數據綁定;
使用DOM控制結構來實現迭代或者隱藏DOM片段;
支持表單和表單的驗證;
能將邏輯代碼關聯到相關的DOM元素上;
能將HTML分組成可重用的組件。

AngularJS通過為開發者呈現一個更高層次的抽象來簡化應用的開發。如同其他的抽象技術一樣,這也會損失一部分靈活性。換句話說,並不是所有的應用都適合用AngularJS來做。AngularJS主要考慮的是構建CRUD應用。幸運的是,至少90%的WEB應用都是CRUD應用。但是要了解什麼適合用AngularJS構建,就得了解什麼不適合用AngularJS構建。如游戲,圖形界面編輯器,這種DOM操作很頻繁也很復雜的應用,和CRUD應用就有很大的不同,它們不適合用AngularJS來構建。像這種情況用一些更輕量、簡單的技術如jQuery可能會更好。

一個簡單的AngularJS實例

index.html:

<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/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:

function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}

在html標簽裡, 我們用一個ng-app標識符標明這是一個AngularJS應用。這個ng-app標識符會使AngularJS自動初始化你的應用。 我們用script標簽來加載AngularJS腳本: <script src="http://code.angularjs.org/angular-1.1.0.min.js">
通過設置<input>標簽裡的ng-model屬性, AngularJS會自動對數據進行雙向綁定。我們還同時進行了一些簡單的數據驗證:

當頁面加載完後,AngularJS會依照input標簽中聲明的模型名字(qty、cost)生成同名變量。你可以把這些變量認為是MVC設計模式中的M(Model);
注意上面的input元素有著特殊的能力。如果你們沒有輸入數據或者輸入的數據無效,這個input輸入框會自動變紅。輸入框的這種新特性,能讓開發者更容易實現CRUD應用裡常見的字段驗證功能。

最後,我們可以來看一下這個神秘的雙大括號{{}}了:這個{{表達式}}標記是AngularJS的數據綁定。其中的表達式可以是表達式和過濾器{{ expression | filter }}的組合。AngularJS提供了過濾器來對輸入輸出數據格式化。

上面的這個例子裡,{{}}裡的表達式讓AngularJS把從輸入框中獲得的數據相乘,然後把相乘結果格式化成本地貨幣樣式,然後輸出到頁面上。

值得一提的是,我們既沒有調用任何AngularJS的方法,也沒有像用框架一樣去編寫某個具體邏輯,就完成了上述功能。這個實現的背後是因為浏覽器做了比以往生 靜態頁面更多的工作,讓它能滿足動態WEB應用的需要。AngularJS使得動態WEB應用的開發門檻降到不需要類庫或者框架的程度。

AngularJS的理念

Angular信奉的是,當組建視圖(UI)同時又要寫軟件邏輯時,聲明式的代碼會比命令式的代碼好得多,盡管命令式的代碼非常適合用來表述業務邏輯。
•將DOM操作和應用邏輯解耦是一種非常好的思路,它能大大改善代碼的可調性;
•將 測試 和 開發 同等看待是一種非常非常好的思路,測試的難度在很大程度上取決於代碼的結構;
•將客戶端和服務器端解耦是一種特別好的做法,它能使兩邊並行開發,並且使兩邊代碼都能實現重用;
•如果框架能夠在整個開發流程裡都引導著開發者:從設計UI,到編寫業務邏輯,再到測試,那對開發者將是極大的幫助;
•“化繁為簡,化簡為零”總是好的。

AngularJS能將你從以下的噩夢中解脫出來:
•使用回調: 回調的使用會打亂你的代碼的可讀性,讓你的代碼變得支離破碎,很難看清本來的業務邏輯。移除一些常見的代碼,例如回調,是件好事。大幅度地減少你因為JavaScript這門語言的設計而不得不寫的代碼,能讓你把自己應用的邏輯看得更清楚。
•手動編寫操作DOM元素的代碼:操作DOM是AJAX應用很基礎的一部分,但它也總是很“笨重”並且容易出錯。用聲明的方式描述的UI界面可隨著應用狀態的改變而變化,能讓你從編寫低級的DOM操作代碼中解脫出來。絕大部分用AngularJS寫的應用裡,開發者都不用再自己去寫操作DOM的代碼,不過如果你想的話還是可以去寫。
•對UI界面讀寫數據: AJAX應用的很大一部是CRUD操作。一個經典的流程是把服務端的數據組建成內部對象,再把對象編成HTML表單,用戶修改表單後再驗證表單,如果有錯再顯示錯誤,然後將數據重新組建成內部對象,再返回給服務器。這個流程裡有太多太多要重復寫的代碼,使得代碼看起來總是在描述應用的全部執行流程,而不是具體的業務邏輯和業務細節。
•開始前得寫大量的基礎性的代碼:通常你需要寫很多的基礎性的代碼才能實現一個“Hello World”的應用。用AngularJS的話,它會提供一些服務讓你很容易地正式開始寫你的應用,而這些服務都是通過依賴注入自動加入到你的應用中去的,這讓你能很快的進入你應用的具體開發。特別的是,你還能全盤掌握自動化測試的初始化過程。

angular是MVVM模式中的佼佼者,而且是google主持開發的,未來會有更大的可能性。

AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm

希望你喜歡,並分享我的工作~帶你走近AngularJS系列

  1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
  2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
  3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm

AngularJS 的詳細介紹:請點這裡
AngularJS 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved