AngularJs调用Restful实现CRUD - AngularJs

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs调用Restful实现CRUD - AngularJs相关的知识,希望对你有一定的参考价值。

本节我们主要给大家介绍AngularJs如何调用Restful,实现数据的CRUD。

主要用到的技术:

后端:ASP.NET WebApi + SQLServer2008

前端:AngularJs,Bootstrap3

主要用到的开发工具

后端:VisualStudio2013 + SQLServer2008

前端:WebStorm8

1.创建后端项目AngularJs_WebApi

1.1建立空解决方案名称AngularJs_WebApi

技术分享

1.2 创建AngularJs_WebApi_Server服务端项目

技术分享

1.3 选择空的WebApi项目,并创建

技术分享

技术分享

1.4 新建控制器TestController类(用于测试)

技术分享

技术分享

技术分享

1.5 编写TestController.cs实现代码

using System.Net.Http;
using System.Web.Http;

namespace AngularJs_WebApi_Server.Controllers
{
  public class TestController : ApiController
  {
    public HttpResponseMessage Get()
    {
      return new HttpResponseMessage()
      {
        Content = new StringContent("我是通过Get请求的")
      };
    }

    public HttpResponseMessage Post()
    {
      return new HttpResponseMessage()
      {
        Content = new StringContent("我是通过Post请求的")
      };
    }

    public HttpResponseMessage Put()
    {
      return new HttpResponseMessage()
      {
        Content = new StringContent("我是通过Put请求的")
      };
    }
  }
}

1.6 通过Chrome应用程序REST Console测试刚才发布的服务(如果没有可以到应用商店中去下载)

技术分享

测试Get请求 http://localhost:31194/api/test

请输入我们的请求地址和请求方式

技术分享

查看返回结果

技术分享

测试Post请求 http://localhost:31194/api/test

请输入我们的请求地址和请求方式

技术分享

查看返回结果

技术分享

测试Put请求 http://localhost:31194/api/test

请输入我们的请求地址和请求方式

技术分享

查看返回结果

技术分享

(未完待续)

以上是关于AngularJs调用Restful实现CRUD - AngularJs的主要内容,如果未能解决你的问题,请参考以下文章

Angularjs调用restful api(post)没有成功错误请求

AngularJS+Node的RESTful之基本实现

AngularJS,PHP Restful Cors 问题

Backbone UI 和 CMS 后端:涉足 Restful CRUD

angularjs:restful api 的 oauth2 实现

无需编程,基于PostgreSQL零代码生成CRUD增删改查RESTful API接口