ruby-on-rails - 如何让 Rails 与 AngularJS 协同工作

标签 ruby-on-rails ruby angularjs ruby-on-rails-4

现在我已经用了几个小时将 rails 与 angular 集成在一起,我准备放弃了。我正在学习本教程:

link to tutorial

' 我让它变得更简单

在我的 application.js 中,我需要以下内容:

//= require jquery
//= require jquery_ujs
//= require angular 

在我的 main.js.coffe 中,我要求获取以下 js 文件:

#= require_self
#= require_tree ./controllers/main

在我的 app/assets/javascripts/controllers/main/mainIndexCtrl.js.cofee 中,我有与他在教程中相同的行:

@IndexCtrl = ($scope) ->
  $scope.title = "My blog"

所以这是有趣的部分:

我的“主” View 与教程中的完全相同:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Blog</title>
  <%= stylesheet_link_tag    "application", media: "all" %>
  <%= javascript_include_tag "application", controller_name %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

所以理论上,当我在 http://localhost:3000/main/Index 运行我的应用程序时,我应该得到与他完全相同的结果,但不是。

我收到运行时错误,它表示它在 (in/app/assets/javascripts/main.js.coffee) 处失败,没有别的。我真的不知道到底出了什么问题。如果我用一些随机字符串(如“hugabuga”)切换 controller_name 页面加载,当然 angular 将无法工作,因为没有指向 Controller 索引的链接。

我对cofee脚本不是很有经验,但也许 Controller 定义的方式不正确?

最佳答案

在另一个教程中我不得不添加另一个 Gem

gem 'angular-rails-templates'

同时修改 application.js 以包括:

//= require jquery
//= require jquery_ujs
//= require angular/angular
//= require angular-route/angular-route
//= require angular-rails-templates
//= require_tree .

JS 的列出顺序也很重要。确保您的文件中的内容与视频中显示的内容相同。

关于ruby-on-rails - 如何让 Rails 与 AngularJS 协同工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24273696/

相关文章:

ruby-on-rails - rails : Undefined method error with additional ActiveRecord association

ruby-on-rails - 通过 form_for 编辑自定义用户模型属性

javascript - 尝试使用 AngularJS 将图像上传到 Cloudinary 时,Access-Control-Allow-Origin 不允许 Origin http ://localhost. com:8000

angularjs - Angular ng-repeat 过滤器隐藏元素

javascript - Google 更新和 AngularJS/JavaScript 网站

ruby-on-rails - 每个项目 gemset 的 RVM

ruby-on-rails - Ruby on Rails - 从父类调用每个子类的方法

css - Sass css 不能在 ubuntu 上运行?不听也不编译

ruby-on-rails - 类型错误 : no implicit conversion of nil into String with gsub

ruby - 如何在具有通配符的 RSpec 中请求(GET/POST)路由