AngularJS内建服务以及自定义服务的用法

时间 2019-12-11

标签 angularjs 内建服务以及自定义用法栏目 AngularJS 繁體版

原文原文链接

在AngularJS中，服务是一个比较重要的部分，它是一个对象或者是函数，能够在你的AngularJS的应用中使用。接下来介绍几种比较经常使用的内建服务以及自定义服务的方法。html

[内建服务]服务器

（1）location服务app

location服务返回当前页面的地址，须要注意的是location服务是做为一个参数传递到 controller 中。若是要使用它，须要在 controller 中定义。ide

>>>代码部分函数

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p> 当前页面的url:</p>
<h3>{{myUrl}}</h3>
</div>
<p>该实例使用了内建的 $location 服务获取当前页面的 URL。</p>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>
</html>

（2）$http服务this

$http服务：服务向服务器发送请求，应用响应服务器传送过来的数据。url

>>>代码部分spa

 1 <div ng-app="myApp" ng-controller="myCtrl"> 
 2 <p>欢迎信息:</p>
 3 <h1>{{myWelcome}}</h1>
 4 </div>
 5 <p> $http 服务向服务器请求信息，返回的值放入变量 "myWelcome" 中。</p>
 6 <script>
 7 var app = angular.module('myApp', []);
 8 app.controller('myCtrl', function($scope, $http) {
 9   $http.get("welcome.htm").then(function (response) {
10       $scope.myWelcome = response.data;
11   });
12 });
13 </script>

(3) $timeout服务code

AngularJS $timeout 与 JS window.settimeout 函数相对应，实现效果相同htm

代码以下>>>

1 var app = angular.module('myApp', []);
2 app.controller('myCtrl', function($scope, $timeout) {
3     $scope.myHeader = "Hello World!";
4     $timeout(function () {
5         $scope.myHeader = "How are you today?";
6     }, 2000);
7 });

代码所执行的效果是，2s后执行代码。

（4）$interval服务

AngularJS $interval 与 JS window.settimeinterval 函数相对应，实现效果相同

1 var app = angular.module('myApp', []);
2 app.controller('myCtrl', function($scope, $interval) {
3     $scope.theTime = new Date().toLocaleTimeString();
4     $interval(function () {
5         $scope.theTime = new Date().toLocaleTimeString();
6     }, 1000);
7 });

【自定义服务】

一、service

1 angular.module("app",[])
2         .controller("ctrl",function($scope,$hexafy){}）
3 .service('$hexafy', function() {
4             this.$$gongneng = "将转入的数字，转为16进制";
5             this.myFunc = function (x) {
6                 return x.toString(16);
7             }
8         })

二、factory

factory 是一个函数用于返回值,一般咱们使用 factory 函数来计算或返回值。(factory使用上，与service差距不大)

 1 angular.module("app",[])
 2         .config()
 3         .controller("ctrl",function($scope,hexafy){
 4             $scope.gongneng = hexafy.gongneng;
 5             $scope.num = hexafy.myFunc(255);
 6         })
 7         .factory('hexafy',function(){
 8             var obj = {
 9                 gongneng : "将转入的数字，转为16进制",
10                 myFunc:function(x){
11                     return x.toString(16);
12                 }
13             };
14             return obj;
15         })

三、provider

一、在AngularJS中，Service，factory都是基于provider实现的。
二、在provider中，经过$get()方法提供了factory的写法，用于返回 value/service/factory。；
三、provider是三种自定义服务中，惟一能够写进config配置阶段的一种。
若是服务，必需要在配置阶段执行，那么必须使用provider。不然，通常使用Service或factory

 1 .controller("ctrl",function($scope,hexafy){
 2             $scope.gongneng = hexafy.gongneng;
 3             $scope.num = hexafy.myFunc(255);
 4         })
 5         
 6         /*定义一个provider服务*/
 7         .provider('hexafy',function(){
 8             //默认使用Service的写法
 9 //            this.gongneng = "将转入的数字，转为16进制";
10             this.$get = function(){
11                 var obj = {
12                     gongneng : "将转入的数字，转为16进制",
13                     myFunc : function(x){
14                         return x.toString(16);
15                     }
16                 }
17                 return obj;
18             }
19         })