【AngularJS】—— 13 服務Service

時間 2019-11-19

標籤 AngularJS 服務 service 欄目 AngularJS 简体版

原文原文鏈接

在AngularJS中有不少的服務，經常使用的好比$http,$location等等。javascript

本篇文章會介紹一下的內容：html

　　1 $http這種Angular提供的服務的使用java

　　2 如何自定義服務，並總結服務須要注意的幾個小點。node

　　$http的使用

　　AngularJS爲咱們提供了不少種服務，$http用於發送http請求，動態的請求數據。web

　　這樣就須要使用web容器來運行代碼了，先看看程序源碼，視圖方面仍是跟普通的代碼相同：json

<div ng-controller="myAppCtrl">
            <ul>
                <li ng-repeat="user in users"> {{user.name}} </li>
            </ul>
        </div>

　　建立一個無序列表，循環輸出請求到的數據。app

　　在js中，建立一個模板，在模板上建立控制器。ide

<script type="text/javascript">
            var myAppModule = angular.module("myApp",[]); myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){ $http({ method:'GET', url:'data.json' }).success(function(data,status,headers,config){ console.log("success!..."); console.log(data); $scope.users = data; }).error(function(data,status,headers,config){ console.log("error!..."); }); }]); </script>

　　該控制器比平時普通的控制器多了一個注入的參數$http，添加了這個參數，就能夠在方法內部直接調用。函數

　　採用以下的格式：測試

$http({ 　　method:'GET',//http請求的類型 　　url:'data.json'//請求的地址 }).success(function(data,status,headers,config){ 　　//成功了，怎麼作 }).error(function(data,status,headers,config){ 　　//失敗了，怎麼作 });

　　接下來須要在代碼相同的路徑下，建立data.json文件

[{ "name":"test1" },{ "name":"test2" },{ "name":"test3" }]

　　利用web容器，本文使用的是基於nodejs的http-server，啓動後在網頁中輸入相應的URL查看結果：

　　所有的代碼展現：

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <div ng-controller="myAppCtrl">
            <ul>
                <li ng-repeat="user in users"> {{user.name}} </li>
            </ul>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]); myAppModule.controller('myAppCtrl',['$scope','$http',function($scope,$http){ $http({ method:'GET', url:'data.json' }).success(function(data,status,headers,config){ console.log("success!..."); console.log(data); $scope.users = data; }).error(function(data,status,headers,config){ console.log("error!..."); }); }]); </script>
    </body>
</html>

View Code

　　使用$http是很基本的內容，就不作過多的解釋了。

　　建立本身的Service服務

　　接下來看看如何建立本身的服務，建立服務能夠經過三種方式，factory,provider和service，可是它們的本質都是Provider，只是封裝了不一樣的寫法而已。

　　本文采用factory的形式，仍然是先建立一個模塊，在模塊的基礎上建立一個Service:

var myAppModule = angular.module("myApp",[]); myAppModule.factory('myService',['$http',function($http){ var doRequest = function(username){ return $http({ method:'GET', url:'data.json' }); } return { userList:function(username){ return doRequest(username); } } }]);

　　分析下代碼：

　　這個Service須要注入一個屬性 $http ，在方法內部，返回的值是一個對外提供的方法，userList。

　　外部能夠經過 userList(username) 的方式，進行調用。

　　真正的實現部分放在 doRequest 中，內部就是典型的一個AngularJS的$http請求了，請求會返回url相應的數據。

　　而後看一下外部如何使用，先看看視圖部分：

<div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="輸入"/>
            <pre ng-show="username"> {{users}} </pre>
        </div>

　　該部分是一個輸入框input和一個代碼框pre，他們共同使用了一個變量username。當username有值時，會在下面展現users對應的內容。

myAppModule.controller('myAppCtrl',['$scope','$timeout','myService', function($scope,$timeout,myService){ var timeout; $scope.$watch('username',function(newUserName){ console.log("您輸入了："+newUserName); if(newUserName){ if(timeout){ $timeout.cancel(timeout); } timeout = $timeout(function(){ myService.userList(newUserName).success(function(data){ console.log(data); $scope.users = data; }); },350); } }); } ]);

　　在對應的控制器中，採用了$watch這種監控方法，監控username屬性的變化。當username屬性變化時，會觸發請求方法。

　　控制器多注入了一個$timeout變量，該變量用於控制輸入的時間。代碼觀察$timeout(function(...),350);當輸入的間隔超過350ms時，就會觸發相應函數function(...)。這樣能夠有效的防止，不停的刷新請求，形成網頁的刷新抖動。

　　在函數內部，調用了咱們本身的服務提供的userList方法。當請求成功時，綁定返回值到users中。users會動態的刷新內容。

　　查看程序的演示結果：

　　經過測試發現：當咱們快速的輸入4321時，雖然$watch都監控到了變量的變化，可是隻有中止時間超過350ms纔會發送請求。

　　所有的代碼樣例：

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>
        
        <div ng-controller="myAppCtrl">
            <label>username</label>
            <input type="text" ng-model="username" placeholder="輸入"/>
            <pre ng-show="username"> {{users}} </pre>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]); myAppModule.factory('myService',['$http',function($http){ var doRequest = function(username){ return $http({ method:'GET', url:'data.json' }); } return { userList:function(username){ return doRequest(username); } } }]); myAppModule.controller('myAppCtrl',['$scope','$timeout','myService', function($scope,$timeout,myService){ var timeout; $scope.$watch('username',function(newUserName){ console.log("您輸入了："+newUserName); if(newUserName){ if(timeout){ $timeout.cancel(timeout); } timeout = $timeout(function(){ myService.userList(newUserName).success(function(data){ console.log(data); $scope.users = data; }); },350); } }); } ]); </script>
    </body>
</html>