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