掲示板の作成からはじめるAngularJSアプリ入門の手引き
入門編ではベースとなるhtmlを作成
AngularJS入門ガイドの入門編としてAngularJSの機能を載せるhtmlを作成する。
準備編以降、
- AngularJS Modelの使い方
- AngularJS Controllerの使い方
- AngularJS Viewの使い方
- AngularJS Two-Way Data Bindingの使い方
- AngularJS Behaviorの使い方
- AngularJS Filterの使い方
- AngularJS Ajaxの使い方
の順序で記事にしていく。
掲示板の仕様というか機能は以下のような感じにする。
- SPA(single page application)
- スレッドに対して回答をレスポンスする機能
- 回答総数の表示
- ツリー表示
- レスの無い回答の絞り込み
- バックエンド連携・データの永続化
画面遷移の無い、ユーザーアクションとデータがバインディングされた掲示板をAngularJSで開発するポイントを簡潔にまとめて書いてみたい。
Model編からFilter編まで進めると下の画像のようなAngularJSアプリが出来上がる。
なお、完成系のソースコードをダウンロード可能な状態にしてあるので参考にして頂きたい。
ダウンロードしたzipファイルを展開すると、
- bbs.json
- bbs-ajax.html
- bbs-normal.html
上の3つのファイルが保存されている。bbs-normal.htmlは単体で動作するangularアプリで、bbs-ajax.htmlのほうはModelデータをAjaxで取得するようになっている。Ajaxで取得するデータがbbs.jsonになる。
入門編ではHTMLを作成するのだが、zurb foundationを利用してフロント側のデザインを構成することにした。
レスポンシブなフォームを組む
htmlの
- head
- body
に分けてコードを載せてみる。まずはheadタグ内であるが、
<!DOCTYPE html>
<html>
<head>
<title>掲示板の作成 - AngularJS入門ガイド</title>
<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script>
var model = {};
</script>
</head>
<body>
</body>
</html>
foundationとAngularJSはcdnで読み込むようにした。その下のscript要素で
空のmodel変数
を定義している。この変数の中身の詳細は、Model編で扱うテーマになる。
htmlのbodyタグの中身は以下のように構成した。
<div class="row"> <div class="large-12 columns"> <h1>スレッドのタイトル</h1> </div> </div> <div class="row"> <div class="large-12 columns"> <div class="panel"> <div class="row"> <div class="large-6 columns"> <form> <div class="row"> <div class="small-3 columns"> <label for="right-label" class="right inline">回答文</label> </div> <div class="small-9 columns"> <textarea id="right-label" placeholder="文章を入力" ng-model="Body"></textarea> </div> </div> <div class="row"> <div class="small-12 columns"> <button class="right inline" type="submit">回答する</button> </div> </div> </form> </div> <div class="large-6 columns"> <div class="row"> <div class="small-2 columns"> <span class="radius label">0</span> </div> <div class="small-10 columns"> <ul class="inline-list"> <li>テストの回答</li> <li><label><input type="checkbox" /> ツリーを表示</label> <ul class="inline-list"> <li>回答へのレスポンス</li> </ul> </li> </ul> <div class="checkbox-inline"> <label><input type="checkbox"> すべての回答を表示</label> </div> </div> </div> </div> </div> </div> </div> </div>
上から、
- スレッドのタイトル
- 回答入力フォーム
- 回答の表示
という構成でHTMLを組んである。
上で載せたhtmlをコピーして適当なファイル名(index.htmlなど)で保存し、ブラウザで開けばほぼHTMLのみではあるが掲示板アプリが表示される。
入門編は以上です。Modelの使い方へ