AngularJS框架介紹
AngularJS框架是一個開發動態Web應用的框架。它讓你可以使用HTML作為模板語言并且可以通過擴展的HTML語法來使應用組件更加清晰和簡潔。它的創新之處在于,通過數據綁定和依賴注入減少了大量代碼,而這些都在瀏覽器端通過JavaScript實現,能夠和任何服務器端技術完美結合。
Angular框架是為了擴展HTML在構建應用時本應具備的能力而設計的。對于靜態文檔,HTML是一門很好的聲明式的語言,但對于構建動態WEB應用,它無能為力。所以,構建動態WEB應用往往需要一些技巧才能讓瀏覽器配合我們的工作。
通常,我們通過以下手段來解決動態應用和靜態文檔之間不匹配的問題:
類庫 - 一些在開發WEB應用時非常有用的函數的集合。你的代碼起主導作用,并且決定何時調用類庫的方法。例如:
jQuery
等。框架 - 一種WEB應用的特殊實現,你的代碼只需要填充一些具體信息??蚣芷鹬鲗ё饔?,并且決定何時調用你的代碼。例如:
knockout
,ember
等。
Angular另辟蹊徑,它嘗試去擴展HTML的結構來彌合以文檔為中心的HTML與實際Web應用所需要的HTML之間的鴻溝。Angular通過指令(directive)擴展HTML的語法。例如:
通過
{{}}
進行數據綁定。使用DOM控制結構來進行迭代或隱藏DOM片段。
支持表單和表單驗證。
將邏輯代碼關聯到DOM元素上。
將一組HTML做成可重用的組件。
AngularJS 是一個 JavaScript 框架
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。
AngularJS 是以一個 JavaScript 文件形式發布的,可通過 script 標簽添加到網頁中:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>
AngularJS 擴展了 HTML
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
ng-bind 指令把應用程序數據綁定到 HTML 視圖。
AngularJS 指令
正如您所看到的,AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程序變量。
AngularJS 表達式
AngularJS 表達式寫在雙大括號內:{{ expression }}。
AngularJS 表達式把數據綁定到 HTML,這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式:它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}