AngularJS基本概念和用法-Service与Peovider 二-七

创建本身的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用来监督2个数据模型的变化,那里运用$watch来监听,

监听username她产生变化以往推行贰个匿名函数,那一个函数里面来检验是否得到新的newUserName1经获得新的值就向后台去发送请求,

那正是说调用何人去发请求呢?就调用本人包装的userListService

本条地方有一个比较绕的事物叫做'$timeout'

这个'$timeout'正是当大家在页面上进行输入的时候不是说大家每回按下减排他就去央浼后台,如若那样的话会意识页面会抖动,借使说每按下二个键他就去向后台发起呼吁,很扎眼页面会不断地狂刷,

本条时候加1个防护抖动的拍卖,那是相比较广泛的动作,唯有当您350皮秒不再按下二个按钮的时候,正是说延迟350阿秒未有按下,那个时候他才会去向后台发起呼吁。

当你总是开关的时候,并不会向后台一连发送请求,

提及底调用的函数是userListService.userList那个函数,

温馨定义的Service和AngularJS内置的Service有两点分化点,

1种是大家温馨定义的Service他的命名不要用$打头,

其次我们和好定义的Service也是能够向AngularJS内置的劳务壹样去开始展览注入的,可是注入的时候有贰个例外的地方,就是说大家协调定义的Service是必须放在最终一个的,

有了那一个Service其后,假如要做一样的操作就足以去直接去调用它,很多的controller控制器都足以去共用的,从而达成了那些效果的复用,

譬如说作者要把userListService挤出作为友好的劳务,这么些Servuce里面会去重返userList用户列表数据。

把它抽成三个劳动之后,别的的控制器就足以调用它,

品种中央控制制器会有不少,要是有控制器之间有代码相同,那么就足以抽到Servuce服务之中,方便调用。

图片.png

Service的特性

图片.png

别的内置Service介绍

图片.png

使用$filter

图片.png

Service,Factory,Porvider,本质上都以Porvider

图片.png

使用$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多少不再是像前面写列子1样写死在代码里面,希望由此后台去加载进来,

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其1服务,

method: 'GET', 数据交互格局GET或POST

url: 'data.json'要呼吁哪个地点。

success成功后进行函数

error请求错误执行函数

此地呼吁的是json文件

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

获得那些数量未来把她$scope.users上面去

$scope.users=data;

相关文章