AngularJS $http与服务器通信

最新推荐文章于 2024-11-04 16:17:23 发布

chenggou9601

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量171

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3161974/blog/1329825

版权

<!--控制器依赖于$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>

转载于:https://my.oschina.net/u/3161974/blog/1329825