文档章节

AngularJS $http与服务器通信

4112821992
 4112821992
发布于 2017/07/11 10:53
字数 411
阅读 5
收藏 0
<!--控制器依赖于$http服务,当控制器加载时,我们会向服务器的/api/note发送请求,$http.get()函数会返回一个所谓Promise对象,它允许我们进行
函数的链式调用(chain function),看上去就像时同步的那样。有了Promise对象之后,我们就能断言,在服务器返回响应后(无论请求结果成功还是失败),
都能执行后续的函数。
then函数接收两个参数,一个是成功时的处理函数(success handler),另一个则是错误处理函数(error handler)

Promise为js中的异步调用提供了非常大的便捷
js中传统的异步调用方式时使用回调函数

$q服务

GET请求只接收一个参数,那就是url地址,而post请求则接收两个参数,分别是服务器的url以及需要提交的数据。
-->
<html ng-app="notesApp">
<head>
    <title>$http get example</title>
    <style>
        .item{
            padding:10px;
        }
    </style>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Severs</h1>
<div ng-repeat="todo in mainCtrl.items" class="item">
    <div><span ng-bind="todo.label"></span></div>
    <div>- by <span ng-bind="todo.author"></span></div>
</div>
<div>
    <form name="addForm" ng-submit="mainCtrl.add()">
        <input type="text" ng-model="mainCtrl.newTodo.label">
        <input type="text" ng-model="mainCtrl.newTodo.author">
        <input type="submit" value="add" ng-disabled="addForm.$invalid">
    </form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
    angular.module('notesApp',[])//AngularJS中module函数的第一个参数代表了模块名称,第二个参数是一个数组,表示该模块所依赖的模块名称列表。
            .controller('MainCtrl',['$http',function ($http) {
                var self=this;
                self.items=[];
                self.newTodo={};
                var fetchTodos=function () {
                  return  $http.get('/api/note').then(function (response) {
                      self.items=response.data;
                  },function (errResponse) {
                      console.error('Error while fetching notes')
                  });
                }
               fetchTodos();
                self.add=function () {
                    $http.post('/api/note',self.newTodo)
                            .then(fetchTodos)
                            .then(function (response) {
                                self.newTodo={};
                            });
                };

            }]);
</script>
</body>
</html>

© 著作权归作者所有

4112821992
粉丝 2
博文 41
码字总数 28256
作品 0
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

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

OSC编辑部
2014/10/17
11.1K
26
AngularJS 是否能满足企业应用的安全需求

AndularJS开发团体最瞩目的内容是关注于所谓待开发内容(greenfield)的开发--不依赖于空数据库或新概念的新应用。然而这却是开发新的Angular应用程序的常规方法,忽视了很多将已存在应用迁移...

oschina
2015/01/21
7.9K
31
《AngularJS学习整理》系列分享专栏

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

开元中国2015
2018/11/09
0
0
登录失败,始终提示公司名称不存在

根据前端的输出错误应该是后端的服务接口没有启动,可是不知道怎么解决! 前端控制器输出错误如下: Load defined data api failed: Account.LoginAPI Error: [$injector:unpr] Unknown pro...

gread_369
2016/08/24
310
1
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenCv + ffmpeg + rtmp 实现摄像头采集数据直播功能

采用OpenCv获取图像数据,通过ffmpeg推流给rtmp服务器 OpenCV获取的图像数据为BGR格式,需要转换成YUV格式,再将其编码为h264格式,通过ffmpeg推流 头文件 extern "C"{#include <libavco...

cloudjx
22分钟前
1
0
服务器yum源更新为阿里云yum源

1 备份下原来的yum源 cd /etc/yum.repos.d/ mv CentOS-Base.repo CentOS-Base.repo_bak 1 2 3 2 获取阿里云yum源 wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/re......

Mr_Tea伯奕
30分钟前
0
0
CLEARTEXT communication to xxx not permitted by network security policy

Android P http网络请求不通,报出异常:java.net.UnknownServiceException: CLEARTEXT communication to xxxx not permitted by network security policy Google表示,为保证用户数据和设备......

醉雨
44分钟前
3
0
开发函数计算的正确姿势 —— 移植 next.js 服务端渲染框架

首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准...

阿里云云栖社区
今天
1
0
Windows获取其他进程中Edit控件的内容

最近做的MFC项目中,有个获取其他进程中Edit控件内容的需求,本来以为是个很简单的问题,但是来来回回折腾了不少时间,发博记录一下。   刚开始拿到这个问题,很自然的就想到GetDlgItemTex...

WinkJie
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部