對AngularJs的簡單瞭解

時間 2019-11-26

標籤 angularjs 簡單瞭解欄目 AngularJS 简体版

原文原文鏈接

1、簡單介紹html

AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事。數組

一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：

類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等

框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore等。

AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲指令(directives)的結構，讓瀏覽器可以識別新的語法。例如：

使用雙大括號{{}}語法進行數據綁定；

使用DOM控制結構來實現迭代或者隱藏DOM片斷；

支持表單和表單的驗證；

能將邏輯代碼關聯到相關的DOM元素上；

能將HTML分組成可重用的組件。

2、AngularJs的核心

AngularJS有着諸多特性，最爲核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。

3、AngularJs的理解

AngularJS 是一個 JavaScript 框架

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

AngularJS 是以一個 JavaScript 文件形式發佈的，可經過 script 標籤添加到網頁中：app

<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 自動開啓。ui

ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"全部者"。spa

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

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

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

4、AngularJs的簡單應用

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

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

5、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

5、AngularJs Scope(做用域)

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

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

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

Scope 概述

AngularJS 應用組成以下：

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

scope 是模型。

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

7、AngularJS 控制器

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

AngularJS 控制器是常規的 JavaScript 對象。

AngularJS 控制器

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

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

控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 建立。

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

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

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。

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

相關文章

相關標籤/搜索

Hibernate教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<