投稿型サイトをつくってみます

話題コメントアプリというか、投稿型サイト？の続きです。

左のプレーンに話題一覧、右のプレーンに話題の詳細を表示するようにしました。
画像では話題が１つだけですが。

右の話題の詳細が途中で切れてますが、下にコメント入力欄があります。
この辺は前回までに実装したものを少し整えただけですね。

今回は、話題を投稿する画面を追加しコードを見直しました。
画面上の「記事一覧」と「記事を書く」の２つのリンクで画面が切り替わります。
初期状態では「記事一覧」が表示されます。

「記事を書く」をクリックするとこのような画面になります。…あっさりしすぎなのでもうちょっとどうにかしますが。

投稿するとこのような感じに。

前回まではtopic.htmlというhtmlファイルにすべて書いていましたが、今回はAngular.jsのdirectiveを使って記事一覧(topic-list.html)と記事を書く(write-topic.html)の２つのファイルに分けました。
さらに、topic.htmlからindex.htmlに変更しています。

ソースコードはこちら
https://github.com/matildatilda/topic-sample

投稿データの追加操作はaddTopicで行っています。こうしてコードを整理すると、少しはMVCらしい感じになったような気がします。
htmlも分割するすることで見易くなりました。コントローラーのjs部分はサンプルなどを参考に実装しただけなので、もう少し複雑なことをしようとするとどんどん膨らみそうですね。よく考えて機能を切り分けていかないと。

さて、次回の修正ポイントをまとめてみます。

• 投稿を修正する
• 投稿を削除する

コメントの修正・削除は…いいや。

今日はこの辺で。