AngularJS內建服務以及自定義服務的用法


在AngularJS中, 服務是一個比較重要的部分,它是一個對象或者是函數,可以在你的AngularJS的應用中使用。接下來介紹幾種比較常用的內建服務以及自定義服務的方法。

[內建服務]

(1)location服務

     location服務返回當前頁面的地址,需要注意的是location服務是作為一個參數傳遞到 controller 中。如果要使用它,需要在 controller 中定義。

 >>>代碼部分

<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服務

$http服務: 服務向服務器發送請求,應用響應服務器傳送過來的數據。

>>>代碼部分

 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服務

AngularJS $timeout 與 JS window.settimeout 函數相對應,實現效果相同

代碼如下>>>

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 });

【自定義服務】

1、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         })

2、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         })

3、provider

1、在AngularJS中,Service,factory都是基於provider實現的。
2、在provider中,通過$get()方法提供了factory的寫法,用於返回 value/service/factory。;
3、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         })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM