AngularJS 簡介
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
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>
<small>建議把腳本放在 <body> 元素的底部。這會提高網頁加載速度，因為 HTML 加載不受制于腳本加載。
各個angular.js版本下載： https://github.com/angular/angular.js/releases</small>
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。
<small>*
如果您移除了* ng-app 指令，HTML 將直接把表達式顯示出來，不會去計算表達式的結果。</small>
什么是 AngularJS？
AngularJS 使得開發現代的單一頁面應用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應用程序數據綁定到 HTML 元素。
- AngularJS 可以克隆和重復 HTML 元素。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代碼。
- AngularJS 支持輸入驗證。
AngularJS 指令
正如您所看到的，AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應用程序變量。
AngularJS 實例
<div ng-app="" ng-init="firstName='John'">
<p>姓名為 <span ng-bind="firstName"></span></p>
</div>
嘗試一下 ?
<small>*
HTML5 允許擴展的（自制的）屬性，以* data- 開頭。AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。</small>
帶有有效的 HTML5：
AngularJS 實例
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名為 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
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>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 應用
AngularJS 模塊（Module） 定義了 AngularJS 應用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應用。
ng-app指令定義了應用, ng-controller 定義了控制器。
AngularJS 實例
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>姓名: {{firstName + " " + lastName}}
</div>
<script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});</script>
AngularJS 模塊定義應用:
// AngularJS 模塊
var app = angular.module('myApp', []);
AngularJS 控制器控制應用:
// AngularJS 控制器
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
AngularJS 表達式
AngularJS 使用 表達式 把數據綁定到 HTML。
AngularJS 表達式
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
// 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>我的第一個表達式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 數字
AngularJS 數字就像 JavaScript 數字：
// AngularJS 實例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>
// AngularJS 實例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： <span ng-bind="quantity * cost"></span></p>
</div>
嘗試一下 ?
<small>*
使用 ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。*</small>
AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串：
// AngularJS 實例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>
// AngularJS 實例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS 對象
AngularJS 對象就像 JavaScript 對象：
// AngularJS 實例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>
// AngularJS 實例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
AngularJS 數組
AngularJS 數組就像 JavaScript 數組：
// AngularJS 實例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實例：</small>
// AngularJS 實例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 <span ng-bind="points[2]"></span></p>
</div>
AngularJS 表達式 與 JavaScript 表達式
- 類似于 JavaScript 表達式，AngularJS 表達式可以包含字母，操作符，變量。
- 與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中。
- 與 JavaScript 表達式不同，AngularJS 表達式<strong>不支持條件判斷，循環及異常。</strong>
- 與 JavaScript 表達式不同，AngularJS 表達式支持過濾器。
AngularJS 指令
AngularJS 通過被稱為 指令 的新屬性來擴展 HTML。
AngularJS 通過內置的指令來為應用添加功能。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS 指令是擴展的 HTML 屬性，帶有前綴 ng-。
ng-app 指令初始化一個 AngularJS 應用程序。
ng-init 指令初始化應用程序數據。
ng-model 指令把元素值（比如輸入域的值）綁定到應用程序。
<small>完整的指令內容可以參閱 AngularJS 參考手冊。</small>
// AngularJS 實例
<div ng-app="" ng-init="firstName='John'">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你輸入的為： {{ firstName }}</p>
</div>
嘗試一下 ?
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"所有者"。
<small>*
一個網頁可以包含多個運行在不同元素中的 AngularJS 應用程序。*</small>
數據綁定
上面實例中的 {{ firstName }} 表達式是一個 AngularJS 數據綁定表達式。
AngularJS 中的數據綁定，同步了 AngularJS 表達式與 AngularJS 數據。
{{ firstName }} 是通過 ng-model="firstName" 進行同步。
在下一個實例中，兩個文本域是通過兩個 ng-model 指令同步的：
// AngularJS 實例
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價格計算器</h2>
數量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p><b>總價：</b> {{ quantity * price }}</p>
</div>
嘗試一下 ?
<small>*
使用* ng-init 不是很常見。您將在控制器一章中學習到一個更好的初始化數據的方式。</small>
重復 HTML 元素
ng-repeat 指令會重復一個 HTML 元素：
// AngularJS 實例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環數組</p>
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
嘗試一下 ?
ng-repeat 指令用在一個對象數組上：
// AngularJS 實例
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
嘗試一下 ?
<small>*
AngularJS 完美支持數據庫的 CRUD（增加Create、讀取Read、更新Update、刪除Delete）應用程序。把實例中的對象想象成數據庫中的記錄。*</small>
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 指令
<small>ng-repeat 指令對于集合中（數組中）的每個項會 克隆一次 HTML 元素。</small>
創建自定義的指令
<small>除了 AngularJS 內置的指令外，我們還可以創建自定義指令。
你可以使用 .directive 函數來添加自定義的指令。
要調用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來命名一個指令， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:</small>
// AngularJS 實例
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
嘗試一下 ?
<small>你可以通過以下方式來調用指令：
- 元素名
- 屬性
- 類名
- 注釋
以下實例方式也能輸出同樣結果:
</small>
元素名
<runoob-directive></runoob-directive>
屬性
<div runoob-directive></div>
類名
<div class="runoob-directive"></div>
注釋
<!-- directive: runoob-directive -->
限制使用
<small>你可以限制你的指令只能通過特定的方式來調用。
實例
通過添加 restrict 屬性,并設置值為 "A", 來設置指令只能通過屬性的方式來調用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});
嘗試一下 ?
restrict 值可以是以下幾種:
- E 作為元素名使用
- A 作為屬性使用
- C 作為類名使用
- M 作為注釋使用
restrict 默認值為 EA, 即可以通過元素名和屬性名來調用指令。</small>
