尝试使用 Rails + AngularJS + Gon

2 年 ago

新, 韵

1 minute

在使用Rails和AngularJS之后，代码的量变得很繁琐。我尝试使用gon来连接Rails和Angular，希望能变得更容易一些。我预计所有的页面转换都是按照Rails的方式进行的。

安装AngularJS和Gon。

gem 'angularjs-rails'
gem 'gon'

在application.js中进行设置
删除turbolink


//= #require turbolinks
//= require angular


  <%= include_gon %>
  <%= stylesheet_link_tag    'application', media: 'all'%>
  <%= javascript_include_tag 'application' %>
  <!--<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>-->
  <!--<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>-->

事先创建一个名为controller和action为index的函数。

rails g controller hoge index

角度单位的设置

设置应用

<html ng-app="angular-gon">

创建app.js

'use strict';

angular.module("angular-gon", []);

在控制器和html.erb文件中添加

def index
    gon.title = "0から1へ!"
    gon.numbers = [1,2,3]
end

angular.module("angular-gon").controller('HogeIndexCtrl',
  function () {
    $.extend(this, gon);
  });

<div ng-controller="HogeIndexCtrl as $ctrl">
  <h1>{{$ctrl.title}}</h1>
  <p ng-repeat="number in $ctrl.numbers">{{number}}</p>
</div>

出来了！！咚咚咚

从Rails控制器到AngularJS的数据流非常顺畅，所以进行得相当顺利，不是吗？

controller@angularとerbのng-controllerの辺りを自動生成させる