Rails angularJSでリアルタイムプレビュー機能を実装したいですが、jsの設定がわかりません

質問させていただきます。

teratailやqiitaのようなtextareaの編集の際リアルタイムで右画面に反映、表示させることがしたく、実装しようとチャレンジしていますが現状うまくいっておりません。

以下の記事の手順通りに進めています。

http://qiita.com/sachin21/items/e7df2720fbf362052f34

この記事の中の実装２の手順で

app.controller 'parsedMarkdownCtrl', ['$scope', ($scope) ->
  $scope.parseMarkdown = ->
    $("#preview").html(marked($scope.content))
]

のコードをどこかに記す必要があるとのことなのですが、どこのファイルに書けば良いのか分かっておりません。 (場所もjsなのかcoffeeなのかも混乱しています)
わからないまま、自分なりに検索しつつapp.coffeeの中に書いたりしたのですが、全く機能しません....
angularの読み込む設定等理解できていないのが根本的な問題なのは分かっておりますが、どうにかして実装したいと思っております。大変お手数おかけしますが、教えていただけないでしょうか....

Noteモデルのbodyカラムでリアルタイムプレビュー機能をつけたいです
参考までに現状のファイルは以下のようになっております。

ruby
1Gemfile
2
3source 'https://rubygems.org'
4gem 'rails', '4.2.4'
5gem 'sass-rails', '~> 5.0'
6gem 'uglifier', '>= 1.3.0'
7gem 'coffee-rails', '~> 4.1.0'
8gem 'jquery-rails'
9gem 'turbolinks'
10gem 'jbuilder', '~> 2.0'
11gem 'sdoc', '~> 0.4.0', group: :doc
12gem 'materialize-sass'
13gem 'redcarpet', '~> 3.3', '>= 3.3.4' # markdown
14gem "angular-rails-engine"
15gem 'marked-rails' # markdownをparseしてくれる
16gem 'coderay', '~> 1.1'
17
18group :development do
19  gem 'sqlite3'
20  gem 'web-console', '~> 2.0'
21  gem 'spring'
22end

ruby
1app/assets/javascripts/application.js
2
3//= require jquery
4//= require materialize-sprockets
5//= require jquery_ujs
6//= require jquery.timeago
7//= require turbolinks
8//= require_tree .
9//= require marked

共通テンプレート内でangularを読み込んでいます。

ruby
1app/views/layouts/application.html.erb
2
3<!DOCTYPE html>
4<html ng-app>
5<head>
6  <title>プレビュー</title>
7  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
8  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
9  <%= csrf_meta_tags %>
10  <%= yield :head %>
11  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
12  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
13  <script src="lib/marked.js"></script>
14   <!-- GoogleデベロッパーツールでGET http://localhost:3000/notes/lib/marked.js 404 (Not Found)というエラーが出てます -->
15</head>
16<body>
17
18  {{6 * 8}}  <!--48と表示されます -->
19
20      <div class="container">
21        <%= yield %>
22      </div>
23</body>
24</html>

noteのフォーム画面です（ここのbodyを編集している時にリアルタイムプレビューにしたいです）

<%= form_for(@note) do |f| %>
  <%= f.text_field :body, 'ng-model' => 'body', "ng-change" => 'parseMarkdown()', id: 'note_body', name: 'note[body]'  %>
  <div class="right" id='preview'></div>

  <div class="actions">
    <%= f.submit "投稿!" %>
  </div>
<% end %>

↓このコードをどこに書いていけば良いのかがわかりません.....
自分なりにapp/assets/javascripts/app.coffeeに書いてみたのですが、appが無いですよというエラーが出たりもしていて全然わからないです....

app.controller 'parsedMarkdownCtrl', ['$scope', ($scope) ->
  $scope.parseMarkdown = ->
    $("#preview").html(marked($scope.body))
]

自分で解決するのは難しいと判断したため、、質問させていただきました。
どんなことでも良いので、回答いただけますと本当に嬉しく思います。
お休みの中お手数おかけしますが何卒よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

簡単なサンプルを作成してみたので参考にしてみてください。

実際動くリンク

html
1<html ng-app="myApp">
2<head>
3<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.1/angular-sanitize.min.js"></script>
6<script>
7  angular.module('myApp', ['ngSanitize']).controller('MyController', function($scope) {
8    // 分かりやすく初期値を入れています
9    $scope.content = '## aaaaaaa';
10    $scope.preview = marked($scope.content);
11    
12    // テキストエリアに変更があった場合の処理
13    $scope.parseMarkdown = function(){
14      // マークダウン形式に変更
15      $scope.preview = marked($scope.content);
16    }
17  });
18</script>
19
20</head>
21<body ng-controller="MyController">
22  <div>
23    <textarea ng_change="parseMarkdown()" ng_model="content"></textarea>
24    <div ng-bind-html="preview"></div>
25  </div>
26</body>
27</html>

投稿2017/01/14 12:36

編集2017/01/14 12:38

pinpikokun

総合スコア376

big2017

2017/01/14 18:03

回答いただきありがとうございます!わざわざサンプルまで作っていただいたおかげで、とてもわかりやすくangularの理解が進みました。しかし、railsのフォームを入力する際リアルタイムでプレビューをすることがまだできていない状態です..... 以下のコードです ``` // テキストエリアに変更があった場合の処理 $scope.parseMarkdown = function(){ // マークダウン形式に変更 $scope.preview = marked($scope.content); //リアルタイムに反映 } ```` ここに関しては明日も考えてみますので、すみませんがもう少々お待ちください。解決した際にはこちらに共有させていただきます。

行動規範の内容に同意します