2014-09-09 3 views
0

Есть много статей на эту тему, но, на мой взгляд, самый простой способ начать с railscast angular и этот http://asanderson.org/posts/2013/06/03/bootstrapping-angular-rails-part-1.html. Каждая из этих статей (видео) содержит почти тот же код. Я пытался реализовать оба пути, но ни один из них не работает. Это мой путь: application.jsInject Angular to Rails

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

user.js.coffee

#= require_self 
#= require_tree ./controllers 

активы/JavaScript/Контроллеры/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 

приложение lication.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> 

библиотеки я добавил в поставщика/активы/JavaScript и Gemfile как 2 variant.In результат "название" не показывает правильный путь и показывает {{title}}. Спасибо за ответ.

+0

Любые ошибки в консоли firebug в вашем браузере? – cthulhu

ответ

1

Я предполагаю, что эта линия имеет ошибку (дополнительная точка):

$.scope.title = "WWAAAAAAA"

Оно должно быть:

$scope.title = "WWAAAAAAA"

Другое дело, что вы делаете какой-то странный гибрид «классическое» приложение RoR и приложение AngularJS.

В классическом приложении RoR вы создаете динамическое содержимое html, используя erb или какой-либо другой механизм шаблонов.

С помощью AngularJS вы обслуживаете статические html-страницы, а «динамизация» выполняется на стороне клиента (в браузере клиентов).

Я предлагаю разделить приложение на две части: бэкэнд на основе Ruby on Rails, который действует как API, и интерфейс, одностраничное приложение на основе AngularJS и использование инструментов, типичных для внешнего приложения, таких как а старшина (http://yeoman.io/)

+0

Ну, это не исправить проблему (это была «плохая» моя ошибка), но дело в разделении - хорошая идея. –

1
  1. Проверьте, если ваш HTML требуют application.js
  2. Angularjs файл должен быть существовать, и вы можете найти в application.js
  3. Вид на Broswer как Chrome и открыть консоль, чтобы увидеть, есть ли javascript ошибка

Обычно, когда вам требуется angularjs правильно и вставлять ng-app и ng-controller в HTML, установите {{1 + 1}}, то вы увидите 2 на той же странице.Still show {{}} означает, что angularjs не требуется, если успех или угловая ошибка области

+0

1) '<% = javascript_include_tag 'application', controller_name%>', да, он включен. 2) Да, это определено в app.js, а lib - в поставщике. 3) Я отлаживал свою страницу с помощью firebug и получал такую ​​ошибку. '[Ng: areq] Аргумент 'IndexCtrl' не является функцией, получил undefined'. Хорошо, я думаю, потому что мое приложение не распознает угловые. –

+0

Похоже, ваш кофейный код нехорошо, но я не пользуюсь кофе. В js я часто определяю Ctrl как 'var IndexCtrl = ['$ scope', function ($ scope) {$ scope.title = 'WWAAAAAAA'}]', и это работает. – dddd1919

+0

sth, не так ли? Я этого не понимал. О js Я пробовал свой путь, он все еще не работает правильно. 'var IndexCtrl = ['$ scope', function ($ scope) { \t $ scope.title =" WWAAAAAAA "; \t $ scope.Data = {}; \t $ scope.Data.doClick = function() { \t \t responsePromise = $ http.get ('/ user/photos_show'); \t \t ответPromise.success = функция (данные) { \t \t \t $ .scope.Data.Response = данные; \t \t}; \t}; }]; ' –