2014-01-28 51 views
8

我在grails 2.3.4上运行,虽然我在下一个应用程序中整合了angularjs。如何将angular js整合到grails 2.3.4中?

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

但是在这里,我卡住了。

如何让grails与angularjs进行通信?(通过index.gsp ?,如果是的话如何整合它?)什么是一个好的架构?

我真的很感谢你的回答!

PS:我知道有一个grails angular js插件。不过,我确实看到使用它的任何理由!

回答

7

我们选择不要使用angular-js资源插件,而是使用我们自己的。只是为了更多的时间和更新等的灵活性。

只需将angularjs文件放在/ js/lib文件夹中。创建一个资源包文件。 (我们有grails-app/conf/AngularResources.groovy文件),并在那里声明你的角度js资源包,如下所示。我们宣布我们所有的角资源一样,控制器/服务/应用/指令AngularResources.groovy

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

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

+0

Thx为您的答案!你只有'1 index.gsp'文件或多个文件,或者你运行'html文件'。请显示你的'index.gsp'文件的结构!你如何加载angularjs的'views'? – user2051347

+0

我们有一个加载应用程序的gsp页面。在那个GSP页面,我们要求所需的所有资源包,例如,角,角资源,角饼干,NG-应用,NG-控制器/服务等 我们的NG-应用程序的目录结构几乎与此类似一个 http://stackoverflow.com/questions/21121827/intelligent-folder-structure-for-grails-2-3-4-in-combination-with-angular-js –

+0

你可以请指出一些示例应用程序如果可能 – Vish

12

我们有两个项目作为两个独立的世界。第一个项目,服务器端,在Grails中。我们正在创造'宁静'的服务。该项目对角度或资源插件或资产流水线一无所知;甚至不使用gsp视图,只有json响应。未来我们可以使用'api'来构建移动客户端或与其他服务交换信息等。

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

我相信'它'是每个人从现在开始采用的范例。

+1

完全同意。然而,当你已经有了相当多的Grails应用程序,并且你想从混合选项开始时,[Clay McCoy的博客条目](http://claymccoy.blogspot.ie/2012/09/grails-with-angularjs-and- coffeescript.html)描述他如何使用ng-init将GSP params注入角度$范围值得一读。 –

+0

如果可能,你可以指出一些示例应用程序 – Vish

7

我更喜欢使用资产管道

首先,安装该插件:

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

在此之后,将您的JavaScript从web-app/js/*grails-app/assets/javascripts/*。你也必须使用样式表和图像来做到这一点。

安装和配置+的NodeJS通过NPM鲍尔插件来管理图书馆

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

导航到的grails-app /资产并安装angularjs

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

在你的application.js的JavaScript文件夹内,加这些行在行1:

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

最后,将此行添加到您的GSP:

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

我已经使用grails和angularjs完成了演示应用程序。用户登录,注册,创建编辑删除联系人。我使用angularjs类似于grails mvc模式的结构创建了这个前端。 联系模块

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的

演示一知半解这个角的演示应用程序:http://jagadeesh-manne.rhcloud.com/

来源http://mannejkumar.github.io/GrailsAngularDemoApp/