AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）
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：一个常量，与服务名称对应的常量值或对象。当注入该服务之后，可以直接调用服务名对应的常量。
