<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Service</title>

 </head>

 <body ng-app="app" ng-controller="myCtrl">

 <input type="text" ng-model="cont" >

 <hr>

 <button ng-click="get()">Get</button>

 <ul ng-show="user">

     <li>{{user.id}}</li>

     <li>{{user.name}}</li>

     <li>{{user.age}}</li>

 </ul>

 <script src="bower_components/angular/angular.js"></script>

 <script>

     var app = angular.module("app",[]);

 //    app.controller("myCtrl",["$scope","$http",function ($scope,$http) {

 //        $scope.get=function () {

 //            $http({

 //                method:'GET',

 //                url:'data.json'

 //            }).then(function suc(response) {

 //                $scope.user=response.data;

 //                console.log(response);

 //            });

 //        }

 //    }])

 //    app.controller("myCtrl",["$scope","$timeout","$http",function ($scope,$timeout,$http) {

 //        var timer;

 //        $scope.$watch("cont",function (newCont) {

 //            if(newCont) {

 //                if(timer){

 //                    $timeout.cancel(timer);//延时500毫秒后请求数据，避免频繁的请求

 //                }

 //                timer = $timeout(function () {

 //                    $http({

 //                        method: 'GET',

 //                        url: 'data.json'

 //                    }).then(function suc(response) {

 //                        $scope.user = response.data;

 //                        console.log(response);

 //                    });

 //                },500);//延时500毫秒后请求数据，避免频繁的请求

 //

 //            }

 //        })

 //    }])

     //自定义服务

     app.factory("GetService",["$http",function ($http) {

         return {

             doget:function (url) {

                 return $http({

                     method: 'GET',

                     url: url

                 });

             }

         }

     }]);

     //自定义服务,放在最后一个参数中

     app.controller("myCtrl",["$scope","$timeout","$http","GetService",function ($scope,$timeout,$http,GetService) {

         var timer;

         $scope.$watch("cont",function (newCont) {

             if(newCont) {

                 if(timer){

                     $timeout.cancel(timer);//延时500毫秒后请求数据，避免频繁的请求

                 }

                 timer = $timeout(function () {

                     //使用自定义服务

                     GetService.doget('data.json').then(function suc(response) {

                         $scope.user = response.data;

                         console.log(response);

                     });

                 },500);//延时500毫秒后请求数据，避免频繁的请求

             }

         })

     }])

 </script>

 </body>

 </html>

Angular 服务的简单使用的更多相关文章

  1. AngularJS中$http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  2. AngularJS中的http服务的简单用法

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...

  3. angular服务二

    angular服务 $http 实现客户端与服务器端异步请求 get方式 test.html <!DOCTYPE html> <html lang="en"> ...

  4. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  5. 分布式系统的消息&服务模式简单总结

    分布式系统的消息&服务模式简单总结 在一个分布式系统中,有各种消息的处理,有各种服务模式,有同步异步,有高并发问题甚至应对高并发问题的Actor编程模型,本文尝试对这些问题做一个简单思考和总结 ...

  6. angular 服务 service factory provider constant value

    angular服务 服务是对公共代码的抽象,由于依赖注入的要求,服务都是单例的,这样我们才能到处注入它们,而不用去管理它们的生命周期. angular的服务有以下几种类型: 常量(Constant): ...

  7. springboot微服务的简单小结

    springboot微服务的简单小结 近来公司用springboot微服务,所以小结一下. 基础: 什么是SpingBoot微服务? 如何创建SpringBoot微服务? 如何管理和完善SpringB ...

  8. .net平台 基于 XMPP协议的即时消息服务端简单实现

    .net平台 基于 XMPP协议的即时消息服务端简单实现 昨天抽空学习了一下XMPP,在网上找了好久,中文的资料太少了所以做这个简单的例子,今天才完成.公司也正在准备开发基于XMPP协议的即时通讯工具 ...

  9. PHP Swoole-Demo TCP服务端简单实现

    tcp 服务端简单demo与client . <?php /** * author : rookiejin <mrjnamei@gmail.com> * createTime : 2 ...

随机推荐

  1. Chapter 3 Phenomenon——22

    He paused, and for a brief moment his stunning face was unexpectedly vulnerable. 他愣住了,然后一段时间他令人昏迷的脸变 ...

  2. Linux-(rcp,scp)

    rcp命令 1．命令格式: rcp [参数] [源文件] [目标文件] 2．命令功能: rcp命令用在远端复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前 ...

  3. AutowireCapableBeanFactory源码详解

    一.概述 对于想要拥有自动装配能力,并且想要把这种能力暴露给外部应用BeanFactory类需要实现此接口. 正常情况下不要使用此接口,应该更倾向于使用BeanFactory或者ListableBea ...

  4. 面试题----gcc的编译流程

    gcc编译流程 一.    编译与处理指令: gcc -E hello.c -o a.c 如果不使用-o指定输出的文件,会默认输出到终端.所以建议使用同时使用-o选项. 还要注意:编译时会保留#pra ...

  5. 防止 IE 自动跳兼容模式

    在HTML <head> 中增加如下: <meta http-equiv="x-ua-compatible" content="IE=edge" ...

  6. Nodejs编写复制文件及文件夹命令

    github地址 use npm i fuzhi -g 复制文件 fuzhi a.js b.js 复制文件夹 fuzhi dirA dirB Wiki 创建一个node命令的两个关键点 1.在pack ...

  7. SpringMvc+hibernate+easyui简单的权限管理系统

    用户登录:   主界面:   资源管理:   角色管理:   用户管理:   部门管理:   源码在群共享: 189811613  群满了,直接发链接吧链接:http://pan.baidu.com/ ...

  8. JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )（转载）

    想想面试的时候很多会问jvm这方面的问题虽然还是菜鸟不太能用到现在但是还是了解一下, 找资料的时候看见个大佬写的很好转载到这方便以后自己复习和给大佬做宣传 以下为大佬的博客原文: 这两天看了一下深入浅 ...

  9. 【Mysql】Mysql 各个版本区别

    一.Mysql 各个版本区别: 1.MySQL Community Server 社区版本,开源免费,但不提供官方技术支持.这也是我们通常用的MySQL的版本.根据不同的操作系统平台细分为多个版本 2 ...

  10. Java多线程高级主题

    任务定时调度 通过Timer和TimerTask,我们可以实现定时启动某个线程. java.util.Timer:类似闹钟的功能,本身实现的就是一个线程 java.util.TimerTask:一个抽 ...