AngularJs之七
今天接着说angularJs服务,但今天专注说一下http服务。
一:$http 是 AngularJS 应用中最常用也是最核心的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
<div ng-app="myapp" ng-controller="mycc">
<h1>{{mylike}}</h1>
</div>
<script>
var app=angular.module("myapp",[]);
app.controller("mycc",function($scope,$http){
$http.get("httpservice.html").then(function (response) {
$scope.mylike = response.data;
});
})
</script>
httpservice.html内容只有下面几个字,或者是json数据格式:
最喜欢的还是刀削面
二:AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(“url”)方法获取服务器端数据文件,下面是Json数据文件循环输出的实例。
<div ng-app="myapp" ng-controller="mycc">
<h1>{{ctitle}}</h1>
<ul>
<li ng-repeat="x in names">姓名:{{x.uname}},性别:{{x.usex}}</li>
</ul>
</div>
<script>
var app=angular.module("myapp",[]);
app.controller("mycc",function($scope,$http){
$http.get(“student_json.php").success(function(response){
$scope.names=response.info;
$scope.ctitle=response.ctitle;
})
})
</script>
以上是html文件代码
{"ctitle":"人员名单","info":[
{"uname":"如花姑娘","usex":"女"}
,{"uname":"马金莲","usex":"女"}
,{"uname":"西门大官人","usex":"男"}
,{"uname":"叶良辰","usex":"未知"}
,{"uname":"李宝裤","usex":"男"}
,{"uname":"蓝瘦","usex":"女"}
,{"uname":"香菇","usex":"女"}
]}
以上是php文件代码
三:提交数据。
<div ng-app="uapp" ng-controller="uctrl">
用户名:<input type="text" ng-model="sdata.uname"><br>
密码:<input type="text" ng-model="sdata.upwd"><br>
<input type="button" ng-click="mypost()" value="提交数据">
</div>
<script language="javascript">
var app=angular.module("uapp",[]);
//下面是创建jsonToStr服务,可以将json对象转换为json字符串,否则后台将接收不到数据
app.service("jsonToStr",function(){
this.transform = function(jsonData){
var string = '';
for(str in jsonData){
string = string + str +'=' + jsonData[str] +'&';
}
var _last = string.lastIndexOf('&');
string = string.substring(0,_last);
return string;
}
})
</script>
app.controller("uctrl",function($scope,$http,jsonToStr){
$scope.sdata={"uname":"huangxc","upwd":"aabbcc"};
//单击事件方法如下
$scope.mypost=function(){
//http语法: $http({}).success(function(ret){}).error(function(){})
$http({
url:"http://127.0.0.2/angularjs/data.php"
,method: 'POST'
,data:jsonToStr.transform($scope.sdata)
, headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
}).success(function(ret){
alert(ret)
}).error(function(){}) }
})
AngularJs之七的更多相关文章
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- AngularJs之九(ending......)
今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...
- AngularJS过滤器filter-保留小数,小数点-$filter
AngularJS 保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- 模拟AngularJS之依赖注入
一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- 玩转spring boot——结合jQuery和AngularJs
在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...
- 免费开源的.NET多类型文件解压缩组件SharpZipLib(.NET组件介绍之七)
前面介绍了六种.NET组件,其中有一种组件是写文件的压缩和解压,现在介绍另一种文件的解压缩组件SharpZipLib.在这个组件介绍系列中,只为简单的介绍组件的背景和简单的应用,读者在阅读时可以结合官 ...
随机推荐
- 页面嵌入dom与被嵌入iframe的攻防
1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...
- 复杂的 Hash 函数组合有意义吗?
很久以前看到一篇文章,讲某个大网站储存用户口令时,会经过十分复杂的处理.怎么个复杂记不得了,大概就是先 Hash,结果加上一些特殊字符再 Hash,结果再加上些字符.再倒序.再怎么怎么的.再 Hash ...
- Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...
- iOS逆向工程之KeyChain与Snoop-it
今天博客的主题是Keychain, 在本篇博客中会通过一个登陆的Demo将用户名密码存入到KeyChain中,并且查看一下KeyChain中存的是什么东西,把这些内容给导出来.当然本篇博客的重点不是如 ...
- hadoop2.7之Mapper/reducer源码分析
一切从示例程序开始: 示例程序 Hadoop2.7 提供的示例程序WordCount.java package org.apache.hadoop.examples; import java.io.I ...
- error C4430:missing type specifier 解决错误
错误 3 error C4430: missing type specifier - int assumed. Note: C++ does not support default-int ...
- Python 基础之一变量和赋值
变量:程序在运行的时候会用到很多临时存储数据,这个时候就用到了变量,临时数据的名字. Python中变量不需要声明,直接可以使用,变量的数据类型由赋值确定. >>> name=&qu ...
- java web学习总结(五) -------------------servlet开发(一)
一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个Java程序向 ...
- FineReport如何部署Tomcat服务器集群
环境准备 Tomcat服务器集群中需要进行环境准备: Apache:Apache是http服务器,利用其对Tomcat进行负载均衡,这里使用的版本是Apache HTTP Server2.0.64: ...
- Linux学习日记-使用EF6 Code First(四)
一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是 请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...