Angularでwiki作成画面を作ってみた

目的

研究室wikiツールのフロント作成
メンバーにリアルタイムでpreviewの更新をして欲しいと言われたのでchangeイベント使ってるから重いかもしれないがご愛嬌

使用したライブラリ

marked.js

やったこと

marked.jsのインストール
bower install marked

その後読み込み

index.html

<script src="bower_components/marked/lib/marked.js"></script>

モジュール化

app.coffee

angular.module('marked',[]).factory 'marked', ()=> @.marked

コントローラーの記述

wiki.coffee

angular.module('Sample').controller 'WikiCtrl', ($scope, marked) ->
  $scope.markdown = ''
  $scope.previe = ''
  $scope.markdown_change = () ->
    $scope.preview = marked($scope.markdown)

viewの記述

wiki.haml

.editor
  %h2 Markdown
  %textarea#editor-area{'ng-model'=>'markdown', 'ng-change'=>'markdown_change()'}
.preview
  %h2 Preview
  %p#preview-area{'ng-bind-html'=>"preview"}

これでテキストエリアにマークダウンを書けばリアルタイムでプレビューに更新されます