angularjs--$http服務及自定義service

時間 2019-12-06

標籤 angularjs http 服務自定義 service 欄目 AngularJS 简体版

原文原文鏈接

$http的使用

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

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

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

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

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

<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，添加了這個參數，就能夠在方法內部直接調用。web

　　採用以下的格式：json

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

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

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

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

　　所有的代碼展現：函數

<!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>

　　使用$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>

　　關於自定義的服務，有下面幾點須要注意：

　　1 它的使用場景：因爲能夠在服務中抽取公共調用的方法，所以能夠把多個控制器中相同的功能抽取出來，造成一個服務。

　　2 單例：服務都是單例的，一個應用生命週期內，只有一個服務的實例存在。

　　3 注入器：服務的實例化都是有注入器injector建立的。在咱們建立controller控制器時，後面指明瞭須要注入一個myService服務，注入器就會去實例化該服務。