将 Angular 注入 Rails答案

【问题标题】：Inject Angular into Rails将 Angular 注入 Rails
【发布时间】：2014-09-10 11:21:43
【问题描述】：

关于这个主题有很多文章，但在我看来，最简单的方法是 railscast angular 和这个http://asanderson.org/posts/2013/06/03/bootstrapping-angular-rails-part-1.html。每篇文章（视频）都共享几乎相同的代码。我试图实现这两种方式，但它们都不起作用。这是我的方式： application.js

//= require angular
//= require_tree .
//= require underscore

user.js.coffee

#= require_self
#= require_tree ./controllers

assets/javascript/controllers/mainIndexCtrl.js.coffee

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

    $scope.Data = {}
    $scope.Data.doClick = ->
        responsePromise = $http.get('/user/photos_show')
        responsePromise.success (data) ->
            $.scope.Data.Response = data

application.html.erb

<html ng-app>

show.html.erb

<%= notice %>
<h3>Hello there <%= @user.name %></h3>
<div ng-controller="IndexCtrl">
    <p> Here are your albums </p>
    {{title}}
    <% @albums.each do |album|  %>
        <div>
            <%= link_to album.last, album_photos_path( album_id: album.first, album_name: album.last ) %>
        </div>
    <% end %>
</div>

我添加到 vendor/assets/javascript 和 gemfile 作为 2 变体的库。结果“标题”没有显示正确的方式并显示 {{title}}。感谢您的回答。

【问题讨论】：

浏览器中的萤火虫控制台有错误吗？

标签： javascript ruby-on-rails ruby angularjs coffeescript

【解决方案1】：

我猜这行有错误（额外的点）：

$.scope.title = "WWAAAAAAA"

应该是：

$scope.title = "WWAAAAAAA"

另一件事是，您正在做一些“经典” RoR 应用程序和 AngularJS 应用程序的奇怪混合。

在“经典”RoR 应用程序中，您正在使用 erb 或其他一些模板引擎生成动态 html 内容。

使用 AngularJS，您可以提供静态 html 页面，并且“动态化”发生在客户端（在客户端浏览器中）。

我建议将您的应用程序分成两部分，一个基于 Ruby on Rails 的后端，它充当 API，前端，一个基于 AngularJS 并使用前端应用程序典型工具的单页应用程序，例如约曼 (http://yeoman.io/)

【讨论】：

好吧，这并没有解决问题（这是一个“坏”的我的错误），但是关于拆分的事情是个好主意。

【解决方案2】：

检查你的html是否需要application.js
Angularjs文件必须存在，你可以在application.js找到
在Chrome等浏览器上查看并打开控制台查看是否有javascript错误

通常当您正确需要angularjs并在html中嵌入ng-app和ng-controller时，设置{{1 + 1}}，然后您将在该页面中看到2。仍然显示 {{}} 表示 angularjs 不需要成功或 angularjs 范围错误

【讨论】：

1)<%= javascript_include_tag 'application', controller_name %>，是的，包括在内。 2) 是的，它在 app.js 中定义，并且库在供应商中。 3）我用firebug调试了我的页面并得到了这种错误。[ng:areq] Argument 'IndexCtrl' is not a function, got undefined。我认为这是预料之中的，因为我的应用程序无法识别角度。
看起来你的咖啡代码有问题，但我不使用咖啡。在 js 中，我经常定义一个像 var IndexCtrl = ['$scope', function($scope){ $scope.title = 'WWAAAAAAA' }] 这样的 Ctrl 并且这有效。
sth，错了？我不明白。关于js我试过你的方法，它仍然不能正确地工作。 var IndexCtrl = [ '$scope', function($scope){ $scope.title = "WWAAAAAAA"; $scope.Data = {}; $scope.Data.doClick = function() { responsePromise = $http.get('/user/photos_show'); responsePromise.success = function(data) { $.scope.Data.Response = data; }; }; }];