AngularJS $http 請求數據
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/rty/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=20&page=1&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate=data.result;
}
).error(function(){alert('shibai');});
|
AngularJS 過濾器
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 模塊
爲什麼要使用模塊
控制器污染了全局命名空間
本教程中運用大量全局函數 而在應用中應儘量避免使用全局變量和全局函數。
全局值（變量或函數）可被其他腳本重寫或破壞。
爲了解決這個問題，AngularJS使用了模塊。
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應用程序文件
現在知道模塊是怎麼工作的了，現在可以創建自己的程序文件，
應用程序文件中應至少有一個模塊文件，一個控制器文件
首先，創建模塊文件“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="myCtrl.js"></script>
</body>
</html>