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

读取JSON文件

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

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

{

    "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"

        }

    ]

}

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

<!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>

解析:

注意：以上代码的 get 请求是本站的服务器，你不能直接拷贝到你本地运行，会存在跨域问题，解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上，附：PHP Ajax 跨域问题最佳解决方案（http://www.runoob.com/w3cnote/php-ajax-cross-border.html）。

AngularJS 应用通过 ng-app 定义。应用在 <div> 中执行。

ng-controller 指令设置了 controller 对象 名。

函数 customersController 是一个标准的 JavaScript 对象构造器。

控制器对象有一个属性: $scope.names。

$http.get() 从web服务器上读取静态 JSON 数据。

服务器数据文件为：  http://www.runoob.com/try/angularjs/data/sites.php。

当从服务端载入 JSON 数据时，$scope.names 变为一个数组。

AngularJS XMLHttpRequest $http服务的更多相关文章

  1. AngularJs之六（服务）

    服务:AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用.AngularJS 内建了30 多个服务. 最常用的服务:$location  服务,  $http 服务 ...

  2. 让AngularJS的$http 服务像jQuery.ajax()一样工作

    让AngularJS的$http 服务像jQuery.ajax()一样工作 $http的post . 请求默认的content-Type=application/json . 提交的是json对象的字 ...

  3. Ⅳ.AngularJS的点点滴滴-- 服务

    服务(Angularjs很多方法都是服务组成的) 1.使用service方法创建的单例服务 <html> <script src="http://ajax.googleap ...

  4. 怎么理解angularjs中的服务？

    AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...

  5. AngularJS之使用服务封装

    AngularJS之使用服务封装可复用代码   创建服务组件 在AngularJS中创建一个服务组件很简单,只需要定义一个具有$get方法的构造函数, 然后使用模块的provider方法进行登记: / ...

  6. AngularJS 的异步服务测试与Mocking

    测试 AngularJS 的异步服务 最近,在做项目时掉进了 AngularJS 异步调用 $q 测试的坑中,直接躺枪了.折腾了许久日子,终于想通了其中的道道,但并不确定是最佳的解决方案,最后还是决定 ...

  7. AngularJS内建服务以及自定义服务的用法

    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...

  8. 【angularJS】Service服务

    AngularJS 中的服务是一个函数或对象.可以创建自己的服务,或使用内建服务. 内置服务 AngularJS 内建了30 多个服务. 1.  $location 服务,它可以返回当前页面的 URL ...

  9. angularJS(三)：服务(Service)、http

    一.服务 服务是一个函数或对象,可在你的 AngularJS 应用中使用. 可以创建自己的服务,或使用内建服务 $location 注意 $location 服务是作为一个参数传递到 controll ...

  10. angularjs provider 供应商服务

    今天学习了angularjs的provider的供应商服务,写了个例子(自定义供应商服务,也可使用angularjs内部提供的服务) var starterApp = angular.module(' ...

随机推荐

  1. Button圆角处理

    <?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="ht ...

  2. 常用js正则归类

    //定义正则表达式 //title,只能是数字字母汉字开头,不能以下划线结尾,不包含特殊字符3-20 var title = /^(?!_)(?!.*?_$)[)(\sa-zA-Z0-9_\u4e00 ...

  3. peewee 字段属性help_text的支持问题

    至少在__version__ = '2.6.0'的时候,给字段添加help_text的时候,在数据库的ddl语句里面是没有comment的. 看了下源码,顺藤摸瓜,最终定位到了字段(Field类)的_ ...

  4. sublime 支持php语法错误提示的插件

    求一个好用的sublime 支持php语法错误提示的插件.我装过sublimelinter,但是有时候出现错误也不会提示. 可以试试http://cs.sensiolabs.org/ 这个看哦它有对应 ...

  5. PhpExcel笔记,phpExcel中文帮助手册

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  6. [转载] C++ 突破私有成员访问限制

    最后一个方式 模板尚未弄清楚. 我们在写代码的时候,按约定都是把成员数据放到private访问区中,然后在通过相应的函数来存取.那又有什么样的代码可以突破访问权限来直接操作类中private区段中的成 ...

  7. struts2框架 初始别

    struts2 是webwork和struts合并而来. 1.下载struts2 说明: Full Distribution: 为完整版下载,建议下载它 Example Applications:st ...

  8. 基于 REST 的 Web 服务：基础

    代表性状态传输(Representational State Transfer,REST)在 Web 领域已经得到了广泛的接受,是基于 SOAP 和 Web 服务描述语言(Web Services D ...

  9. ios 音乐播放，音乐信息显示方法

    下面的博客写的很清楚了 http://msching.github.io/blog/page/2/ 主要涉及AVAudioPlayer和下面这几个函数 MPNowPlayingInfoCenter.d ...

  10. Linux（CentOS、Ububtu）一键安装Openstack及其它参考文档汇总

    原文链接  http://www.aboutyun.com/thread-10920-1-1.html openstack相关资料 CentOS下一键安装Openstack  http://blog. ...