AngularJS使い方ガイド Controller編 | Webエンジニアブログ

Controller編では掲示板データの一覧取得と新規投稿機能を実装する

AngularJSを利用した掲示板アプリのController編では、

Modelの使い方で定義したデータをAngularJSのControllerで扱ってみようと思う。そして、View側で利用可能な状態にする。

Model編でデータの定義とmoduleの設定が完了しているため、Controllerメソッドを利用することが可能。

bbsApp.controller("BbsCtrl", function ($scope) {
	$scope.thread = model;
});

Controllerを定義したらHTMLのbodyタグに

ng-controllerディレクティブ

を追加してBbsCtrlで設定した$scopeを利用可能な状態にする。

<body ng-controller="BbsCtrl">

今回はbody全体を指定しているが、より小さなHTML領域にng-controllerを設定することも可能。

Controllerで$scopeにモデルデータを設定した。この設定によりView側でthreadとしてデータにアクセス可能となる。簡単ではあるが、掲示板データの一覧取得機能が実装された。

console.log($scope.thread);

Model編でデータをデバッグ表示させた要領で、上のコードで$scopeでデータを参照することが可能か確認することができる。

上で定義したController内に新規投稿機能を実装する。

$scope.addAnswer = function (Body) {
	$scope.thread.answers.push({ body: Body, tree: false });
	$scope.Body = "";
}

一覧取得の際はmodelデータを設定したが、今回はBody引数付きのfunctionを$scopeに設定している。新規投稿なので、入力フォームから回答データを取得して、データ構造に一行追加処理を行っているのだが、このあたりはViewのコードもセットで見てみたほうが良い。

入門編で載せた純粋なHTMLを一部AngularJS化する。

<textarea id="right-label" placeholder="文章を入力" ng-model="Body"></textarea>

ng-modelディレクティブを利用してフォームの入力データをバインディングした。さらに、

<button class="right inline" ng-click="addAnswer(Body)" type="submit">回答する</button>

ng-clickにControllerで設定したaddAnswer()を指定すれば、Model編で定義したデータ構造に回答データが追加される。

console.log($scope.thread);

を設定した上で、ブラウザからフォーム経由でデータを入力すると$scopeに新しいデータが追加されることを確認できる。

Controller編は以上です。Viewの使い方に続く

AngularJS使い方ガイド記事一覧