AngularJS 1.x系列：AngularJS服务-Service

1. AngularJS服务

　　AngularJS可注入类型包括：Service、Factory、Provider、Value及Constant。

2. Service

　　AngularJS Service是封装了一些特定业务逻辑的单例对象，在每个应用中只会被实例化一次（由$injector实例化），且延迟加载（需要时才会创建）。

　　AngularJS Service对外提供方法供其他组件调用。

 

2.1 AngularJS内置Service对象

　　AngularJS内置30多个服务。

 

1>. $location：返回当前页面的 URL 地址

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", "$location", function ($scope, $location) {
            $scope.url = $location.absUrl();
        }]);
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ url }}
    </div>
</body>
</html>

 

2>.$timeout：在指定的毫秒数后调用函数或计算表达式，只执行一次。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", "$timeout", function ($scope, $timeout) {
            $scope.text = "Hello World!";
            $timeout(function () {
                $scope.text = "Hello AngularJS!";
            }, 2000);
        }]);
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ text }}
    </div>
</body>
</html>

 

3>.$interval：按照指定的周期（以毫秒计）来调用函数或计算表达式，会多次不停地调用执行。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", "$interval", function ($scope, $interval ) {
            $scope.time = new Date().toLocaleTimeString();
            $interval (function () {
                $scope.time = new Date().toLocaleTimeString();
            }, 1000);
        }]);
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ time }}
    </div>
</body>
</html>

 

4>.不使用 $interval 服务的情况下，运用 $apply显示时间。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", function ($scope) {
            $scope.time = new Date().toLocaleTimeString();
            $scope.setTime = function() {
                // $apply访问并修改数据
                $scope.$apply (function () {
                    $scope.time = new Date().toLocaleTimeString();
                });
            }

            setInterval($scope.setTime, 1000);
        }]);
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ time }}
    </div>
</body>
</html>

 

2.2 自定义服务

　　AngularJS自定义服务语法格式：

var app = angular.module("app", []);
app.service("serviceName", function(){
    // 属性、方法
});

 

其中：

　　第一个参数：Service名称

　　第二个参数：Service对象的构造函数，可以定义属性和方法来封装处理一些逻辑。

 

示例1：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", "$datetime", function ($scope, $datetime) {
            $scope.time = $datetime.getTime();
        }]);
        app.service("$datetime", function(){
            this.getTime = function() {
                return new Date().toLocaleTimeString();
            };
        });
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ time }}
    </div>
</body>
</html>

 

示例2：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("HelloCtrl", ["$scope", "$interval", "$datetime", function ($scope, $interval, $datetime) {
            $interval (function () {
                $scope.time = $datetime.getTime();
            }, 1000);
        }]);
        app.service("$datetime", function(){
            this.getTime = function() {
                return new Date().toLocaleTimeString();
            };
        });
    </script>
</head>
<body>
    <div ng-controller="HelloCtrl">
        {{ time }}
    </div>
</body>
</html>

 

 

示例3：在自定义的Service中可以注入其他Service对象。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../lib/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.run(["$datetime", function ($datetime) {
            $datetime.getTime();
        }]);
        app.service("$datetime", ["$interval", "$log", function($interval, $log) {
            this.getTime = function() {
                $interval (function () {
                    $log.info(new Date().toLocaleTimeString());
                }, 1000);
            };
        }]);
    </script>
</head>
<body>
</body>
</html>

 

 

文章来源：AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）

 

AngularJS 1.x系列

posted on 2018-08-29 09:07  Neo0820  阅读(191)  评论(0)  编辑  收藏  举报

导航