AngularJS簡介
AngularJS 擴展了 HTML
AngularJS 通過 ng-directives 擴展了 HTML。
ng-app 指令定義一個 AngularJS 應用程序。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
ng-bind 指令
把應用程序數據綁定到 HTML 視圖。
橫跨所有平臺
學會用Angular構建應用,然後把這些代碼和能力復用在多種多種不同平臺的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。
速度與性能
通過Web Worker和服務端渲染,達到在如今(以及未來)的Web平臺上所能達到的最高速度。
Angular讓你有效掌控可伸縮性。基於
美妙的工具
使用簡單的聲明式模板,快速實現各種特性。使用自定義組件和大量現有組件,擴展模板語言。在幾乎所有的IDE中獲得針對Angular的即時幫助和反饋。所有這一切,都是為了幫助你編寫漂亮的應用,而不是絞盡腦汁的讓代碼“能用”。
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML,且通過 表達式 綁定數據到 HTML。
AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript
AngularJS 是以一個 JavaScript 文件形式發布的,可通過 script 標簽添加到網頁中:
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
Note :我們建議把腳本放在 <body> 元素的底部。
這會提高網頁加載速度,因為 HTML 加載不受制於腳本加載。
什麽是 AngularJS?
- "AngularJS 是專門為應用程序設計的 HTML。"
- AngularJS 使得開發現代的單一頁面應用程序(SPAs:Single Page Applications
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重復 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背後"添加代碼。
- AngularJS 支持輸入驗證。
AngularJS 指令
正如您所看到的,AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程序變量。
HTML5 允許擴展的(自制的)屬性,以 data- 開頭。
AngularJS 屬性以 ng- 開頭,但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。
AngularJS 表達式
AngularJS 表達式寫在雙大括號內:{{ expression }}。
AngularJS 表達式把數據綁定到 HTML,這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式:它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。
AngularJS 對象
AngularJS 對象就像 JavaScript 對象:
AngularJS 實例
《表達式方式訪問:》
<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
<p>姓為 {{ person.lastName }}</p>
</div>
ng-bind方式訪問
<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
AngularJS 指令
AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。
AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。
AngularJS 完美支持數據庫的 CRUD(增加Create、讀取Read、更新Update、刪除Delete)應用程序。
把實例中的對象想象成數據庫中的記錄。
ng-app 指令
ng-app 指令定義了 AngularJS 應用程序的 根元素。
ng-app 指令在網頁加載完畢時會自動引導(自動初始化)應用程序。
稍後您將學習到 ng-app 如何通過一個值(比如 ng-app="myModule")連接到代碼模塊。
ng-init 指令
ng-init 指令為 AngularJS 應用程序定義了 初始值。
通常情況下,不使用 ng-init。您將使用一個控制器或模塊來代替它。
稍後您將學習更多有關控制器和模塊的知識。
ng-model 指令
ng-model 指令 綁定 HTML 元素 到應用程序數據。
ng-model 指令也可以:
- 為應用程序數據提供類型驗證(number、email、required)。
- 為應用程序數據提供狀態(invalid、dirty、touched、error)。
- 為 HTML 元素提供 CSS 類。
- 綁定 HTML 元素到 HTML 表單。
ng-repeat 指令
ng-repeat 指令對於集合中(數組中)的每個項會 克隆一次 HTML 元素。
AngularJS簡介