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>