如何将 Angular js 集成到 grails 2.3.4 中？

Posted 2023-02-27

【中文标题】如何将 Angular js 集成到 grails 2.3.4 中？

【英文标题】：How to integrate angular js into grails 2.3.4?

【发布时间】：2014-02-19 12:52:38

【问题描述】：

我在grails 2.3.4 上运行，虽然关于在我的下一个应用程序中集成 angularjs。

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

但是我在这里卡住了。

如何让 grails 与 angularjs 通信？（通过index.gsp？，如果是如何集成它？）什么是好的架构？

非常感谢您的回答！！！

PS.：我知道有一个 grails angular js 插件。但是我确实看到了使用它的任何理由！

【参考方案1】：

我们有两个项目作为两个独立的世界。第一个项目，服务器端，在 grails 中。我们正在创造“宁静”的服务。这个项目对角度或资源插件或资产管道一无所知；甚至不使用 gsp 视图，仅使用 json 响应。将来我们可以使用该“api”来构建移动客户端或与其他服务交换信息等。

另一方，客户端，对 grails 一无所知。都是带有html 5、javascript 和 angularjs 框架的静态页面。

我相信“它”是每个人从现在开始都会采用的范式。

【讨论】：

完全同意。但是，当您已经拥有一个相当大的 grails 应用程序并且想要从混合选项开始时，Clay McCoy's blog entry 描述他如何使用 ng-init 将 GSP 参数注入到角度 $scope 中值得一读。

【参考方案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        
   
 

在你想使用它的屏幕上需要模块。

【讨论】：

感谢您的回答！您只有1 index.gsp 文件还是多个文件，还是运行html files。请显示您的index.gsp 文件的结构！你的 views 的 angularjs 是如何加载的？

我们有一个加载应用程序的 gsp 页面。在那个 gsp 页面上，我们需要所有需要的资源包，例如，angular、angular resources、angular cookie、ng-app、ng-controller/services 等。我们的 ng-app 的目录结构几乎与这个类似 @ 987654321@

看看这个演示应用程序。 github.com/mannejkumar/GrailsAngularDemoApp

【参考方案3】：

我更喜欢使用资产管道

首先，安装插件：

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

在此之后，将您的 javascripts 从 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 中，将这些行添加到第 1 行：

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

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

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

【参考方案4】：

Grails 已经有一个 Angular 插件

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

安装它并按照说明进行操作

另一个非常好的 grails 和 angular 示例

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

【讨论】：

这个例子有效吗？似乎在填充所有字段以添加书籍后，单击提交后对话框不会关闭。并且使用引导用户名和密码登录也不起作用。

【参考方案5】：

我已经使用 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/