AngularJS 1.x系列：AngularJS服務-Service、Factory、Provider、Value及Constant（5）

libingql發表於2017-06-10
AngularJSIDE

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>

　　不使用 $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物件的建構函式，可以定義屬性和方法來封裝處理一些邏輯。

　　示例：

<!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>

　　示例：

<!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>

　　示例：在自定義的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>

3. Factory

 

4. Provider

 

5. Constant

　　constant建立的服務用來返回一個常量。

　　constant語法格式：

var app = angular.module("app", []);
app.constant(name, value);

　　其中，

　　　　引數name：建立服務的名稱

　　　　value：一個常量，與服務名稱對應的常量值或物件。當注入該服務之後，可以直接呼叫服務名對應的常量。

6. Value

相關文章