、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 #;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>
、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;

                    });

                },);

            };

        });

        $scope.hideTip = function(){//点击就隐藏提示框，注意不要放在控制器之外了，否则无效

            $scope.showld = false;

        }

    }

]);

angluarJs与后台交互小案例的更多相关文章

  1. angluarJs与后台交互get

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  2. 微信小程序 与后台交互----获取服务器时间

    index.wxml代码 <!--index.wxml--> <view class="container"> <text>{{date}}&l ...

  3. 微信小程序 与后台交互----传递和回传时间

    wxml代码 <!--index.wxml--> <view class="container"> <view class="section ...

  4. 微信小程序实战,与后台交互

    index.wxml <view class="container"> <text>{{txt}}</text> <input name= ...

  5. 第七节：Vuejs路由交互及后台系统路由案例

    一. 简介 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源.那么url地址和真实的资源之间就有一种对应的关系 ...

  6. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  7. Extjs 4.2 Grid增删改及后台交互(Java)

    上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录.苦于抽不出时间,一直拖到现在.不得不说,Extjs确实很强大,新版的Neptun ...

  8. ajax简单后台交互

    ajax简单后台交互 1,扯淡 单身的生活,大部分时间享受自由,小部分时间忍受寂寞. 生活有时候,其实蛮苦涩,让人难以下咽.那些用岁月积累起来的苦闷,无处宣泄,在自己的脑海里蔓延成一片片荆棘,让你每每 ...

  9. 如何用CropBox实现头像裁剪并与java后台交互

    如何用CropBox实现头像裁剪并与java后台交互 参考网站:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 参考: http://blo ...

随机推荐

  1. 一个页面中内嵌页面 iframe元素

    iframe.html: <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...

  2. linux下方便的录屏命令

    linux下方便的录屏命令   ffmpeg -f x11grab -s 1024*768 -r 20 -i :0.0 -sameq ~/recode.mpg -r后是刷新屏率,   推出直接Ctrl ...

  3. win32多线程 (四) Mutex

    Mutex 用途和critical  section 非常类似,不过Mutex是内核对象,速度比section慢.Mutexes可以跨进程使用.另外Mutex在等待的时候可以设置等待时间. 以下是两种 ...

  4. CF547D Mike and Fish

    欧拉回路,巧妙的解法. 发现每一个点$(x, y)$实际上是把横坐标和$x$和纵坐标$y$连一条线,然后代进去跑欧拉回路,这样里一条边对应了一个点,我们只要按照欧拉回路间隔染色即可. 注意到原图可能并 ...

  5. 如何偷Android的内存－Tricking Android MemoryFile

    之前在做一个内存优化的时候,使用到了MemoryFile,由此发现了MemoryFile的一些特性以及一个非常trickly的使用方法,因此在这里记录一下 What is it MemoryFile是 ...

  6. Java Thread.join()详解--父线程等待子线程结束后再结束

    目录(?)[+] 阅读目录 一.使用方式. 二.为什么要用join()方法 三.join方法的作用 join 四.用实例来理解 打印结果: 打印结果: 五.从源码看join()方法   join是Th ...

  7. 一步之遥——第七届蓝桥杯C语言B组（国赛）第一题

    原创 一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里.矿车停在平直的废弃的轨道上.他的面前是两个按钮,分别写着“F”和“B”. 小明突然记起来,这两个按钮可以控制矿车在轨道上前进和后退.按 ...

  8. 关于AJAX与JSON的杂记

    一.当网页需要有多个XMLHttpRequest对象时,可以使用Callback 函数,callback 函数是一种以参数形式传递给另一个函数的函数. <html> <head> ...

  9. Delphi7中的Char和XE中的Char

    我用FillChar()函数时,发现两个版本中的Char不一样. 在delphi7中 procedure TForm2.Button1Click(Sender: TObject); var s: ar ...

  10. 建造者（Builder）模式 *

    一. 建造者(Builder)模式 建造者模式可以将一个产品的内部表象与产品的生成过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 二. Builder模式的结构: 建造者(Bu ...