基本概念和用法-Service與Peovider 2-7

使用$http服務

<html ng-app="MyModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="HTTPBasic.js"></script>
    </head>
    <body>
        <div ng-controller="LoadDataCtrl">
            <ul>
                <li ng-repeat="user in users">
                    {{user.name}}
                </li>
            </ul>
        </div>
    </body>
</html>

有ng-controller叫做LoadDataCtrl,

這個ng-controller有個列表ng-repeat將數(shù)組循環(huán)出來。

ng-repeat="user in users"這里的users數(shù)據(jù)不再是像前面寫列子一樣寫死在代碼里面,希望通過后臺去加載進來,

var myModule=angular.module("MyModule",[]);
myModule.controller('LoadDataCtrl', ['$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...");
    });
}]);

調用AngularJS里面的$http這個服務,

method: 'GET', 數(shù)據(jù)交互方式GET或POST

url: 'data.json'要請求哪個地址。

success成功后執(zhí)行函數(shù)

error請求錯誤執(zhí)行函數(shù)

這里請求的是json文件

[{
    "name": "《用AngularJS開發(fā)下一代WEB應用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《ActionScript3.0游戲設計基礎(第二版)》"
}]

拿到這些數(shù)據(jù)以后把他$scope.users上面去

$scope.users=data;

創(chuàng)建自己的Service

<html ng-app="MyServiceApp">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyService1.js"></script>
</head>

<body>
    <div ng-controller="ServiceController">
        <label>用戶名</label>
        <input type="text" ng-model="username" placeholder="請輸入用戶名" />
        <pre ng-show="username">{{users}}</pre>
    </div>
</body>

</html>

有一個inout他的ng-model等于username

要實現(xiàn)的效果是當輸入項內容發(fā)生變化的時候就去向后臺發(fā)起請求,

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);

myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {
            if (newUserName) {
                if (timeout) {
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);
            }
        });
    }
]);

//...

AngularJS封裝了叫$watch用來監(jiān)控一個數(shù)據(jù)模型的變化,這里利用$watch來監(jiān)聽,

監(jiān)聽username他發(fā)生變化以后執(zhí)行一個匿名函數(shù),這個函數(shù)里面來檢測是不是拿到新的newUserName如果拿到新的值就向后臺去發(fā)送請求,

那么調用誰去發(fā)請求呢?就調用自己封裝的userListService

這個地方有一個比較繞的東西叫做'$timeout'

這個'$timeout'就是說當我們在頁面上進行輸入的時候不是說我們每次按下減排他就去請求后臺,如果這樣的話會發(fā)現(xiàn)頁面會抖動,假如說每按下一個鍵他就去向后臺發(fā)起請求,很顯然頁面會不斷地狂刷,

這個時候加一個防止抖動的處理,這是比較常見的動作,只有當你350毫秒不再按下一個按鍵的時候,就是說延遲350毫秒沒有按下,這個時候他才會去向后臺發(fā)起請求。

當你連續(xù)按鍵的時候,并不會向后臺連續(xù)發(fā)送請求,

最后調用的函數(shù)是userListService.userList這個函數(shù),

自己定義的Service和AngularJS內置的Service有兩點不同點,

一種是我們自己定義的Service他的命名不要用$打頭,

第二我們自己定義的Service也是可以向AngularJS內置的服務一樣去進行注入的,但是注入的時候有一個不同的地方,就是說我們自己定義的Service是必須放在最后一個的,

有了這個Service以后,假設要做相同的操作就可以去一直去調用它,很多的controller控制器都可以去共用的,從而實現(xiàn)了這個功能的復用,

比如說我要把userListService抽出作為自己的服務,這個Servuce里面會去返回userList用戶列表數(shù)據(jù)。

把它抽成一個服務之后,其他的控制器就可以調用它,

項目中控制器會有很多,如果有控制器之間有代碼相同,那么就可以抽到Servuce服務里面,方便調用。

圖片.png

Service的特性

圖片.png

Service,F(xiàn)actory,Porvider,本質上都是Porvider

圖片.png

使用$filter

圖片.png

其他內置Service介紹

圖片.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,969評論 19 139
  • AngularJS是什么?AngularJs(后面就簡稱ng了)是一個用于設計動態(tài)web應用的結構框架。首先,它是...
    200813閱讀 1,647評論 0 3
  • AngularJS的模塊化實現(xiàn) 上面代碼有一個p標簽里面有一個雙花括號的取值表達式, js代碼是一個很簡單的函數(shù)這...
    深沉的簡單閱讀 940評論 0 0
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應用程序數(shù)據(jù)。ng-model 指令也可以:...
    壬萬er閱讀 894評論 0 2
  • AngularJSAngularJS 是一個 MV* 框架, 最適于開發(fā)客戶端的單頁面應用。它不是個功能庫,...
    一直以來都很好閱讀 910評論 0 0