【问题标题】:How to integrate angular js into grails 2.3.4?如何将 Angular js 集成到 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 插件。但是我确实看到了使用它的任何理由!

【问题讨论】:

    标签: javascript angularjs grails grails-2.0 grails-plugin


    【解决方案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/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-02-03
        • 2019-01-04
        • 2021-04-05
        • 2018-02-02
        • 2016-06-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多