如何将AngularJS集成到Grails 2.3.4中？

Question

我正在运行 grails 2.3.4 ，并考虑在我的下一个应用程序中集成angularjs。

我认为从服务器端来看，最好的方法是在域和控制器类中使用grails REST 集成。

但是我现在被卡住了。 如何让grails与angularjs通信？（通过 index.gsp 吗？如果是，如何集成它？）什么是良好的架构？

我真的很感激您的回答！！！

附：我知道有一个grails angular js插件，但我没有使用它的理由！

- user2051347

Answer 1

我们有两个项目，分别位于两个不同的世界。第一个项目是服务器端，使用grails。我们正在创建“restful”服务。这个项目与angular或resource插件或asset pipeline毫不相干，甚至不使用gsp视图，只有 json 响应。将来，我们可以使用这个“api”构建移动客户端或与另一个服务交换信息等。

另一方面，客户端对grails一无所知。它全部是静态网页，包括html 5、javascript和angularjs框架。

我相信“it”是每个人从现在开始采用的范例。

- AA.

---

完全同意。然而，当您已经拥有一个相当大的Grails应用程序并且想要开始使用混合选项时，Clay McCoy的博客文章描述了他如何使用ng-init将GSP参数注入到angular $scope中，这值得一读。 - bdumtish

Answer 2

我们选择不使用angular-js资源插件，而是自己使用。这样更加灵活，在更新内容和方式方面更加自由。

只需将angularjs文件放在/js/lib文件夹中。创建一个资源捆绑文件（我们有grails-app/conf/AngularResources.groovy文件），并在其中声明您的angular js资源捆绑包，如下所示。我们在AngularResources.groovy中声明了所有的angular资源，如控制器/服务/应用程序/指令。

modules = {
'angular' {
    resource url:"js/lib/angular/angular.min.js", nominify:true
    resource url:"js/lib/angular/angular-resource.min.js", nominify:true        
   }
 }

在您想要使用它的屏幕上需要导入该模块。

- Sudhir N

---

谢谢你的回答！你只有一个 index.gsp 文件还是多个，或者你运行 html 文件。请展示一下你的 index.gsp 文件的结构！你的 AngularJS 视图是如何加载的？ - user2051347

我们有一个单独的gsp页面，用于加载应用程序。在该gsp页面上，我们需要所有所需的资源包，例如angular、angular资源、angular cookie、ng-app、ng-controller/services等。我们的ng-app目录结构几乎与这个类似 https://dev59.com/vnvaa4cB1Zd3GeqPBUy_ - Sudhir N

看一下这个演示应用程序。https://github.com/mannejkumar/GrailsAngularDemoApp - Jagadeesh

Answer 3

我喜欢使用资产管道。

首先，安装插件：

http://grails.org/plugin/asset-pipeline

接下来，将您的JavaScript从web-app/js/*移动到grails-app/assets/javascripts/*。您还需要对样式表和图像执行此操作。

安装并配置nodejs + npm以通过bower插件管理库

sudo apt-get install nodejs
sudo apt-get install npm
npm i -g bower

前往grails-app/assets并安装angularjs。

cd grails-app/assets
bower install angular --save

在javascripts文件夹中的application.js文件中，将以下代码添加到第一行：

//= require angular/angular.js
//= require_tree views
//= require_self

最后，在您的GSP中添加此行：

<asset:javascript src="application.js"/>

- ricardogobbo

Answer 4

我使用Grails和AngularJS完成了演示应用程序。用户登录、注册、创建、编辑和删除联系人。我使用类似于Grails MVC模式的AngularJS结构创建了这个前端。

联系人模块

1. Grails  -> URLMappings,
   Angular -> Routing (app.js)
2. Grails  -> ContactController(Actions:create,list,edit,delete,details) 
   Angular -> ContactController(Actions: create,list,edit,delete,details)
3. Grails  -> ContactService(Methods: create,save,edit,delete,details) 
   Angular -> ContactService(Functions: create,save,edit,delete,details)
4. Views   -> All views are created using Angularjs (Create, Details)

我浏览了很多教程，并制作了这个应用程序，以符合Grails MVC模式，因此任何人都可以在具有一些Grails知识的情况下理解这个Angular演示应用程序

演示：http://jagadeesh-manne.rhcloud.com/

源代码：http://mannejkumar.github.io/GrailsAngularDemoApp/

- Jagadeesh

Answer 5

Grails已经拥有一个适用于Angular的插件。

http://grails.org/plugin/angularjs-resources

安装这个并按照说明操作

Grails和Angular的又一个非常好的例子

https://github.com/hantsy/angularjs-grails-sample/

- Srisudhir T

---

这个例子能用吗？似乎在填写所有字段以添加书籍后，对话框在我点击提交后不会消失。使用引导程序用户名和密码也无法登录。 - johnsam