angularJS的Service(服务)基础

最新推荐文章于 2017-11-10 09:21:35 发布

梦无悔

最新推荐文章于 2017-11-10 09:21:35 发布

阅读量445

点赞数

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

本文链接：https://blog.csdn.net/u014444571/article/details/71530838

版权

angularjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一下代码可直接复制保存为html文件查看效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>angularJs的服务(service)简单介绍</title>
        <script src="js/Angular.js"></script>
    </head>
    <body>
        <div ng-app="serviceApp" ng-controller="serviceController">
            <div>
                <h4>$location服务</h4>
                当前文件所在路径：{{url}}
            </div>
            <div>
                <h4>$http服务</h4>
                {{myWelcome}}
            </div>
            <div>
                <h4>$interval 服务</h4>
                <p>现在时间是:</p>
                {{theTime}}
            </div>
            <div>
                <h4>$timeout 服务</h4>
                {{myHeader}}
            </div>
            <div>
                <h4>自定义服务myService</h4>
                <form ng-controller="myController">
                    255转换16进制后的值为{{dex}}
                </form>
            </div>
            <script>
                var app = angular.module("serviceApp",[]);
                //自定义服务
                app.service("myService",function(){
                    this.fuc = function(num){
                        return num.toString(16);
                    }
                });
                app.controller("serviceController",function($scope,$location,$http,$interval,$timeout,myService){
                    //$location服务
                    $scope.url=$location.absUrl();
                    //$http服务
                    $http.get("js/httpService.html").then(function (response) {
                      $scope.myWelcome = response.data;
                     });
                     //$interval 间隔服务
                    $scope.theTime = new Date().toLocaleTimeString();
                    $interval(function () {
                        $scope.theTime = new Date().toLocaleTimeString();
                    }, 1000);
                    //$timeout 定时任务
                    $scope.myHeader = "Hello World!";
                    $timeout(function () {
                        $scope.myHeader = "How are you today?";
                    }, 2000);


                });
                 //使用自定义服务
                app.controller("myController",function($scope,myService){

                    $scope.dex = myService.fuc(255);
                })
            </script>
        </div>
        <hr />
        <div>
            <h3>$location服务</h3>
            $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。<br />
            AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。<br />
        </div>
        <div>
            <h3>$http 服务</h3>
            $http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。
        </div>
        <div>
            <h3>$interval 服务</h3>
            AngularJS $interval 服务对应了 JS window.setInterval 函数。
        </div>
        <div>
            <h3>$timeout 服务</h3>
            AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
        </div>
        <div>
            <h3>自定义 服务</h3>
            你可以创建访问自定义服务，链接到你的模块中。<br/>
            要使用访问自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:
        </div>
        <div>
            <h4>$apply方法</h4>
             $apply 方法可以修改数据
             $scope.$apply(function() {
                $scope.theTime = new Date().toLocaleTimeString();
            });
        </div>

        <div>
            <h4>$watch</h4>
            持续监听数据上的变化，更新界面
            //监听lastName的变化，更新fullName
           $scope.$watch('lastName', function() {
              $scope.fullName = $scope.lastName + " " + $scope.firstName;
           });
        </div>
    </body>
</html>