AngularJS 教程（二）

最新推荐文章于 2018-04-04 15:38:22 发布

simon白猪

最新推荐文章于 2018-04-04 15:38:22 发布

阅读量221

点赞数

分类专栏： angularjs 文章标签： angularjs 服务

本文链接：https://blog.csdn.net/m0_37615415/article/details/72628328

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

AngularJS 基础

AngularJS有很多非常好用的内置功能，我们可以直接使用。我们通过示例一一介绍这些功能。

过滤器

过滤器名称	功能
lowercase	字段转小写
uppercase	字段转大写
currency	字段前面加货币单位
limitTo	截取
number	保留小数
orderBy	排序
filter	过滤

<html lang="en" ng-app="loginApp">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
    <title>读书郎电子书包-登录</title>
</head>
<body ng-controller="LoginCtrl">
    <div id="header">
    <!-- 转载请注明出处 -->
        <div class="header-nav row">
            <p>{{myFruit | lowercase }}</p>
            <p>{{myFruit | uppercase }}</p>
            <p>{{myFruitPrice | currency }}</p>
            <p>{{myFruitPrice|  currency:"￥" }}</p>
            <p>{{fruitSource | limitTo :6}}</p>
            <p>{{fruitAverage | number :2}}</p>
            <ul>
                <li ng-repeat="x in students  | orderBy:'name':true ">
                    {{x}}                   
                </li>
            </ul>
            <ul>
                <li ng-repeat="x in students  | orderBy:'-age' ">
                    {{x}}                   
                </li>
            </ul>
            <ul>
                <li ng-repeat="x in students | filter:{'age':10} ">
                    {{x}}                   
                </li>
            </ul>
        </div>
    </div>    
    <script type="text/javascript">
         var app = angular.module("loginApp", []);
    app.controller('LoginCtrl', ["$scope",function($scope) {
        $scope.myFruit = "apple";
        $scope.myFruitPrice = 3;
        $scope.fruitSource = "中国广州番禺区大学城";
        $scope.fruitAverage = 1.222;
        $scope.students = [{"name":"jane","age":10},{"name":"tome","age":9}];
   }]);
    </script>
</body>
</html>

lowercase与uppercase都很好理解，我们可以看到过滤器使用非常方便。在数据后面加一个 | 符号即可。currency过滤器可以让我们自己定义我们的货币符号，默认是美元$ 。做网页有时候也会去测试一下我们某个元素溢出的情况，使用limitTo就可以让我们很好处理这些溢出情况。orderBy过滤器相当于我们数据库的orderBy , 默认是升序从小到大，对于字符我们可以用第一种去改变排序规则。对于数字可以用第二种，加个负号就可以了。

上面的过滤器其实就是字段显示辅助手段，真正有过滤功能的是filter。既可以指定一个对象，也可以指定字符。如果是指定字符，那这个元素的所有属性至少一个包含了这个字符就会存在在HTML页面中，不包含这个字符的是不存在HTML页面中的。我们可以把上面的过滤器通过多个 | 配合使用。

服务（service）

服务在AngularJS中就是一个对象，里面封装了函数。我们一般在控制器声明的时候通过依赖注入来使用这个对象。AngularJS内建了很多服务。有 $window, $location,$timeout , $interval ,这些服务可以替代我们日常使用的window对象等。当然内建服务中还有最重要的 $http 服务。

//使用 $http 服务
$http.get('/someUrl', config).then(function(resp){
    //成功执行
}, function(resp){
    //失败执行
]});

$http.post('/someUrl', data, config).then(function(resp){
    //成功执行
}, function(resp){
    //失败执行
});

可以看到http请求非常方便，Angular还支持更多方法，head, delete,put,patch,jsonp。使用方法跟上面代码一样风格。传入的data,config参数都是对象。返回的resp里面有五个字段。
status 和 statusText : 成功请求是 200 “OK”;
config : 一个对象，我们此次请求的具体信息。包含头部信息，url, 参数等。
headers : 一个函数，我们可以通过它获取头信息，类似头信息的getter函数。
data : 一个对象，我们服务器返回的数据。
http还提供了一种比较原生的请求方式，把服务本身当成一个函数，我们传入配置对象。直接执行就可以。

//只是一个示例函数。
myRequest: function (myUrl, myMethod, myParams, myData, myHeaders, myTransformRequest) {
    //都是对象。
    var httpConfig = {
         method : myMethod,
         url : myUrl,
         params : myParams,      
         data : myData,
         headers : myHeaders,
         transformRequest : myTransformRequest
    };
     //此处发送http请求
     return $http(httpConfig);
}

httpConfig有最基本配置项。method可以是：GET/DELETE/HEAD/JSONP/POST/PUT。params配置项是指加在URL后面的数据。data配置项是post等请求的数据。我们可以在headers传入我们自己定义的头部。当requestbody为不同内容的时候对应不同的myHeaders和myTransformRequest，post请求时我们需要在头部加入Content-Type :”application/x-www-form-urlencoded; charset=UTF-8”，当post请求体是json时，头部应该添加 Content-Type : “application/json; charset=UTF-8”。下面是一个示例的httpConfig对象。