1.基礎指令
ng-app 定義應用程序的根元素
ng-bind 綁定HTML元素到應用程序數據
ng-click 定義元素被點擊時的行爲
ng-controller 爲應用程序定義控制器對象
ng-disabled 綁定應用程序數據到HTML的disabled屬性
ng-init 爲應用程序定義初始值
ng_model 綁定應用程序數據到html元素
ng-repeat 爲控制器中的每個數據定義一個模板
ng-show 顯示或隱藏HTML元素
ng_app 指令：
ng-app 指令定義了 AngularJS 應用程序的 根元素。
ng-app 指令在網頁加載完畢時會自動引導（自動初始化）應用程序。
ng-model 指令：
ng-model 指令 綁定 HTML 元素 到應用程序數據。
ng-model 指令也可以：
爲應用程序數據提供類型驗證（number、email、required） 。
爲應用程序數據提供狀態（invalid、dirty、touched、error）
。
爲 HTML 元素提供 CSS 類。
綁定 HTML 元素到 HTML 表單。
ng_bind 指令 等同於{{}}
綁定 HTML 元素到應用程序數據。
示例 1：
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
示例 2：{{}}等同於 ng_bind
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
實例講解：
當網頁加載完畢，AngularJS 自動開啓。
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。
2. ng_init
ng-init 指令
ng-init 指令爲 AngularJS 應用程序定義了 初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
<div ng-app="" ng-init="firstName='John'">
<p>姓名爲 <span ng-bind="firstName"></span></p>
</div>
3.data-指令 data-ng-init 與 ng-init 等價
<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 }}
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>我的第一個表達式： {{ 5 + 5 }}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
AngularJS 數字
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
AngularJS 字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
AngularJS 對象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓爲 {{ person.lastName }}</p>
</div>
AngularJS 數組
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值爲 {{ points[2] }}</p>
</div>
Angularjs 控制器
AngularJS 控制器 控制 AngularJS 應用程序的數據。
AngularJS 控制器是常規的 JavaScript 對象。
AngularJS 應用程序被控制器控制。
ng-controller 指令定義了應用程序控制器。
控制器是 JavaScript 對象，由標準的 JavaScript 對象的構造函數 創建。
控制器的 $scope 是控制器所指向的應用程序 HTML 元素。
angular 中$scope 是連接 controllers(控制器)和 templates(模板 view/視圖)的主要膠合體。
我們可以把我們的 model 存放在 scope 上，來達到雙向你綁定。
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<div ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</div>
</div>
<script>
function personController($scope) { //不建議這樣寫
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
實例講解：
AngularJS 應用程序由 ng-app 定義。應用程序在 <div> 內運行。
ng-controller 指令把控制器命名爲 object。
函數 personController 是一個標準的 JavaScript 對象的構造函數。
控制器對象有一個屬性：$scope.person。
person 對象有兩個屬性：firstName 和 lastName。
ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
ng-repeat 指令結合 ng-controller
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
<script>
function namesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
Angularjs $http 請求數據
1. get 請求
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
$http get 實例 1：
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function
(response) {$scope.names = response;});
$http get 實例 2：
$http.get(url,{params:{id:'5'}}) .success(function(response) {
$scope.names = response;
}).error(function(data){
//錯誤代碼
});
$http post 實例：
var postData={text:'這是 post 的內容'};
var config={params:{id:'5'}}
$http.post(url,postData,config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//錯誤代碼
});
$http Jsonp 實例：
myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_
CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate = data.result;
}
).error(function(){
alert('shibai');
});
Angularjs 過濾器
AngularJS 過濾器可用於轉換數據：
過濾器 描述
currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。
向表達式添加過濾器
過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中。
（下面的兩個實例，我們將使用前面章節中提到的 person 控制器）
uppercase 過濾器格式化字符串爲大寫：
<div ng-app="" ng-controller="personController">
<p>姓名爲 {{ person.lastName | uppercase }}</p>
</div>
lowercase 過濾器格式化字符串爲小寫：
<div ng-app="" ng-controller="personController"">
<p>姓名爲 {{ person.lastName | lowercase }}</p>
</div>
currency 過濾器
currency 過濾器格式化數字爲貨幣格式：
<div ng-app="" ng-controller="costController">
數量：<input type="number" ng-model="quantity">
價格：<input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
向指令添加過濾器
過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中。
orderBy 過濾器根據某個表達式排列數組：
<div ng-app="" ng-controller="namesController">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
過濾輸入
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒
號和一個模型名稱。
filter 過濾器從數組中選擇一個子集：
<div ng-app="" ng-controller="namesController">
<p>輸入過濾：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
Angularjs 模塊
1. 爲什麼要使用模塊
控制器污染了全局命名空間
http://baike.baidu.com/view/4174721.htm
在所有的應用程序中，都應該儘量避免使用全局變量和全局函數。
全局值（變量或函數）可被其他腳本重寫或破壞。
爲了解決這個問題，AngularJS 使用了模塊。
2. 普通的控制器 和 AngularJS 模塊
AngularJS 普通的控制器
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
使用一個由 模塊 替代的控制器：
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
AngularJS 應用程序文件
3.
現在您已經知道模塊是什麼以及它們是如何工作的，現在您可以嘗試創建您自己的應用程序文件。
您的應用程序至少應該有一個模塊文件，一個控制器文件。
首先，創建模塊文件 "myApp.js"：
var app = angular.module("myApp", []);
然後，創建控制器文件。本實例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最後，編輯 HTML 引入模塊：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>