Model編では掲示板アプリのデータ構造を定義しmoduleを設定する
json形式のデータ構造をjavascriptで定義
入門編に続いてModel編になる。
Model編でもAngularJSの使い方入門編同様、AngularJSの機能について直接ふれることはほとんど無い。しかし、掲示板アプリのサンプルデータをどのように定義するのか書いてみる。AngularJSの機能を利用してサンプルデータをどのように利用し、どのようにデータが変化していくのかイメージできるようになることを目的としたエントリーである。
サンプルデータを下のように定義した。
var model = {
title: "メジャーリーグと日本の野球について",
answers: [
{ body: "大リーグはおもしろい", tree: false },
{ body: "イチローとマー", tree: false },
{ body: "日米野球摩擦",
tree: [
{ response: "Goodbye baseball", tree: false },
{ response: "イチローのファインプレー", tree: false },
{ response: "ピッチャーのベースカバー", tree: false }
] },
{ body: "野茂のトルネード", tree: false }
]
};
入門編ではmodel変数を空として定義したが、その変数に実データを投入したのが上の状態になる。掲示板のスレッドタイトルとそのスレッドに寄せられた回答、そして回答に付いたレスポンスというやや深い構造のデータを定義してみた。
このmodelというデータを利用してanswersを追加したり、responseを追加したりというデータ操作をController編では行う。
データ構造を定義したただけなので、上のコードを追加してブラウザを更新しても見た目が変わることは無い。しかし、
console.log(model);
とすることで、ブラウザのjsインスペクタを利用してデータを表示させることができる。
console.log(model.toSource());
とすれば、よりデータ全体を見やすく表示することができる。
angular.moduleの設定
Controller編では、モデルデータを操作するためのコードを書いていくわけだが、その前にAngularJSのmodule設定が必要になる。module設定は以下のコードを追加することで可能。
var bbsApp = angular.module("bbsApp", []);
moduleの設定をすることでController用のコードを書くことができるようなる。Controllerだけでなく、
- factory
- service
- value
- constant
- filter
- directive
などの
Angular Method
を利用したコードを書くことができる。
module設定をしたら、HTMLのソースコードの先頭を付近にあるhtmlタグにng-appディレクティブを追加してModel編を終了とする。
<html ng-app="bbsApp">
Controllerを追加していくための準備が整った。Controllerの使い方へ
AngularJS使い方ガイド一覧