Angularjs基础(四)
AngularJS过滤器
过滤器可以使用一个管道符(|)添加到表达式和指令中。
AngularJS过滤器可用于转换数据：
currency 格式化数字为货币格式
filter 从数组中选着应子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组
uppercase 格式化字符串为大写。
表达式中添加过滤器
过滤器可以通过一个管道字符(|) 和一个过滤器添加到表达式中。
uppercase过滤器将字符串格式化为大写。
实例：
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名{{lastName | uppercase}}</p>
</div>
lowercase 过滤器将字符串格式化为小写
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为{{lastName | lowercase}}</p>
</div>
currency 过滤器
currency 过滤器将数字格式化为货币格式：
实例：
<div ng-app="myApp" ng-controller="costCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>总价={{(quantity * price) | currency}}</p>
</div>
向指令添加过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中
orderBy 过滤器根据表达式排列数组：
实例：
<div ng-app="myApp" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in name | orderBy:'country'"> {{x.name +','+ x.country}} </li> </ul> </div>
过滤输入
输入过滤器可以通过一个管道符(|)和一个过滤器添加到指令中，该过滤器后跟一个冒号和模型名称。
filter过滤器从数组中选着一个子集：
实例
<div ng-app="myApp" ng-controller="namesCtrl"> <p><input type="text" ng-model="test"></p> <ul> <li ng-repeat="x in names | filter:test | orderBy:'countery'"> {{(x.name | uppercase) +','+x.counry}} </li> </ul> </div>
AngularJS服务(Service)
AngularJS 中你可以创建自己的服务，或使用内创建服务。
什么是服务？
在AngularJS中，服务是一个函数或对象，在你的AngularJS 应用中使用。
有个$location 服务，他可以返回当前页面的URL地址。
实例：
var app = angular.module('myApp',[]); app.controller('customersCtrl',function($scope,$location){ $scope.myUrl = $location.absUrl(); })
注意：$location 服务是作为一个参数传递到controller中.如果要使用它，需要在controller中定义。
为什么使用服务？
$http 是AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
AngularJS 会一直监控应用，处理事件变化，AngularJS使用 $location 服务比使用window.location 对象更好。
$http 服务
$http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。
实例：
使用$http 服务器服务器请求数据：
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope,$http){ $http.get("welcome.html").then(function(response){ $scope.myWelcome = response.data; }); });
$timeout 服务
AngularJS $timeout 服务对应了JSwindow.setTimeout 函数
实例：
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 服务
AngularJS $interval 服务对应了JS window.setInterval 函数。
实例： 每两秒显示信息：
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope,$interval){ $scope.theTime = new Date().toLocaleTimeString(); $interval(function(){ $scope.theTime = new Date().toLocaleTimeString(); },1000) })
创建自定义服务
你可以创建自定义的访问，链接到你的模块中：
创建名为hexafy 访问：
app.service('hexafy',function(){
this.myFunc = function(x){
this.myFunc = function (x){
return x.toString(16);
}
}
});
要使用自定义的访问，需要在定义过滤器的时候独立添加：
实例：
使用自定义的服务hexafy 将一个数组转换为16 进制。
app.controller('myCtrl',function($scope,hexafy){
$scope.hex = hexafy.myFunc(255);
})
过滤器中，使用自定服务
当你创建了自定义服务器，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服服务器中使用它。
在过滤器myFormat 中使用服务hexafy:
app.filter('myFormat',['hexify',function(hexify){
return function(x){
return hexify.myFunc(x);
};
}])
在从对象会数组中获取值时你可以使用过滤器：
创建服务hexafy:
<ul>
<li ng-repeat ="x in counts">{{x | myFormat}}</li>
</ul>
AngularJS XMLHttpRequest
$http 是AngularJS 中的一个核心服务，用于读取远程服务器的数据。
读取JSON 文件
以下是存储在web服务器上的JSON 文件
{ "records": [ { "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" }, { "Name" : "Berglunds snabbk?p", "City" : "Lule?", "Country" : "Sweden" }, { "Name" : "Centro comercial Moctezuma", "City" : "México D.F.", "Country" : "Mexico" }, { "Name" : "Ernst Handel", "City" : "Graz", "Country" : "Austria" }, { "Name" : "FISSA Fabrica Inter. Salchichas S.A.", "City" : "Madrid", "Country" : "Spain" }, { "Name" : "Galería del gastrónomo", "City" : "Barcelona", "Country" : "Spain" }, { "Name" : "Island Trading", "City" : "Cowes", "Country" : "UK" }, { "Name" : "K?niglich Essen", "City" : "Brandenburg", "Country" : "Germany" }, { "Name" : "Laughing Bacchus Wine Cellars", "City" : "Vancouver", "Country" : "Canada" }, { "Name" : "Magazzini Alimentari Riuniti", "City" : "Bergamo", "Country" : "Italy" }, { "Name" : "North/South", "City" : "London", "Country" : "UK" }, { "Name" : "Paris spécialités", "City" : "Paris", "Country" : "France" }, { "Name" : "Rattlesnake Canyon Grocery", "City" : "Albuquerque", "Country" : "USA" }, { "Name" : "Simons bistro", "City" : "K?benhavn", "Country" : "Denmark" }, { "Name" : "The Big Cheese", "City" : "Portland", "Country" : "USA" }, { "Name" : "Vaffeljernet", "City" : "?rhus", "Country" : "Denmark" }, { "Name" : "Wolski Zajazd", "City" : "Warszawa", "Country" : "Poland" } ] }
AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url)是用于读取服务器数据的函数。
实例：
<div ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in name"> {{x.Name + ','+x.Country}} </li> </ul> </div> <script> var app = angular.module('myApp',[]); app.controller('customersCtrl',function($scope,$http){ $http.get("http:www.runoob.com/try/angularjs/data/Customes_JSON.php") success(function(response) {$scope.names = response.records;}); }) </script>
应用解析:
注意：以上代码的get请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将Customers_JSON.php
的数据拷贝到你 的服务器上。
AngularJS 应用通过ng-app 定义,应用在<div>中执行。
ng-controller指令设置了controller对象名。
函数customersController是一个标准的JavaScript对象构造器。
控制器对象有一个属性：$scope.names.
$http.get()从web服务器上读取静态JSON 数据。
服务器数据文件为： http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
当从服务端载入JSON 数据时，$scope.names变为一个数组。
