关闭

angularjsService

标签: urlangularjsappservice
131人阅读 评论(0) 收藏 举报
分类:

$location可以放回当前页面的url地址;$localtion比使用window.location要好,因为angularjs会一直监控app,同时处理事件的变化!

举例:

<!DOCTYPE html>
<html>
<head>
    <title>$location</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>当前页面的url:</p>
        {{myUrl}}
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope,$location){
            $scope.myUrl = $location.absUrl();
        });
    </script>
</body>
</html>

浏览器运行之后的效果:

当前页面的url:

file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%BD%93%E7%B3%BB/bootstrap/angularStudy/demo15.html


$http是angularjs中使用最多的服务。angularjs中的服务用于向服务器发送请求,应用响应服务器传送过来的数据。

举例

<!DOCTYPE html>
<html>
<head>
    <title>$http</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{myWelcome}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope,$http){
            $http.get("demo01.html").then(function(response){
                $scope.myWelcome = response.data;
            });
        });
    </script>
</body>
</html>

浏览器上的结果:

<!DOCTYPE html><html><head><title>angularJs</title><meta charset="utf-8" /><script src="angular/angular.min.js"></script></head><body>/*ng-app定义了一个应用。该应用是angular的所有者ng-model把元素的值绑定到应用。ng-bind把应用的数据绑定到HTML试图。ng-controller 定义该元素的控制器*/<div ng-app="myApp" ng-controller="myCtrl">name1:<input type="text" ng-model="firstname"></input><br/>name2:<input type="text" ng-model="lastname"></input><br/>姓名:{{firstname + " "+lastname}}</div><script>//定义angular应用var app = angular.module('myApp',[]);//控制器用于控制angular应用app.controller('myCtrl',function($scope){$scope.firstname="qqq";$scope.lastname = "www";});</script></body></html>


$timeout服务对应了window.setTimeout()函数

举例

<!DOCTYPE html>
<html>
<head>
    <title>$timeout</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>{{myHeader}}</p>
    </div>
    <script>
        angular.module('myApp',[]).controller('myCtrl',function($scope,$timeout){
            $scope.myHeader = "hello world";
            $timeout(function(){
                $scope.myHeader = "world hello";
            },3000)
        })
    </script>
</body>
</html>

输出的结果:

hello world  三秒钟之后变成 world hello

$interval服务对应window.setInterval函数。在指定的周期来调用函数。

举例

<!DOCTYPE html>
<html>
<head>
    <title>$interval</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>time:{{myTime}}</p>
    </div>
    <script >
        angular.module('myApp',[]).controller('myCtrl',function($scope,$interval){
            $scope.myTime = new Date().toLocaleTimeString();
            $interval(function(){
                $scope.myTime = new Date().toLocaleTimeString();
            },2000);
        })
    </script>
</body>
</html>

在浏览器上运行之后的效果是

time:下午4:21:08 两秒钟之后再显示的时间是4:21:10 以两秒钟为周期不停的调用$interval中的函数。

自定义service

举例:

<!DOCTYPE html>
<html>
<head>
    <title>自定义service</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>255转换成16进制的值:{{hex}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.controller('myCtrl',function($scope,qwer){
            $scope.hex = qwer.myFunction(255);
        });
    </script>
</body>
</html>

浏览器运行之后的结果为:

255转换成16进制的值:ff

<!DOCTYPE html>
<html>
<head>
    <title>过滤器中使用service</title>
    <meta charset="utf-8" />
    <script src="angular/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <p>{{255 | myFormat}}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.filter('myFormat',['qwer',function(qwer){
            return function(x){
                return qwer.myFunction(x);
            }
        }]);
    </script>
</body>
</html>

浏览器运行之后的结果为:ff

service过滤数组

举例

</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p>对数组进行过滤</p>
        <ul>
            <li ng-repeat=" x in counts">{{x | myFormat}}</li>
        </ul>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.service('qwer',function(){
            this.myFunction = function(x){
                return x.toString(16);
            }
        });
        app.filter('myFormat',['qwer',function(qwer){
            return function(x){
                return qwer.myFunction(x);
            }
        }]);
        app.controller('myCtrl',function($scope){
            $scope.counts = [255,251,456];
        })
    </script>
</body>
</html>

输出的结果为

对数组进行过滤

  • ff
  • fb
  • 1c8
以上就是angularjs服务的总结!让我们再来回顾一下,首先是讲解的是$location.absUrl获取网页的连接,其次就是¥http获取服务器的数据。然后将response中的data赋给html元素。然后是$timeout,该服务定义在一定时间之后app执行某个函数一次。再就是$interval,该服务是让app以多久为周期不停的执行某个函数。最后讲了自定义服务的使用。以及如何在过滤其中如何使用自定义service.


0
0

  相关文章推荐
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:10538次
    • 积分:703
    • 等级:
    • 排名:千里之外
    • 原创:62篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条