转自：https://www.cnblogs.com/best/tag/Angular/

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

使用格式：

// 简单的 GET 请求，可以改为 POST

$http({

    method: 'GET',

    url: '/someUrl'

}).then(function successCallback(response) {

        // 请求成功执行代码

    }, function errorCallback(response) {

        // 请求失败执行代码

});

简写方法

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

此外还有以下简写方法：

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

更详细内容可参见：

读取 JSON 文件

以下是存储在web服务器上的 JSON 文件：

 {

     "sites": [

         {

             "Name": "菜鸟教程",

             "Url": "www.runoob.com",

             "Country": "CN"

         },

         {

             "Name": "Google",

             "Url": "www.google.com",

             "Country": "USA"

         },

         {

             "Name": "Facebook",

             "Url": "www.facebook.com",

             "Country": "USA"

         },

         {

             "Name": "微博",

             "Url": "www.weibo.com",

             "Country": "CN"

         }

     ]

 }

2.

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

 </head>

 <body>

 <div ng-app="myApp" ng-controller="siteCtrl"> 

 <ul>

   <li ng-repeat="x in names">

     {{ x.Name + ', ' + x.Country }}

   </li>

 </ul>

 </div>

 <script>

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

 app.controller('siteCtrl', function($scope, $http) {

     $http({

         method: 'GET',

         url: 'http://www.runoob.com/try/angularjs/data/sites.php'

     }).then(function successCallback(response) {

             $scope.names = response.data.sites;

         }, function errorCallback(response) {

             // 请求失败执行代码

     });

 });

 </script>

 </body>

 </html>

3.

简写方法实例

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>

 </head>

 <body>

 <div ng-app="myApp" ng-controller="siteCtrl"> 

 <ul>

   <li ng-repeat="x in names">

     {{ x.Name + ', ' + x.Country }}

   </li>

 </ul>

 </div>

 <script>

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

 app.controller('siteCtrl', function($scope, $http) {

   $http.get("http://www.runoob.com/try/angularjs/data/sites.php")

   .then(function (response) {$scope.names = response.data.sites;});

 });

 </script>

 </body>

 </html>

4.

AngularJS1.5 以下版本 - 实例

 
 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 </head>

 <body>

 <div ng-app="myApp" ng-controller="siteCtrl"> 

 <ul>

   <li ng-repeat="x in names">

     {{ x.Name + ', ' + x.Country }}

   </li>

 </ul>

 </div>

 <script>

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

 app.controller('siteCtrl', function($scope, $http) {

   $http.get("http://www.runoob.com/try/angularjs/data/sites.php")

   .success(function (response) {$scope.names = response.sites;});

 });

 </script>

 </body>

 </html>

43.$http的更多相关文章

  1. redhat6下安装Lighttpd1.4.43

    学完了C语言,自信满满地冲着开源软件去了,首选了Lighttpd,这个软件代码量不多,适合初入开源的朋友 redhat下安装Lighttpd,一定要先安装依赖库,pcre和bzip2,这两个自行下载, ...

  2. IOS开发基础知识--碎片43

    1:增加手势进行左划效果,针对视图并修改其中一个的坐标,菜单用隐藏跟显示 @property(strong,nonatomic)UISwipeGestureRecognizer *recognizer ...

  3. L440 无线网卡：由于该设备有问题，Windows 已将其停止(代码 43)

    最近重装了系统,本来用的好好的,结果重启之后突然无线网卡不能用了,设备管理器老是黄色叹号!无线网卡设备状态:由于该设备有问题,Windows 已将其停止. (代码 43).      无线网卡型号:2 ...

  4. AC日记——质因数分解 1.5 43

    43:质因数分解 总时间限制:  1000ms 内存限制:  65536kB 描述 已知正整数 n 是两个不同的质数的乘积,试求出较大的那个质数. 输入 输入只有一行,包含一个正整数 n. 对于60% ...

  5. BestCoder Round #43

    T1:pog loves szh I(hdu 5264) 题目大意: 给出把AB两个字符串交叉拼起来的结果,求出原串. 题解: 不解释..直接每次+2输出. T2:pog loves szh II(h ...

  6. rtabmap_ros安装---43

    摘要: 原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 一.前言 RTAB-Map (Real-Time Appearance-Based Mappin ...

  7. c++ primer 5th 练习3.43

    #include <iostream> using namespace std; int main() { ][]={,,,,,,,,,,,}; /* for(int (&i)[4 ...

  8. Sqli-labs less 43

    Less-43 本关与42关的原理基本一致,我们还是定位在login.php中的password.看一下sql语句为: $sql = "SELECT * FROM users WHERE u ...

  9. 出现错误：Unable to load configuration. - action - file:/E:/Java/Tomcat7.0/apache-tomcat-7.0.68-windows-x64/apache-tomcat-7.0.68/webapps/SSH2Integrate/WEB-INF/classes/struts.xml:8:43

    严重: Exception starting filter struts2 Unable to load configuration. - action - file:/E:/Java/Tomcat7 ...

  10. [每日一题] 11gOCP 1z0-053 :2013-10-11 Flashback Data Archive属性.........................43

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12656897 正确答案:BD 闪回数据归档请参考:http://blog.csdn.net ...

随机推荐

  1. 洛谷 P1894 [USACO4.2]完美的牛栏The Perfect Stall

    P1894 [USACO4.2]完美的牛栏The Perfect Stall 题目描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星 ...

  2. 12：打印 1 到最大的 n 位数

    题目:输入数字 n.按顺序打印出从 1 到 最大的 n 位十进制数.比方输入 3 ,则打印出 1.2 .3 一直到最大的3位数即 999. 解析: easy知道不能用 int 等数字类型表示(大数问题 ...

  3. 练几道，继续过Hard题目

    http://www.cnblogs.com/charlesblc/p/6384132.html 继续过Hard模式的题目吧.   # Title Editorial Acceptance Diffi ...

  4. Eclipse 更新Android SDK后，新建项目出现appcompat_v7project的相关问题

    Eclipse 更新Android SDK后,新建项目出现各种问题.网上各种解决方式,搞了好久,总结一下. 1.出现error: Error retrieving parent for item: N ...

  5. 朝花夕拾——finally/final/finalize拨云雾见青天

    Java编程中.常常会使用到异常处理,而finally看似的是try/catch后对逻辑处理的完好,事实上里面却存在非常多隐晦的陷阱.final常见于变量修饰,那么你在内部类中也见过吧.finaliz ...

  6. vuex3

    以下是一个表示“单向数据流”理念的极简示意: 但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏: 多个视图依赖于同一状态. 来自不同视图的行为需要变更同一状态. 这就是 Vue ...

  7. 仿写从iOS8开始支持的UIAlertController：BGAAlertController-Android

    工作以来公司UI设计师出的Android效果图都是iOS风格的UIAlertView和UIActionSheet,新项目还是用原来那一套,不想重复造轮子,所以仿写了从iOS8开始支持的UIAlertC ...

  8. （四）Hystrix容错保护

    Feign默认是整合了Ribbon和Hystrix这两个框架,所以代码我们在上一篇的基础上进行修改,启动Eureka,service-hello,Feign 所谓的熔断机制和日常生活中见到电路保险丝是 ...

  9. hihocoder 1407 重复旋律2

    思路: 二分一哈答案 height分个块 //By SiriusRen #include <cstdio> #include <cstring> #include <al ...

  10. WPF 样式

    样式是属性值的集合,能被应用到一个元素,类似CSS,每个控件最多只能有一个样式,通过控件的Stype属性应用样式,如下代码,其中BigFontButtonStyle是用于检索资源的关键字,也可以通过代 ...