$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. Attempt to present <vc> on <vc> which is already presenting <vc>/(null)

    在给 tableViewCell 添加长按手势弹出一个 popViewController 的时候,遇到的这个变态问题: Warning: Attempt to present <UINavig ...

  2. jquery版时钟（css3实现）

    做时钟的主要原因是因为喜欢,觉得它好看(本人对特效有点爱不释手……).做的时候感觉工程量会有点大,做着做着发现实现起来其实并不难,只要理清思绪,其实还蛮简单的(我制作东西喜欢整体方向制定好,然后边做边 ...

  3. Qt5 程序启动画面图片效果

    2333每次打开photoshop开启画面是在酷炫,其实也不难啦. 新建项目名称SplashScreen,基类默认,取消创建界面复选框,完成. 代码如下,图片资源文件自己添加(已上传还未实现动态效果学 ...

  4. linux下的/dev/shm目录

    linux下的/dev/shm目录 linux中/dev目录下一般都是一些设备文件,例如磁盘.内存.摄像头等. /dev/shm这个目录是linux下一个利用内存虚拟出来的一个目录,这个目录中的文件都 ...

  5. CH Round #55 - Streaming #6 (NOIP模拟赛day2)解题报告

    T1九九归一 描述 萌蛋在练习模n意义下的乘法时发现,总有一些数,在自乘若干次以后,会变成1.例如n=7,那么5×5 mod 7=4,4×5 mod 7=6,6×5 mod 7=2,2×5 mod 7 ...

  6. Python自动化之sqlalchemy复合外键

    复合外键用法 metadata = MetaData(engine) classedu = Table('classedu', metadata, # Column('qq', BigInteger, ...

  7. httpclient获取cookies

    Cookie[] cookies = httpClient.getState().getCookies(); System.out.println("==========Cookies=== ...

  8. WIN7 IIS7 安装方法

    一.首先是安装IIS.打开控制面板,找到"程序与功能",点进去. 二.点击左侧"打开或关闭Windows功能". 三 看下图打相应的钩.

  9. 基于用户相似性的协同过滤——Python实现

    代码基本来自项亮的<推荐系统实践>,把书上的伪代码具体实现,还参考了https://www.douban.com/note/336280497/ 还可以加入对用户相似性的归一化操作,效果会 ...

  10. PHP网页缓存技术

    http://blog.sina.com.cn/s/blog_646e51c40100weu9.html 前台静态化:把动态页面解析后保存为静态页面 文件缓存:把查询结果保存为文件,XML 内存缓存: ...