angular服务

###$http
***


- 实现客户端与服务器端异步请求

get方式

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

   {{data}}

 </div>  

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

<script src="jquery-3.1.1.min.js"></script>

<script>

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

app.controller('myCtr', ["$scope","$http", function($scope,$http){

  $http({                                  //$http配置快

    method:'get',

    url:'1.php',

    cache:true                             //设置为true后，会将异步请求数据保存到缓存中，下次请求便不会请求服务器了，从缓存中取数据即可，减少服务器压力

  }).then(function(response){              //then方法共有两个参数，第一个返回成功信息，第二个返回失败信息（与服务器异步请求有成功、失败两种情况）

      $scope.data = response.data;         //将返回信息的data字段作为数据绑定

  },

  function(response){                      //第二个返回失败信息

  })

}]);

</script>

</body>

</html>

1.php

<?php

$data = ["name"=>"刘德华", "title"=>"长城"];

echo  json_encode($data,JSON_UNESCAPED_UNICODE);

?>

post方式

  • 去Network下的XHR下查看结果
  • 方式一

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

   {{data}}

 </div>  

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

<script src="jquery-3.1.1.min.js"></script>

<script>

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

app.controller('myCtr', ["$scope","$http", function($scope,$http){

  $http({

    method:"post",

    url:"1.php",

    data: $.param({id:'007',name:'奔波霸'}),

    headers:{"Content-type":"application/x-www-form-urlencoded"}

  }).then(function(reponse){

  },

  function(response){

  });

}]);

</script>

</body>

</html>

1.php

<?php

print_r($_POST);

?>
  • 方式二

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

   {{data}}

 </div>  

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

<script src="jquery-3.1.1.min.js"></script>

<script>

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

app.controller('myCtr', ["$scope","$http", function($scope,$http){

  $http({

    method:"post",

    url:"1.php",

    data: {id:'007',name:'奔波霸'}

  }).then(function(reponse){

  },

  function(response){

  });

}]);

</script>

</body>

</html>

1.php

<?php

$content = file_get_contents('php://input');

print_r(json_decode($content, true));

?>

get请求简写

$http.get("1.php",{cache:true}).then(function(response){

  },

  function(response){

  });

自定义服务（factory）

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

   {{data}}

 </div>  

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

<script src="jquery-3.1.1.min.js"></script>

<script>

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

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

   return {

    vedioS: function(){

      return $http({url:'1.php'});

    }

   }

}]);

app.controller('myCtr', ["$scope","vedioServer", function($scope,vedioServer){

      vedioServer.vedioS().then(function(response){

           $scope.data = response.data;

      })

}]);

</script>

</body>

</html>

1.php

<?php

$data = ["name"=>"刘德华", "title"=>"长城"];

echo  json_encode($data,JSON_UNESCAPED_UNICODE);

?>

自定义服务（service）

test.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

</head>

<body ng-app="myApp">

 <div ng-controller="myCtr">

   {{data}}

 </div>  

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

<script src="jquery-3.1.1.min.js"></script>

<script>

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

app.service("vedioServer",["$http", function($http){

  this.vedioS = function(response){

    return $http({url:'1.php'}).then(function(response){

      return response.data;

    });

  }

}])

app.controller('myCtr', ["$scope","vedioServer", function($scope,vedioServer){

      vedioServer.vedioS().then(function(data){

           $scope.data = data;

      })

}]);

</script>

</body>

</html>

1.php

<?php

$data = ["name"=>"刘德华", "title"=>"长城"];

echo  json_encode($data,JSON_UNESCAPED_UNICODE);

?>

angular服务二的更多相关文章

  1. angular服务一

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

  2. Springboot & Mybatis 构建restful 服务二

    Springboot & Mybatis 构建restful 服务二 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务一 2 restful ...

  3. 5、SAMBA服务二：配置实例

    ①:SAMBA服务一:参数详解 ②:SAMBA服务二:配置实例 5.2.3.Samba共享目录配置实例 1.允许匿名用户读取/it共享目录,修改/etc/samba/smb.conf,在最后添加以下内 ...

  4. angular 服务 service factory provider constant value

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

  5. openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 二

    openstack-r版(rocky)搭建基于centos7.4 的openstack swift对象存储服务 一 openstack-r版(rocky)搭建基于centos7.4 的openstac ...

  6. .NET Core微服务二：Ocelot API网关

    .NET Core微服务一:Consul服务中心 .NET Core微服务二:Ocelot API网关 .NET Core微服务三:polly熔断与降级 本文的项目代码,在文章结尾处可以下载. 本文使 ...

  7. 腾讯云OCR服务二次开发

    本文记录了对腾讯云OCR服务二次开发的代码和开发过程中遇到的问题.

  8. 理解 Angular 服务

    理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在 ...

  9. angularJS 服务二

    $http服务 一 介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏 ...

随机推荐

  1. SpringMVC + Spring + MyBatis 整合 + Spring shrio + easyUI + 权限管理框架,带shrio session和shrio cache集群实现方案

    工作之余先来写了一个不算规范的简单架子 基于spring mvc + spring + mybatis + Spring shrio 基于redis的集群方案 系统权限部分,分成多个机构,其中每个机构 ...

  2. swift-字符和字符串

    OC定义字符: char charValue = 'a'; swift定义字符: var charValue : Character = "a" Unicode 国际标准的文本编码 ...

  3. SegmentControl 那些令人烦恼的事儿

    每个人的曾经都很苦逼.我知道我很卑微,但我不曾放慢脚步,在这条路上至死不悔.愿与你同行. UISegmentControl 概述 UISegmentControl 是系统的段选择控件,具有简洁大方的外 ...

  4. vs2013 git 使用总结

    一.参与别人已经建好的项目 方法1.打开VS2013,切换到“团队资源管理器”,点上方“主页”右侧的下拉三角,选择项目->连接到团队项目,然后选择“克隆”,填入Git的Remote Url和要克 ...

  5. redis数据结构存储Dict设计细节（redis的设计与实现笔记）

    说到redis的Dict(字典),虽说算法上跟市面上一般的Dict实现没有什么区别,但是redis的Dict有2个特殊的地方那就是它的rehash(重新散列)和它的字典节点单向链表. 以下是dict用 ...

  6. java.lang.UnsatisfiedLinkError: %1 不是有效的 Win32 应用程序。

    JNA 调用 dll 库时,保错: ///////////////// 通过 JNA 引入 DLL 库 //////////// /** * ID_FprCap.dll 负责指纹的采集, 指纹仪的初始 ...

  7. Mac上安装MySQL记录

    下载最新的MySQL社区版 官方下载地址:http://dev.mysql.com/downloads/mysql/ 为了安装更方便,建议下载dmg安装包. 最新的版本是5.7.9. 安装MySQL ...

  8. 在双系统（Windows与Ubuntu）下删除Ubuntu启动项

    问题概述:因为在自己学习Linux的时候,按照网上的教程错误的删除了Ubuntu的一个内核驱动,导致Ubuntu不能启动.我想到的办法是重新安装系统,重装系统的第一步便是将Ubuntu从电脑中卸载.该 ...

  9. [Unity3D]巧妙利用父级子级实现Camera场景平面漫游

    本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...

  10. 前端之ajax

    前端之ajax 本节内容 ajax介绍 原生js实现ajax jquery实现ajax json 跨域请求 1. ajax介绍 AJAX(Asynchronous Javascript And XML ...