AngularJS 簡(jiǎn)介
AngularJS 是一個(gè) JavaScript 框架憨降。它可通過 <script> 標(biāo)簽添加到 HTML 頁面袖裕。
AngularJS 通過 指令 擴(kuò)展了 HTML敷鸦，且通過 表達(dá)式 綁定數(shù)據(jù)到 HTML材部。
AngularJS 是一個(gè) JavaScript 框架
AngularJS 是一個(gè) JavaScript 框架。它是一個(gè)以 JavaScript 編寫的庫杏节。
AngularJS 是以一個(gè) JavaScript 文件形式發(fā)布的唬渗，可通過 script 標(biāo)簽添加到網(wǎng)頁中：
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js">
</script>
<small>建議把腳本放在 <body> 元素的底部。這會(huì)提高網(wǎng)頁加載速度奋渔，因?yàn)?HTML 加載不受制于腳本加載镊逝。
各個(gè)angular.js版本下載： https://github.com/angular/angular.js/releases</small>
AngularJS 擴(kuò)展了 HTML
AngularJS 通過 ng-directives 擴(kuò)展了 HTML。
ng-app 指令定義一個(gè) AngularJS 應(yīng)用程序嫉鲸。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序撑蒜。
ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖。
AngularJS 實(shí)例
<!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>
嘗試一下 ?
實(shí)例講解：
當(dāng)網(wǎng)頁加載完畢玄渗，AngularJS 自動(dòng)開啟座菠。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"藤树。
ng-model 指令把輸入域的值綁定到應(yīng)用程序變量 name辈灼。
ng-bind 指令把應(yīng)用程序變量 name 綁定到某個(gè)段落的 innerHTML。
<small>*
如果您移除了* ng-app 指令也榄，HTML 將直接把表達(dá)式顯示出來，不會(huì)去計(jì)算表達(dá)式的結(jié)果司志。</small>
什么是 AngularJS甜紫？
AngularJS 使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（SPAs：Single Page Applications）變得更加容易。
- AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素骂远。
- AngularJS 可以克隆和重復(fù) HTML 元素囚霸。
- AngularJS 可以隱藏和顯示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代碼激才。
- AngularJS 支持輸入驗(yàn)證拓型。
AngularJS 指令
正如您所看到的额嘿，AngularJS 指令是以 ng 作為前綴的 HTML 屬性。
ng-init 指令初始化 AngularJS 應(yīng)用程序變量劣挫。
AngularJS 實(shí)例
<div ng-app="" ng-init="firstName='John'">
<p>姓名為 <span ng-bind="firstName"></span></p>
</div>
嘗試一下 ?
<small>*
HTML5 允許擴(kuò)展的（自制的）屬性册养，以* data- 開頭。AngularJS 屬性以 ng- 開頭压固，但是您可以使用 data-ng- 來讓網(wǎng)頁對(duì) HTML5 有效球拦。</small>
帶有有效的 HTML5：
AngularJS 實(shí)例
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名為 <span data-ng-bind="firstName"></span></p>
</div>
AngularJS 表達(dá)式
AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML帐我，這與 ng-bind 指令有異曲同工之妙坎炼。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字拦键、運(yùn)算符和變量谣光。
實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 實(shí)例
<!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>我的第一個(gè)表達(dá)式： {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 應(yīng)用
AngularJS 模塊（Module） 定義了 AngularJS 應(yīng)用。
AngularJS 控制器（Controller） 用于控制 AngularJS 應(yīng)用芬为。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器萄金。
AngularJS 實(shí)例
<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 模塊定義應(yīng)用:
// AngularJS 模塊
var app = angular.module('myApp', []);
AngularJS 控制器控制應(yīng)用:
// AngularJS 控制器
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
AngularJS 表達(dá)式
AngularJS 使用 表達(dá)式 把數(shù)據(jù)綁定到 HTML。
AngularJS 表達(dá)式
AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi)：{{ expression }}碳柱。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML捡絮，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)莲镣。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式：它們可以包含文字福稳、運(yùn)算符和變量。
實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
// AngularJS 實(shí)例
<!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>我的第一個(gè)表達(dá)式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS 數(shù)字
AngularJS 數(shù)字就像 JavaScript 數(shù)字：
// AngularJS 實(shí)例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價(jià)： {{ quantity * cost }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實(shí)例：</small>
// AngularJS 實(shí)例
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價(jià)： <span ng-bind="quantity * cost"></span></p>
</div>
嘗試一下 ?
<small>*
使用 ng-init 不是很常見瑞侮。您將在控制器一章中學(xué)習(xí)到一個(gè)更好的初始化數(shù)據(jù)的方式搬味。*</small>
AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串：
// AngularJS 實(shí)例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實(shí)例：</small>
// AngularJS 實(shí)例
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
AngularJS 對(duì)象
AngularJS 對(duì)象就像 JavaScript 對(duì)象：
// AngularJS 實(shí)例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 {{ person.lastName }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實(shí)例：</small>
// AngularJS 實(shí)例
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 <span ng-bind="person.lastName"></span></p>
</div>
AngularJS 數(shù)組
AngularJS 數(shù)組就像 JavaScript 數(shù)組：
// AngularJS 實(shí)例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個(gè)值為 {{ points[2] }}</p>
</div>
嘗試一下 ?
<small>使用 ng-bind 的相同實(shí)例：</small>
// AngularJS 實(shí)例
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個(gè)值為 <span ng-bind="points[2]"></span></p>
</div>
AngularJS 表達(dá)式 與 JavaScript 表達(dá)式
- 類似于 JavaScript 表達(dá)式忌卤，AngularJS 表達(dá)式可以包含字母，操作符，變量盒揉。
- 與 JavaScript 表達(dá)式不同，AngularJS 表達(dá)式可以寫在 HTML 中宴猾。
- 與 JavaScript 表達(dá)式不同枢析，AngularJS 表達(dá)式<strong>不支持條件判斷，循環(huán)及異常店归。</strong>
- 與 JavaScript 表達(dá)式不同阎抒，AngularJS 表達(dá)式支持過濾器。
AngularJS 指令
AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML消痛。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能且叁。
AngularJS 允許你自定義指令。
AngularJS 指令
AngularJS 指令是擴(kuò)展的 HTML 屬性秩伞，帶有前綴 ng-逞带。
ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序欺矫。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序展氓。
<small>完整的指令內(nèi)容可以參閱 AngularJS 參考手冊(cè)穆趴。</small>
// AngularJS 實(shí)例
<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 應(yīng)用程序 的"所有者"带饱。
<small>*
一個(gè)網(wǎng)頁可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序毡代。*</small>
數(shù)據(jù)綁定
上面實(shí)例中的 {{ firstName }} 表達(dá)式是一個(gè) AngularJS 數(shù)據(jù)綁定表達(dá)式。
AngularJS 中的數(shù)據(jù)綁定勺疼，同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)教寂。
{{ firstName }} 是通過 ng-model="firstName" 進(jìn)行同步。
在下一個(gè)實(shí)例中执庐，兩個(gè)文本域是通過兩個(gè) ng-model 指令同步的：
// AngularJS 實(shí)例
<div ng-app="" ng-init="quantity=1;price=5">
<h2>價(jià)格計(jì)算器</h2>
數(shù)量： <input type="number" ng-model="quantity">
價(jià)格： <input type="number" ng-model="price">
<p><b>總價(jià)：</b> {{ quantity * price }}</p>
</div>
嘗試一下 ?
<small>*
使用* ng-init 不是很常見酪耕。您將在控制器一章中學(xué)習(xí)到一個(gè)更好的初始化數(shù)據(jù)的方式。</small>
重復(fù) HTML 元素
ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素：
// AngularJS 實(shí)例
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 來循環(huán)數(shù)組</p>
<ul>
<li ng-repeat="x in names">{{ x }}</li>
</ul>
</div>
嘗試一下 ?
ng-repeat 指令用在一個(gè)對(duì)象數(shù)組上：
// AngularJS 實(shí)例
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環(huán)對(duì)象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
嘗試一下 ?
<small>*
AngularJS 完美支持?jǐn)?shù)據(jù)庫的 CRUD（增加Create轨淌、讀取Read迂烁、更新Update、刪除Delete）應(yīng)用程序递鹉。把實(shí)例中的對(duì)象想象成數(shù)據(jù)庫中的記錄盟步。*</small>
ng-app 指令
ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素。
ng-app 指令在網(wǎng)頁加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)（自動(dòng)初始化）應(yīng)用程序躏结。
稍后您將學(xué)習(xí)到 ng-app 如何通過一個(gè)值（比如 ng-app="myModule"）連接到代碼模塊却盘。
ng-init 指令
ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。
通常情況下媳拴，不使用 ng-init黄橘。您將使用一個(gè)控制器或模塊來代替它。
稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識(shí)屈溉。
ng-model 指令
ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)塞关。
ng-model 指令也可以：
- 為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證（number、email子巾、required）帆赢。
- 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty线梗、touched椰于、error）。
- 為 HTML 元素提供 CSS 類缠导。
- 綁定 HTML 元素到 HTML 表單。
ng-repeat 指令
<small>ng-repeat 指令對(duì)于集合中（數(shù)組中）的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素溉痢。</small>
創(chuàng)建自定義的指令
<small>除了 AngularJS 內(nèi)置的指令外僻造，我們還可以創(chuàng)建自定義指令憋他。
你可以使用 .directive 函數(shù)來添加自定義的指令。
要調(diào)用自定義指令髓削，HTML 元素上需要添加自定義指令名竹挡。
使用駝峰法來命名一個(gè)指令， runoobDirective, 但在使用它時(shí)需要以 - 分割, runoob-directive:</small>
// AngularJS 實(shí)例
<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>你可以通過以下方式來調(diào)用指令：
- 元素名
- 屬性
- 類名
- 注釋
以下實(shí)例方式也能輸出同樣結(jié)果:
</small>
元素名
<runoob-directive></runoob-directive>
屬性
<div runoob-directive></div>
類名
<div class="runoob-directive"></div>
注釋
<!-- directive: runoob-directive -->
限制使用
<small>你可以限制你的指令只能通過特定的方式來調(diào)用立膛。
實(shí)例
通過添加 restrict 屬性,并設(shè)置值為 "A", 來設(shè)置指令只能通過屬性的方式來調(diào)用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});
嘗試一下 ?
restrict 值可以是以下幾種:
- E 作為元素名使用
- A 作為屬性使用
- C 作為類名使用
- M 作為注釋使用
restrict 默認(rèn)值為 EA, 即可以通過元素名和屬性名來調(diào)用指令揪罕。</small>
