1、myService.html：

<!DOCTYPE HTML>
<html ng-app="app">
<head>
    <title>自定义服务与后台数据交互</title>
    <meta charset="utf-8">    
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/angular.js"></script>
    <style>
    .tip{background: #f2f2f2;border-radius: 6px;box-shadow: 2px 2px 4px #777;width: 200px;height: auto;position: relative;top:-10px;padding: 10px;}
    </style>
</head>
<body>
    <div ng-controller="myServiceCtrl" ng-click="hideTip()">
        <label>用户名</label>
        <input type="text" ng-model="username" placeholder="请输入用户名..."/>
        <div ng-show="showld" ng-class='{tip: showld}'>
            <p ng-repeat="user in users">{{user.name}}</p>
        </div>
    </div>
<script src="myService.js"></script>
</body>
</html>

2、myService.js：

var myModule = angular.module("app",[]);
myModule.service('userListService', ['$http', function($http){
    var doRequest = function(username,path){
        return $http({//底层其实还是$http的交互
            method:'GET',
            url:'data.json'
        });
    }
    return{//一层一层的封装
        userList:function(username){
            return doRequest(username,'userList');
        }
    }
}]);
//上面封装的服务其实就是众多controller中与后台文件交互，得到数据的共同代码，提取出来单独封装在公共服务模块里，供后面的控制器直接调用而已
myModule.controller('myServiceCtrl', ['$scope','$timeout','userListService', //注入除作用域外的定时器对象和自定义的服务,注意：angular系统自带的都是带$符的，自定义的是不带$符的
    function($scope,$timeout,userListService){
        var timeout;//定义延迟变量
        $scope.showld = false;
        $scope.watch('username',function(newUserName){//监察username,一旦username发生变化,就执行后面的function()函数
            if (newUserName) {//如果拿到新用户名，就用自定义服务中的方法进行处理
                if (timeout) {//一旦timeout里面有定时器id
                    $timeout.cancel(timeout);//就清除已经生成过的定时器,cancel()相当于clearTimeOut()方法
                }
                timeout = $timeout(function(){
                    userListService.userList(newUserName)
                    .success(function(data,status){
                        $scope.users = data;
                        $scope.showld = true;
                    });
                },350);
            };
        });
        $scope.hideTip = function(){//点击就隐藏提示框，注意不要放在控制器之外了，否则无效
            $scope.showld = false;
        }
    }
]);

--@angularJS--自定义服务与后台数据交互小实例的更多相关文章

  1. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. --@angularJS--$http服务与后台数据交互

    1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  3. 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网（IOT）对接服务，实现数据交互。发布：v4.2.4 版本

    v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载   6. 增加与阿里云物联网(IOT)对接服务,实现数据交互  6.1    概述 为了满足业务系统数据上云的要求,Se ...

  4. AntDesign(React)学习-10 Dva 与后台数据交互

    明天正式在线办公没时间学习了,今天晚上再更新一篇, 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSr ...

  5. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  6. 深究AngularJS——自定义服务详解(factory、service、provider)

    前言 3种创建自定义服务的方式.  Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分 ...

  7. js前台与后台数据交互-前台调后台

    转自:http://blog.csdn.net/wang379275614/article/details/17033981   网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...

  8. 使用Jquery.AJAX方法和PHP后台数据交互小结

    使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...

  9. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

随机推荐

  1. iOS的基本图形绘制

    绘图的步骤: 1.获取上下文 2.创建路径(描述路径) 3.把路径添加到上下文 4.渲染上下文 通常在- (void)drawRect:(CGRect)rect这个方法里面绘制图形 为什么要再draw ...

  2. 基于POI的Excel导入导出（JAVA实现）

    今天做了个excel的导入导出功能,在这记录下. 首先现在相关poi的相关jar包,资源链接:http://download.csdn.net/detail/opening_world/9663247 ...

  3. css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

  4. unbtun python tab补全

    在使用python的时候有时候总是忘记很多代码,这个是作为程序袁最头疼的事情,本人也是刚刚接触python,这几天也是用到这块,所以记录下来,已被需要时能够找到. 我的系统是:  w@w:~$ una ...

  5. javascript 中this的使用场景全

    1. global this 2.function this 3.prototype this 4. object this 5.DOM this 6 HTML this 7 override thi ...

  6. 密钥public/private key登陆linux

    Public Key认证是什么这是一种认证方法,类似于常见的用户名密码认证方法.不同的是需要在客户端机器上保留一个很长很长的加密key,而在服务器端需要做出相应的配置.当客户端想要访问服务器时,服务器 ...

  7. hibernate--一对多 多对一 双向关联 (重点!!!)

    一方 group: package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax. ...

  8. iOS开发——应用图标上显示消息数量

    iOS8以前: UIApplication *app = [UIApplication sharedApplication]; app.applicationIconBadgeNumber = num ...

  9. STL中的所有算法(70个)

    STL中的所有算法(70个)----9种类型(略有修改by crazyhacking) 参考自: http://www.cppblog.com/mzty/archive/2007/03/14/1981 ...

  10. iOS开发——An App ID with identifier "*****" is not avaliable

    Error: An App ID with identifier "*****" is not avaliable. Please enter a different string ...