Angularjs的$http异步删除数据详解及实例

时间: 2018-12-17阅读: 1227标签: Angular

这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。  


Angularjs的$http异步删除数据详解及实例

有人会说删除这东西有什么可讲的,写个删除的service,controller调用一下不就完了。
嗯...看起来是这样,但是具体实现起来真的有这么简单吗?首先有以下几个坑
怎么确定数据是否删除成功?
怎么同步视图的数据库的内容?


1.思路

1.实现方式一

删除数据库中对应的内容,然后将$scope中的对应的内容splice


2.实现方式二

删除数据库中对应的内容,然后再reload一下数据(也就是再调用一次查询方法,这种消耗可想而知,并且还要保证先删除数据再查询)


2.具体实现方式

删除数据的service:用异步,返回promise

service('deleteBlogService',//删除博客
    ['$rootScope',
      '$http',
      '$q',
      function ($rootScope, $http, $q) {
        var result = {};
        result.operate = function (blogId) {
          var deferred = $q.defer();
          $http({
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
            url: $rootScope.$baseUrl + "/admin/blog/deleteBlogById",
            method: 'GET',
            dataType: 'json',
            params: {
              id: blogId
            }
          })
            .success(function (data) {
              deferred.resolve(data);
              console.log("删除成功!");
            })
            .error(function () {
              deferred.reject();
              alert("删除失败!")
            });
          return deferred.promise;
        };
        return result;
  }]
)


controller里面注意事项

要特别注意执行顺序:确保己经删除完成之后再去reload数据,不然会出来视图不更新

/**
 * 删除博客
 */
$scope.deleteBlog = function(blogId) {
	var deletePromise = deleteBlogService.operate(blogId);
	deletePromise.then(function(data) {
		if(data.status == 200) {
			var promise = getBlogListService.operate($scope.currentPage);
			promise.then(function(data) {
				$scope.blogs = data.blogs;
				$scope.pageCount = $scope.blogs.totalPages;
			}); =
		}
	});
};

以上就是Angularjs的$http异步删除数据的实例详解。 


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1634

Angular应用”老手“也未必掌握的十大实用特性

如果你已经是编写 Angular 应用的”老手“,可能会觉得这篇文章介绍的这些特性自己肯定都很熟悉。但事实未必如此,不信的话等你看完再说。

Angular deploy 的实现

Angular CLI 在 8.3.0 发布过一个新命令 ng deploy,可以将 Angular 应用部署到远程服务器或云存储上面,例如:Firebase hosting、Azure、GitHub pages 等等,这也是算是 Angular CLI 最后一个将 Angular 应用从开发到部署打通全能选手工具了。

angular有必要学吗?

对于前端开发人员来说,angular是非常有必要学习的,它可以使Web应用开发比以往更简单、更快捷;同时也降低了构建复杂应用的难度。更何况很多后端职位都要求掌握angular了。Angular是一个使用 HTML 和 JavaScript 编写的 Web 前端框架

我为什么选择 Angular 2?

没有选择是痛苦的,有太多的选择却更加痛苦。而后者正是目前前端领域的真实写照。新的框架层出不穷:它难吗?它写得快吗?可维护性怎样?运行性能如何?社区如何?前景怎样?好就业吗?好招人吗?组建团队容易吗?

成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。Angular看起来似乎总是在改变和更新

Angular框架解读--多级依赖注入设计

在 Angular 应用中,各个组件和模块间又是怎样共享依赖的,同样的服务是否可以多次实例化呢?组件和模块的依赖注入过程,离不开 Angular 多级依赖注入的设计,我们来看看。

AngularJS 指令实践

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用

解决angularJS解决数据显示闪一下的问题?

使用 angular JS 的时候,把 angularJS 放到文件底部,在渲染页面的时候,会出现闪一下的情况。解决办法:1、使用 ng-cloak ;2、将angular.js的引入放到head前,提前加载;3、使用 ng-bind

读 Angular 代码风格指南

该文章拥有完整的代码风格指南——大到如何编排文件夹,小到如何进行变量命名都涉及。但是与 ng 略有绑定,所以这里整理一下可以单独拿出来的通用部分。

Angular 如何处理未可知异常错误

代码写得再好,始终都无法完整的处理所有可能产生异常,特别是生产环境中的应用,很大一部分是数据来自用户、远程,很难保证所有数据都按程序规定的产生。事实上,除非测试人员发现或者客户报告,否则都无法得知。因此

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!