文档章节

AngularJS http模块使用

兔之
 兔之
发布于 2015/11/26 15:16
字数 204
阅读 70
收藏 3

在前后端分离的单页面网页,经常需要前端 Ajax 去获取后台的数据装配成一个页面。在 AngularJS 中可以使用 http 模块来实现。

使用 http 模块

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>

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

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
  .success(function (response) {$scope.names = response.records;});
});
</script>

</body>
</html>

从后台获取的数据是这样的

{ "records":
    [ 
    {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},       
    {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, 
    {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},  
    ] 
}

ajax 获取数据成功后,records 会赋值给 names,最后传给 {{}} 显示。

注意,这里本地运行代码时无法获取到 php 的数据,存在跨域问题。

参考

http://www.runoob.com/angularjs/angularjs-http.html

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 66
博文 247
码字总数 95896
作品 7
深圳
程序员
第214天:Angular 基础概念

一、Angular 简介 1、 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多款产品 - 目前有一个全职的开发团队继续开...

半指温柔乐
04/04
0
0
Angular 5 快速入门与提高

一、概述 尽管被称为,实际上它只是这个诞生于2012年的前端框架的的第四个版本: 看起来差不多半年就发布一个新版本,不过实际上从重写的版本开始,开发接口与核心思想就稳定下来了,并基本保...

笔阁
2017/11/03
0
11
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
0
1
理解AngularJS ngRoute

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。 序 个人了解到AngularJS,是由于...

maweitao
2014/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
51分钟前
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
11
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部