显示导航

使用365bet地区和AngularJS x构建REST API

365bet地区使用365bet地区 rest api配置文件为已存在的AngularJS应用程序Angular构建后端

塞尔吉奥·德尔阿莫

365bet地区版本 3.3.0

365bet地区培训

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

365bet地区在本指南中,您将把现有的AngularJS todo应用程序连接到365bet地区后端

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

如何完成指南

要开始,请执行以下操作

要么

365bet地区指南存储库包含两个文件夹

  • 初始初始项目通常是一个简单的365bet地区应用程序,其中包含一些其他代码,可以帮助您快速入门

  • 完成一个完整的示例它是按照指南中介绍的步骤进行操作并将这些更改应用于文档的结果。初始

要完成指南,请转到初始

  • 光盘进入grails指南grails restapi angularjs初始

您可以直接前往如果你光盘进入grails指南grails restapi angularjs完成

初始角度应用

树屋

本节显示在Treehouse AngularJS课程在该课程中,开发了AngularJS应用程序。该应用程序是待办事项列表管理器。

最初的AngularJS应用未连接到任何后端如果刷新浏览器,待办事项列表更改将丢失
初始

索引html是我们AngularJS应用的入口点

初始angularjs索引html

<> ="">

  span span class标签
  <> href='https字体googleapis com css系列Varela Round' rel='样式表' 类型='文字CSS'>
  <> href='主要样式CSS' rel='样式表' 类型="文字CSS">

<> 该应用程序的="todoListApp">
  

我的待办事项 <> src="供应商angular js" 类型="文字javascript"> <> src="脚本应用程序js" 类型="文字javascript"> <> src="脚本控制器主要js" 类型="文字javascript"> <> src="脚本服务数据js" 类型="文字javascript"> <> src="指令脚本全部js" 类型="文字javascript">

我们在以下位置创建AngularJS应用程序应用程式js

初始angularjs脚本应用js
角度模块"todoListApp", []);

AngularJS控制器管理应用程序流程

初始angularjs脚本控制器主js
'使用严格'角度模块'todoListApp'控制者'mainCtrl', 功能(范围dataService范围.addTodo = 功能() {
    全部那么: "这是一个新的任务"};
    范围待办事项unshift todo dataService getTodos功能响应范围所有响应数据范围.deleteTodo = 功能全部指数dataService deleteTodo待办事项范围所有接头指数, 1);
  };

  范围.saveTodo = 功能所有数据服务保存所有一切

我们有一个全部指令此指令使用上一个控制器和下一个模板

初始angularjs脚本指令todos js
角度模块'todoListApp'指示'全部', 功能() {
  返回 {
    templateUrl: '模板全部html',
    控制者: 'mainCtrl',
    更换: 真正
  }
})
初始angularjs模板todos html
<> ="清单">
  <> ="">
    <> href="" 点击="addTodo">添加新任务
  
<> ="项目" 上课="编辑项目编辑已编辑待办事项已编辑已完成待办事项已完成" ng重复="全部按顺序完成" ="全部完成的假"> <> 模型的="全部完成" 类型="复选框"/> <> 点击="全部完成全部完成所有已编辑true"> <> 点击="编辑真实" ng hide="编辑">全名 <> 变化="待办事项编辑为true" ng模糊="编辑错误" ng show="编辑" 模型的="全名" ="编辑标签" 类型="文本"/> <> ="行动"> <> href="" 点击="saveEverything">保存 <> href="" 点击="deleteAll索引" ="删除">删除
</div/div

我们的数据服务当前正在从模拟json文件加载待办事项

初始angularjs脚本服务数据js
'使用严格'角度模块'todoListApp'服务'dataService', 功能(http) {
  这个.盖托斯 = 功能打回来http得到'模拟所有json'然后回调这个.deleteTodo = 功能所有控制台日志""全名"待办事项已被删除")
  };

  这个.saveTodo = 功能所有控制台日志""全名"待办事项已保存");
  };

});
初始angularjs模拟待办事项json
[
    {"那么": "打扫房屋"},
    {"那么": "给狗浇水"},
    {"那么": "喂草"},
    {"那么": "支付演示票"},
    {"那么": ""},
    {"那么": "游泳"}
  ]

365bet地区编写365bet地区应用程序

我们将要进行的初始项目是使用365bet地区365bet地区 REST配置文件.

grails创建应用程序myapp个人资料其余api

域类

365bet地区创建存储Todos的持久性实体在365bet地区中处理持久性的最常见方法是使用365bet地区域类:

域类满足Model View Controller MVC模式中的M,并表示映射到基础数据库表上的持久实体。在365bet地区中,域是位于grails应用程序域目录中的类。

完成grailsw创建域类Todo

全部域类是我们的数据模型。我们定义了不同的属性来存储全部特点

365bet地区应用程序域演示Todo groovy
演示进口 grails rest资源

