簡介：
AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面烫葬。
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
AngularJS 通過 指令 擴展了 HTML院喜，且通過 表達式 綁定數(shù)據(jù)到 HTML蔫仙。
擴展：
- AngularJS 通過 ng-directives 擴展了 HTML鲸伴。
- ng-app 指令定義一個 AngularJS 應(yīng)用程序。
- ng-model 指令把元素值（比如輸入域的值）綁定到應(yīng)用程序灾票。
- ng-bind 指令把應(yīng)用程序數(shù)據(jù)綁定到 HTML 視圖峡谊。
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
AngularJS 表達式
AngularJS 表達式寫在雙大括號內(nèi)：{{ expression }}。
AngularJS 表達式把數(shù)據(jù)綁定到 HTML，這與 ng-bind 指令有異曲同工之妙既们。
AngularJS 將在表達式書寫的位置"輸出"數(shù)據(jù)濒析。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量啥纸。
AngularJS 應(yīng)用
AngularJS 模塊（Module） 定義了 AngularJS 應(yīng)用号杏。
AngularJS 控制器（Controller） 用于控制 AngularJS 應(yīng)用。
ng-app指令定義了應(yīng)用, ng-controller 定義了控制器斯棒。
<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 表達式 與 JavaScript 表達式
- 類似于 JavaScript 表達式盾致，AngularJS 表達式可以包含字母，操作符荣暮，變量庭惜。
- 與 JavaScript 表達式不同，AngularJS 表達式可以寫在 HTML 中穗酥。
- 與 JavaScript 表達式不同护赊，AngularJS 表達式不支持條件判斷，循環(huán)及異常砾跃。
- 與 JavaScript 表達式不同骏啰，AngularJS 表達式支持過濾器。
重復(fù) HTML 元素
ng-repeat 指令會重復(fù)一個 HTML 元素：
<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-init 指令
ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值抽高。
通常情況下判耕，不使用 ng-init。
ng-model 指令
- ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)翘骂。
- ng-model 指令也可以：
- 為應(yīng)用程序數(shù)據(jù)提供類型驗證（number壁熄、email、required）雏胃。
- 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（invalid、dirty志鞍、touched瞭亮、error）。
- 為 HTML 元素提供 CSS 類固棚。
- 綁定 HTML 元素到 HTML 表單统翩。
創(chuàng)建自定義的指令
除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令此洲。你可以使用 .directive 函數(shù)來添加自定義的指令厂汗。要調(diào)用自定義指令，HTMl 元素上需要添加自定義指令名呜师。
使用駝峰法來命名一個指令娶桦， runoobDirective, 但在使用它時需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
你可以通過以下方式來調(diào)用指令：
- 元素名
<runoob-directive></runoob-directive> - 屬性
<div runoob-directive></div> - 類名
<div class="runoob-directive"></div>
注意： 你必須設(shè)置 restrict 的值為 "C" 才能通過類名來調(diào)用指令
- 注釋``
注意： 我們需要在該實例添加 replace 屬性， 否則評論是不可見的。
注意： 你必須設(shè)置 restrict 的值為 "M" 才能通過注釋來調(diào)用指令衷畦。
限制使用
你可以限制你的指令只能通過特定的方式來調(diào)用栗涂。
restrict 值可以是以下幾種:
- E 只限元素名使用
- A 只限屬性使用
- C 只限類名使用
- M 只限注釋使用
restrict 默認值為 EA, 即可以通過元素名和屬性名來調(diào)用指令。
表單驗證<AngularJs>
在看教程的時候發(fā)現(xiàn)了
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
</form>
覺得很神奇祈争。
應(yīng)用狀態(tài)
ng-model 指令可以為應(yīng)用數(shù)據(jù)提供狀態(tài)值(invalid, dirty, touched, error)
<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
Email: <input type="email" name="myAddress" ng-model="myText" required>
<h1>狀態(tài)</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS 類
ng-model 指令基于它們的狀態(tài)為 HTML 元素提供了 CSS 類：
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<form ng-app="" name="myForm">
輸入你的名字:
<input name="myAddress" ng-model="text" required>
</form>
ng-model 指令根據(jù)表單域的狀態(tài)添加/移除以下類：
- ng-empty
- ng-not-empty
- ng-touched
- ng-untouched
- ng-valid
- ng-invalid
- ng-dirty
- ng-pending
- ng-pristine
AngularJS 控制器
AngularJS 應(yīng)用程序被控制器控制斤程。
ng-controller 指令定義了應(yīng)用程序控制器。
控制器是 JavaScript 對象菩混，由標準的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建忿墅。
AngularJS 過濾器
過濾器可以使用一個管道字符（|）添加到表達式和指令中。
管道字符
- uppercase 過濾器將字符串格式化為大寫
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名為 {{ lastName | uppercase }}</p>
</div>
- currency 過濾器將數(shù)字格式化為貨幣格式
向指令添加過濾器
- orderBy 過濾器根據(jù)表達式排列數(shù)組
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
過濾輸入
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中沮峡，該過濾器后跟一個冒號和一個模型名稱疚脐。
filter 過濾器從數(shù)組中選擇一個子集
<p><input type="text" ng-model="mtest"></p>
<ul>
<li ng-repeat="x in names | filter:mtest | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
AngularJS 服務(wù)(Service)
AngularJS 中你可以創(chuàng)建自己的服務(wù)，或使用內(nèi)建服務(wù)帖烘。
什么是服務(wù)亮曹？
在 AngularJS 中，服務(wù)是一個函數(shù)或?qū)ο竺刂ⅲ稍谀愕?AngularJS 應(yīng)用中使用照卦。
AngularJS 內(nèi)建了30 多個服務(wù)。
有個 $location 服務(wù)乡摹，它可以返回當(dāng)前頁面的 URL 地址役耕。
為什么使用服務(wù)?
$http 是 AngularJS 應(yīng)用中最常用的服務(wù)。服務(wù)向服務(wù)器發(fā)送請求聪廉，應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)瞬痘。
AngularJS 會一直監(jiān)控應(yīng)用，處理事件變化板熊， AngularJS 使用 $location 服務(wù)比使用 window.location 對象更好框全。
-
$http 服務(wù)
$http 是 AngularJS 應(yīng)用中最常用的服務(wù)。 服務(wù)向服務(wù)器發(fā)送請求干签，應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)津辩。
var app = angular.module('myApp',[]);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
-
$timeout 服務(wù)
AngularJS $timeout 服務(wù)對應(yīng)了 JS window.setTimeout 函數(shù)。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
-
$interval 服務(wù)
AngularJS $interval 服務(wù)對應(yīng)了 JS window.setInterval 函數(shù)
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
- 創(chuàng)建自定義服務(wù)
創(chuàng)建名為**hexafy** 的訪問:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}});
使用自定義的的服務(wù) **hexafy** 將一個數(shù)字轉(zhuǎn)換為16進制數(shù):
app.controller('myCtrl', function($scope, **hexafy**) {
$scope.hex = **hexafy**.myFunc(255);
});
- 過濾器中容劳，使用自定義服務(wù)
在過濾器 **myFormat** 中使用服務(wù) **hexafy**:
app.filter('myFormat',['hexify', function(hexify){
return function(x) {
return hexify.myFunc(x);
};
}]);
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一個核心服務(wù)喘沿，用于讀取遠程服務(wù)器的數(shù)據(jù)。
$http.get("");
AngularJS Select(選擇框)
- AngularJS 可以使用數(shù)組或?qū)ο髣?chuàng)建一個下拉列表選項竭贩。
<select ng-model="selectedName" ng-options="x for x in names"></select>
app.controller('myCtrl', function($scope) {
$scope.names = ["Google", "Runoob", "Taobao"];
});
- ng-repeat
我們也可以使用ng-repeat 指令來創(chuàng)建下拉列表
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
ng-repeat 指令是通過數(shù)組來循環(huán) HTML 代碼來創(chuàng)建下拉列表蚜印，但 ng-options 指令更適合創(chuàng)建下拉列表，它有以下優(yōu)勢：
使用 ng-options 的選項的一個對象留量， ng-repeat 是一個字符串窄赋。
AngularJS 表格
ng-repeat 指令可以完美的顯示表格哟冬。
- 在表格中顯示數(shù)據(jù)
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
AngularJS HTML DOM
-
ng-disabled 指令
ng-disabled 指令直接綁定應(yīng)用程序數(shù)據(jù)到 HTML 的 disabled 屬性。
<div ng-app="" ng-init="mySwitch=true">
<p><button ng-disabled="mySwitch">點我!</button></p>
<p><input type="checkbox" ng-model="mySwitch">按鈕</p>
<p>{{ mySwitch }}</p>
</div>
-
ng-show 指令
ng-show 指令隱藏或顯示一個 HTML 元素寝凌。
<div ng-app="">
<p ng-show="true">我是可見的柒傻。</p>
<p ng-show="false">我是不可見的。</p>
</div>
-
ng-hide 指令
ng-hide 指令用于隱藏或顯示 HTML 元素较木。
<div ng-app="">
<p ng-hide="true">我是不可見的红符。</p>
<p ng-hide="false">我是可見的。</p>
</div>
AngularJS 事件
-
ng-click 指令
ng-click 指令定義了 AngularJS 點擊事件伐债。
<button ng-click="count = count + 1">點我预侯！</button>
<p>{{ count }}</p>
AngularJS 模塊
模塊定義了一個應(yīng)用程序。
模塊是應(yīng)用程序中不同部分的容器峰锁。
模塊是應(yīng)用控制器的容器萎馅。
控制器通常屬于一個模塊。
- 創(chuàng)建模塊
<script>
var app = angular.module("myApp", []);
</script>
在模塊定義中 [] 參數(shù)用于定義模塊的依賴關(guān)系虹蒋。中括號[]表示該模塊沒有依賴糜芳，如果有依賴的話會在中括號寫上依賴的模塊名字。
-
添加控制器
你可以使用 ng-controller 指令來添加應(yīng)用的控制器
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
// statement;
});
函數(shù)會影響到全局命名空間
JavaScript 中應(yīng)避免使用全局函數(shù)魄衅。因為他們很容易被其他腳本文件覆蓋峭竣。
AngularJS 模塊讓所有函數(shù)的作用域在該模塊下，避免了該問題晃虫。什么時候載入庫?
在我們的實例中皆撩，所有 AngularJS 庫都在 HTML 文檔的頭部載入。
對于 HTML 應(yīng)用程序哲银，通常建議把所有的腳本都放置在 <body> 元素的最底部扛吞。
這會提高網(wǎng)頁加載速度，因為 HTML 加載不受制于腳本加載荆责。
在我們的多個 AngularJS 實例中滥比，您將看到 AngularJS 庫是在文檔的 <head> 區(qū)域被加載。
在我們的實例中做院，AngularJS 在 <head> 元素中被加載盲泛，因為對 angular.module 的調(diào)用只能在庫加載完成后才能進行。
另一個解決方案是在 <body> 元素中加載 AngularJS 庫山憨，但是必須放置在您的 AngularJS 腳本前面
AngularJS 包含
在 AngularJS 中查乒，你可以在 HTML 中包含 HTML 文件弥喉。
-
AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內(nèi)容:
<body><div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>
AngularJS 動畫
AngularJS 提供了動畫效果郁竟，可以配合 CSS 使用。
AngularJS 使用動畫需要引入 angular-animate.min.js 庫由境。
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
還需在應(yīng)用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
以上是AngularJS菜鳥教程的整理棚亩，下面會是一些在使用Angular過程中學(xué)習(xí)到的新東西
