文档章节

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

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 68
博文 247
码字总数 95896
作品 7
深圳
程序员
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0
第214天:Angular 基础概念

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

半指温柔乐
2018/04/04
0
0
使用 AngularJS 的路由和模板实现单页应用 (Single Page)

概述 单页应用现在越来越受欢迎。模拟单页应用程序行为的网站都能提供手机/平板电脑应用程序的感觉。Angular可以帮助我们轻松创建此类应用 简单应用 我们打算创建一个简单的应用,涉及主页,...

oschina
2014/06/20
20.7K
1
Angular 5 快速入门与提高

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

笔阁
2017/11/03
0
11

没有更多内容

加载失败,请刷新页面

加载更多

安卓constraintLayout中app:srcCompat设置的图片显示不出来

使用 app:srcCompat 的时候 引入的图片显示不出来的解决方案 首先查看的你的Activity 继承的是那个Activity 如果是继承AppcompatActivity 使用 ImageView的 app:srcCompat 是没有问题的 如果...

雨焰
今天
1
0
MySQL mysqldump数据导出详解

MySQL mysqldump数据导出详解 2016-04-07 11:14 by pursuer.chen, 114348 阅读, 0 评论, 收藏, 编辑 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用...

linjin200
今天
3
0
Lucene 检索时的步骤

用户输入查询语句:lucene AND learned NOT hadoop 搜索主要分为以下几步 第一步、对查询语句进行词法分析,语法分析,及语言处理 词法分析主要用来识别单词和关键字 语法分析主要是根据查询...

kdy1994
今天
2
0
Gradle Implementation vs API configuration

注: 可以把 Implementation理解为java类的private, 使用Implementation则外部依赖本库的代码引用不到本库Implementation的代码, 也就是降低依赖树的层级, 这样就可以避免外部代码编译时候, 导...

SuShine
今天
2
0
pdf安卓手机适配以及ie的兼容 以及隐藏掉下载打印按钮的方式

这是我目前遇到pdf方面最多的问题。 在百度上搜了很多答案,结果都是建议使用插件。而目前百度能搜的插件基本上都是有缺陷的。自己测试了很多插件。最后使用了pdf.js这个插件。这个插件目前完...

流年那么伤
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部