资源资源小号'全部')
 全部 {
    那么布尔值已完成静态的约束

单元测试我们测试那么是必需的属性

src测试groovy演示TodoSpec groovy
演示进口 spock lang规格
进口 免费测试gorm DomainUnitTest

 TodoSpec 延伸规格实施DomainUnitTest {

    虚空 "测试名称为必填项"() {
        什么时候:
        定义全部全部那么那么然后全部验证所有错误'那么'代码错误哪里名称错误代码空值 | '可为空'
        ''   | '可为空'
    }
}

然后,我们将一些测试数据加载到BootStrap常规.

365bet地区应用程序初始化演示BootStrap常规
演示BootStrap def init servletContext def待办事项名称'打扫房屋'那么'给狗浇水'那么'喂草'那么'支付演示票'那么''那么'游泳'Todo命名命名保存def销毁

我们使用以下注释域类资源资源

365bet地区应用程序域演示Todo groovy
进口 grails rest资源

资源资源小号'全部')
 全部 {

此注释公开了全部域类作为REST资源

365bet地区在365bet地区中创建RESTful API的最简单方法是将域类公开为REST资源,只需添加Resource转换并指定URI,您的域类将自动以XML或JSON格式用作REST资源。自动创建一个名为TodoController的控制器并注册必要的RESTful URL映射

这是为我们的域类注册的URL映射

365bet地区HTTP方法URI 365bet地区操作

URI

365bet地区格力行动

得到

全部

指数

得到

全部创造

创建

开机自检

全部

保存

得到

全部走

节目

得到

所有编号

编辑

全部走

更新

全部走

删除

启用CORS

365bet地区因为客户端AngularJS和服务器端365bet地区将在单独的端口上运行需要配置

修改您的yml应用程序启用CORS

完整的grails应用配置会议应用yml
ils:
    :
        已启用: 真正

365bet地区将Angular应用程序连接到365bet地区

我们添加了一条指令来检测用户在编辑Todo名称时何时按下ENTER键

完整的angularjs索引html
<> src="Enter js的脚本指令" 类型="文字javascript">
完整的angularjs脚本指令ofEnter js
角度模块'todoListApp'指示'ngEnter', 功能() {
        返回 功能作用域元素属性元素绑定"按下按键", 功能事件如果事件哪13范围应用(功能范围评估属性输入'事件'事件事件preventDefault

我们将稍微修改UI,例如,如果用户修改待办事项或者更改名称或完成操作,我们将删除保存按钮,我们将更改保存在服务器中

完整的angularjs模板全部html
<> ="清单">
  <> ="">
    <> href="" 点击="addTodo">添加新任务
  
<> ="项目" 上课="编辑项目编辑已编辑待办事项已编辑已完成待办事项已完成" ng重复="全部按顺序完成"> <> 模型的="全部完成" 类型="复选框"/> <> 点击="全部完成所有完成所有已编辑真正的保存"> <> 点击="编辑真实" ng hide="编辑">全名 <> 输入="编辑falset savododo待办事项" 变化="待办事项编辑为true" ng模糊="编辑错误" ng show="编辑" 模型的="全名" ="编辑标签" 类型="文本"/> <> ="行动"> <> href="" 点击="deleteAll索引" ="删除">删除
</div/div
完整的angularjs脚本控制器主js
'使用严格'角度模块'todoListApp'控制者'mainCtrl', 功能(范围dataService范围.addTodo = 功能dataService addTodo功能响应范围待办事项未更改响应数据dataService getTodos功能响应范围所有响应数据范围.deleteTodo = 功能全部指数dataService deleteTodo待办事项功能响应范围所有接头指数, 1);
    });
  };

 范围.saveTodo = 功能全部指数dataService saveEverything功能响应控制台日志响应数据

365bet地区数据服务现在连接到365bet地区后端,而不是加载模拟json文件

完整的angularjs脚本服务数据js
'使用严格'角度模块'todoListApp'服务'dataService', 功能(http) {

  365bet地区todos365bet地区S​​erverUri'http localhost大家';

  这个.盖托斯 = 功能打回来http365bet地区获取todos365bet地区S​​erverUri然后回调这个.addTodo = 功能打回来全部那么: "这是一个新的任务", 已完成: };
      http365bet地区发布todos365bet地区S​​erverUri todo然后回调这个.deleteTodo = 功能全部回调http.删除365bet地区todos365bet地区S​​erverUri'/'待办事项编号然后回调这个.saveTodo = 功能全部回调http365bet地区道路建设者服务器'/'一切id一切然后回调

运行应用程序

要运行该应用程序,请使用gradlew bootRun命令将在端口上启动应用程序

365bet地区打开您的角度应用程序,您将享受由365bet地区后端提供支持的Todo管理器。您可以刷新浏览器而不会丢失更改

完成

您需要365bet地区帮助吗

OCI赞助了本指南的创建OCI提供了几种365bet地区服务:

免费咨询

OCI 365bet地区团队包括365bet地区联合创始人Jeff Scott Brown和Graeme Rocher检查我们的365bet地区课程并向发展和维护365bet地区的工程师学习

Grails OCI团队