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>Ang ...

  2. 实现小程序与SSM后台数据交互

    实现小程序与SSM后台数据交互 项目源码 文章目录 实现小程序与SSM后台数据交互 项目源码 1.controller 2.小程序js 实现效果 1.controller @RequestMappin ...

  3. 微信小程序数据库交互 php,微信小程序wx.request实现后台数据交互功能分析

    本文主要介绍微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下 记录微信小程序wx.reques ...

  4. ajax与后台php,怎么在thinkPHP5中使用ajax实现与后台数据交互

    怎么在thinkPHP5中使用ajax实现与后台数据交互 发布时间:2021-03-20 17:20:01 来源:亿速云 阅读:87 作者:Leah 这篇文章给大家介绍怎么在thinkPHP5中使用a ...

  5. servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...

    背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...

  6. ajax数据交互代码,Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jque ...

  7. 小程序后台数据交互-个人中心

    目录 一,获取用户昵称和头像 登录过程 二,登录-小程序 三,后台 小程序服器配置 一,获取用户昵称和头像 登录过程 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识, ...

  8. web服务器与网站后台程序如何交互,Dragonboard 410c搭载web服务器之后端数据交互...

    相关推荐 php的正式环境部署非常简单,改几个文件就OK,用FastCgi方式也是分分钟的事情.相比起来,Py... 发表于 2018-02-09 09:26 • 756次阅读 在python世界,拥 ...

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

      网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台).即: 下面就讲前台与后台进行数据交互的方法,分前台调用后台方 ...

最新文章

  1. flask执行python程序_Flask app后如何执行代码(应用程序运行)开始
  2. open3d python 学习笔记
  3. 荣耀30s鸿蒙5g,荣耀赵明：荣耀30S将掀起5G手机购买狂潮
  4. Silverlight和WCF交互式的实战项目（更新完毕）
  5. 【完整代码】使用Semaphore实现线程的交替执行打印 A1B2C3D4E5
  6. 【SpringBoot】SpringBoot整合SpringDataJPA及基本使用
  7. 分贝（BD）的含义以及关系(有助于深刻理解)
  8. [HDOJ]1005. Number Sequence
  9. Linux下的“句柄”（文件句柄，窗口句柄）
  10. 信号与槽QVariant传递结构体指针
  11. redis内核单元测试框架
  12. 一封信：同学聚会后的追忆
  13. python 视频转图片和图片转视频
  14. 微服务 订单交易支付系统架构演进
  15. CANoe软件打不开了怎么办？
  16. 手撸一个外卖点餐系统后台，可以写上简历的实战项目！
  17. ios点击推送闪退_关于苹果手机QQ闪退的问题
  18. 论文阅读|《面向多目标柔性作业车间调度的强化学习NSGA-Ⅱ算法》
  19. 微信自定义菜单使用特殊字符出现的问题
  20. 通过VM虚拟机安装linux系统（centos版本）

热门文章

  1. NCRE四级网络工程师考题详解----对等计算模型（P2P）
  2. FileOutputStreamTest
  3. 微信小程序js数组初始化_微信小程序 数组（增，删，改，查）等操作实例详解...
  4. php 区位码字符,php汉字如何转区位码
  5. mysql 主从_搭建mysql主从并编写监控主从状态脚本
  6. python3 image_python3 ImageTk 安装方法
  7. oracle包如何进入编辑,修改 Oracle 的process和Session
  8. java map取值_Java Set接口 Map 与枚举
  9. vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
  10. 基本数据类型的成员变量放在jvm的哪块内存区域里？