1. 程式人生 > >AngularJS簡介

AngularJS簡介

asc 宋體 大量 str invalid 克隆 都是 data- 學習

AngularJS 擴展了 HTML

AngularJS 通過 ng-directives 擴展了 HTML

ng-app 指令定義一個 AngularJS 應用程序。

ng-model 指令把元素值(比如輸入域的值)綁定到應用程序。

ng-bind 指令

把應用程序數據綁定到 HTML 視圖。

橫跨所有平臺

學會用Angular構建應用,然後把這些代碼和能力復用在多種多種不同平臺的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。

速度與性能

通過Web Worker和服務端渲染,達到在如今(以及未來)的Web平臺上所能達到的最高速度。

Angular讓你有效掌控可伸縮性。基於

RxJSImmutable.js和其它推送模型,能適應海量數據需求。

美妙的工具

使用簡單的聲明式模板,快速實現各種特性。使用自定義組件和大量現有組件,擴展模板語言。在幾乎所有的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

  1. "AngularJS 是專門為應用程序設計的 HTML"
  2. AngularJS 使得開發現代的單一頁面應用程序(SPAsSingle Page Applications
    )變得更加容易。
  3. AngularJS 把應用程序數據綁定到 HTML 元素。
  4. AngularJS 可以克隆和重復 HTML 元素。
  5. AngularJS 可以隱藏和顯示 HTML 元素。
  6. AngularJS 可以在 HTML 元素"背後"添加代碼。
  7. 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 指令也可以:

  • 為應用程序數據提供類型驗證(numberemailrequired)。
  • 為應用程序數據提供狀態(invaliddirtytouchederror)。
  • HTML 元素提供 CSS 類。
  • 綁定 HTML 元素到 HTML 表單。

ng-repeat 指令

ng-repeat 指令對於集合中(數組中)的每個項會 克隆一次 HTML 元素

AngularJS簡介