AngularJSAngularjs基础(四)

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变为一个数组。

相关文章