Angular JS 学习之Http
1.$http是AngularJS中的一个核心服务,用于读取远程服务器的数据;
2.读取JSON文件:
**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"}
]
}
**$http.get(url)是用于读取服务器数据的函数;
<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>
**以上代码的get请求是本站的服务器;
**AngularJS应用通过ng-app定义,应用于<div>中执行;
**ng-controller指令设置了controller对象名;
**函数customerController是一个标准的javaScript对象构造器;
**控制器对象有一个属性:$scope.names;
**$http.get()从web服务器上读取静态JSON数据;
**服务器文件为:http://www.runoob.com/try/angularjs/data/sites.php;
**当服务端载入JSON数据时,$scope.names变为一个数组;
Angular JS 学习之Http的更多相关文章
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- angular.js学习的第一天
第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS学习之表达式
1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bi ...
- Angular JS 学习之简介
1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
随机推荐
- codeforces 567D.One-Dimensional Battle Ships 解题报告
题目链接:http://codeforces.com/problemset/problem/567/D 题目意思:给出 1 * n 的 field,编号从左至右依次为 1,2,...,n.问射 m 枪 ...
- Android 开发技巧 - Android 6.0 以上权限大坑和权限检查基类封装
简单介绍 关于运行时权限的说法,早在Google发布android 6.0的时候,大家也听得蛮多的.从用户的角度来讲,用户是受益方,更好的保护用户的意思,而对于开发者来说,无疑增加了工作量. 对于6. ...
- 【leetcode】 Unique Path ||(easy)
Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...
- 用SSH登录局域网中使用网络设置为NAT的虚拟机中的linux
环境描述: A客户机,安装有putty软件使用SSH方式登录B主机中的虚拟机中的linux:A机的网络地址:192.168.1.2 B主机为Windows7平台,B主机的网络地址为:192.168.1 ...
- 【Python升级录】--基础知识
创建角色成功! 正在载入python........ [python介绍] python是一门动态解释性的强类型定义语言. python的创始人为吉多·范罗苏姆(Guido van Rossum).1 ...
- ajax鼠标滚动请求 或 手机往下拉请求
Zepto(function($){ var url = $('.page-url').val(); var cur = false; var href_url = $('.page-url').at ...
- objective-c可变字典
1 #pragma mark *****************************字典******************************** 2 // 字典:通过ke ...
- September 6th 2016 Week 37th Tuesday
I only wish to face the sea, with spring flowers blossoming. 我只愿面朝大海,春暖花开. That scenery is beautiful ...
- 再来一发!DB2 应用程序如何从数据库取数据 Fetch
The FETCH statement positions a cursor on the next row of its result table and assigns the values of ...
- gitlab 建仓的流程
repository:仓库 Git global setup: git config --global user.name "Administrator" git config - ...