AngularJS使い方ガイド 入門編

掲示板の作成からはじめるAngularJSアプリ入門の手引き

入門編ではベースとなるhtmlを作成

AngularJS入門ガイドの入門編としてAngularJSの機能を載せるhtmlを作成する。

準備編以降、

の順序で記事にしていく。

掲示板の仕様というか機能は以下のような感じにする。

  • SPA(single page application)
  • スレッドに対して回答をレスポンスする機能
  • 回答総数の表示
  • ツリー表示
  • レスの無い回答の絞り込み
  • バックエンド連携・データの永続化

画面遷移の無い、ユーザーアクションとデータがバインディングされた掲示板をAngularJSで開発するポイントを簡潔にまとめて書いてみたい。

Model編からFilter編まで進めると下の画像のようなAngularJSアプリが出来上がる。

using-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の使い方

参考
angular-seedでAngularJS入門

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

AngularJS使い方ガイド 入門編の記事にコメントを投稿