基本概念和用法-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将数组循环出来。

ng-repeat="user in users"这里的users数量不再是诸如前写列子一样写好于代码里面,希望由此后台去加载进来,

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', 数据交互方式GET或POST

url: 'data.json'假使告哪个地方。

success马到成功后执行函数

error要错误执行函数

这边要的是json文件

[{
    "name": "《用AngularJS开发下一代WEB应用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《ActionScript3.0游戏设计基础(第二版)》"
}]

以到这些数据后管他$scope.users上面去

$scope.users=data;

开创和谐之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

若实现之功用是当输入项内容发生变化的时刻即便去奔后台发起呼吁,

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从而来监督一个数据模型的成形,这里运用$watch来监听,

监听username他发生变化以后推行一个匿名函数,这个函数里面来检测是无是拿到新的newUserName若果以到新的值就是为后台去发送请求,

那调用谁去发请求呢?就调用自己包装的userListService

这个地方产生一个比较绕的物叫'$timeout'

这个'$timeout'身为当我们在页面上拓展输入的时段不是说我们每次按下减排他便失央求后台,如果这样的话会意识页面会抖动,假如说每本下一个键他即便错过为后台发起呼吁,很明朗页面会不断地狂刷,

斯时节加一个防抖动的拍卖,这是较普遍的动作,只有当您350毫秒不再循下一个按键的时节,就是说延迟350毫秒没有遵循下,这个时节他才会错过往后台发起呼吁。

当您总是按键的时,并无见面于后台连续发送请求,

末段调用的函数是userListService.userList其一函数,

祥和定义之Service和AngularJS内置的Service出三三两两碰不同点,

同样栽是我们好定义之Service外的命名不要因此$打头,

其次AngularJS咱们自己定义之Service呢是可以望AngularJS内置的劳务均等去进行注入的,但是注入的上有一个见仁见智的地方,就是说我们和好定义之Service举凡必在最后一个的,

发生矣这Service之后,假要要开一样之操作就好错过直接去调动用它,很多之controller控制器都可以去联合用的,从而实现了此功效的复用,

如我要把userListService挤出作为友好之服务,这个Servuce里面会去返回userList用户列表数据。

将她减少成一个劳务之后,其他的控制器就可以调用它,

品种遭到控制器会发出众多,如果出控制器之间发生代码相同,那么即便可减少到Servuce服务之中,方便调用。

图片.png

Service的特性

图片.png

Service,Factory,Porvider,本质上还是Porvider

图片.png

使用$filter

图片.png

另外内置Service介绍

图片.png

相关文章