對AngularJs的簡單了解


一、簡單介紹

AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言,但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事。

通常,我們是通過以下技術來解決靜態網頁技術在構建動態應用上的不足:
類庫 - 類庫是一些函數的集合,它能幫助你寫WEB應用。起主導作用的是你的代碼,由你來決定何時使用類庫。類庫有:jQuery等
框架 - 框架是一種特殊的、已經實現了的WEB應用,你只需要對它填充具體的業務邏輯。這里框架是起主導作用的,由它來根據具體的應用邏輯來調用你的代碼。框架有:knockout、sproutcore等。
AngularJS使用了不同的方法,它嘗試去補足HTML本身在構建應用方面的缺陷。AngularJS通過使用我們稱為 指令(directives)的結構,讓瀏覽器能夠識別新的語法。例如:
使用雙大括號{{}}語法進行數據綁定;
使用DOM控制結構來實現迭代或者隱藏DOM片段;
支持表單和表單的驗證;
能將邏輯代碼關聯到相關的DOM元素上;
能將HTML分組成可重用的組件。
二、AngularJs的核心
AngularJS有着諸多特性,最為核心的是:MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
三、AngularJs的理解
  AngularJS 是一個 JavaScript 框架

AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。

AngularJS 是以一個 JavaScript 文件形式發布的,可通過 script 標簽添加到網頁中:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJS 擴展了 HTML

AngularJS 通過 ng-directives 擴展了 HTML。

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

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

ng-bind 指令把應用程序數據綁定到 HTML 視圖。

AngularJS 實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

當網頁加載完畢,AngularJS 自動開啟。

ng-app 指令告訴 AngularJS,<div> 元素是 AngularJS 應用程序 的"所有者"。

ng-model 指令把輸入域的值綁定到應用程序變量 name

ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。

 如果您移除了ng-app指令,HTML將直接把表達式顯示出來,不會去計算表達式的結果。

四、AngularJs的簡單應用

 

AngularJS 使得開發現代的單一頁面應用程序(SPAs:Single Page Applications)變得更加容易。

 

  • AngularJS 把應用程序數據綁定到 HTML 元素。
  • AngularJS 可以克隆和重復 HTML 元素。
  • AngularJS 可以隱藏和顯示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代碼。
  • AngularJS 支持輸入驗證。

五、AngularJs指令

AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。

AngularJS 通過內置的指令來為應用添加功能。

AngularJS 允許你自定義指令。

AngularJS 指令是擴展的 HTML 屬性,帶有前綴 ng-

ng-app 指令初始化一個 AngularJS 應用程序。

ng-init 指令初始化應用程序數據。

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

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 內置的指令外,我們還可以創建自定義指令。

你可以使用 .directive 函數來添加自定義的指令。

要調用自定義指令,HTML 元素上需要添加自定義指令名。

使用駝峰法來命名一個指令, runoobDirective, 但在使用它時需要以 - 分割, runoob-directive

五、AngularJs  Scope(作用域)

 

Scope(作用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間的紐帶。

 

Scope 是一個對象,有可用的方法和屬性。

 

Scope 可應用在視圖和控制器上。

Scope 概述

AngularJS 應用組成如下:

  • View(視圖), 即 HTML。
  • Model(模型), 當前視圖中可用的數據。
  • Controller(控制器), 即 JavaScript 函數,可以添加或修改屬性。

scope 是模型。

scope 是一個 JavaScript 對象,帶有屬性和方法,這些屬性和方法可以在視圖和控制器中使用。

七、AngularJS 控制器

AngularJS 控制器 控制 AngularJS 應用程序的數據。

 AngularJS 控制器是常規的 JavaScript 對象


AngularJS 控制器

AngularJS 應用程序被控制器控制。

ng-controller 指令定義了應用程序控制器。

控制器是 JavaScript 對象,由標准的 JavaScript 對象的構造函數 創建。

AngularJS 使用$scope 對象來調用控制器。

在 AngularJS 中, $scope 是一個應用象(屬於應用變量和函數)。

控制器的 $scope (相當於作用域、控制范圍)用來保存AngularJS Model(模型)的對象。

控制器在作用域中創建了兩個屬性 (firstNamelastName)。

ng-model 指令綁定輸入域到控制器的屬性(firstName 和 lastName)。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM