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.在这个组件介绍系列中,只为简单的介绍组件的背景和简单的应用,读者在阅读时可以结合官 ...
随机推荐
- Asp.net Boilerplate之AbpSession扩展
当前Abp版本1.2,项目类型为MVC5. 以属性的形式扩展AbpSession,并在"记住我"后,下次自动登录也能获取到扩展属性的值,版权归"角落的白板报"所 ...
- less学习
// 1.变量:颜色可做+- // from @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light- ...
- .NET跨平台之旅:将示例站点升级至 ASP.NET Core 1.1
微软今天在 Connect(); // 2016 上发布了 .NET Core 1.1 ,ASP.NET Core 1.1 以及 Entity Framework Core 1.1.紧跟这次发布,我们 ...
- Python-Jenkins API使用 —— 在后端代码中操控Jenkins
最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...
- git 命令
切换仓库地址: git remote set-url origin xxx.git切换分支:git checkout name撤销修改:git checkout -- file删除文件:git rm ...
- redis 学习笔记(1)
redis持久化 snapshot数据快照(rdb) 这是一种定时将redis内存中的数据写入磁盘文件的一种方案,这样保留这一时刻redis中的数据镜像,用于意外回滚.redis的snapshot的格 ...
- springMVC初探--环境搭建和第一个HelloWorld简单项目
注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...
- JavaScript基础知识总结(四)
JavaScript语法 八.函数 函数就是完成某个功能的一组语句,函数由关键字function + 函数名 + 加一组参数定义: 函数在定义后可以被重复调用,通常将常用的功能写成一个函数,利用函数可 ...
- java中Action层、Service层和Dao层的功能区分
Action/Service/DAO简介: Action是管理业务(Service)调度和管理跳转的. Service是管理具体的功能的. Action只负责管理,而Service负责实施. DAO只 ...
- 2016/12/28_javascript
今天学习的主要内容: javascript: 1.if语句,switch语句,while循环以及for循环: 1)if语句 if(boolean){}; if(boolean){} else if(b ...