Anguler.jsで超簡単なタスクリスト作ってみた

カテゴリ:新技術開拓記

公開日:2020.06.09 最終更新日:2020.06.15
このエントリーをはてなブックマークに追加

こんにちは。inglowの開発担当です。
今回は最近よく耳にするjavascriptのライブラリ「Anguler.js」で非同期通信で作るタスクリストを制作してみました。

今回使った技術は下記です。

  • HTML5
  • CSS3
  • javascript(anguler.js)

今回作るもの

今回は、「非同期通信」でタスクを登録し、登録したタスクを一覧に反映するという動きを作ってみます。また、一覧の上に、検索用のテキストボックスを用意して、テキストでタスクを検索できるようにしてみます。

制作

見た目から順番に制作を進めていきます。

HTMLをコーディング

ここに、Anguler.jsのControllerの設定等を組み込んでいきます。

Anguler.jsでControllerの準備

javascriptでControllerを準備していきます。

変数としては、リストとして表示するタスクデータ($scope.tasks)、登録するためPOSTするタスクのデータ($scope.addtask)、検索フィルタの条件入力用のデータ($scope.searchtxt)を準備します。関数は、タスクリストの取得のため通信する関数と、新しいタスクを登録(POST)するための関数を準備します。

HTMLを編集

最初に記述したHTMLにanguler.jsの内容を埋め込んでいきます。
データバインディング(「ng-model=””」等)やテンプレートの機能(「{{task.title}}」等)を使っていきます。

実物

ajaxの部分をローカルで作成したため、今回はスクショでご紹介します。

最初にアクセスしたときにタスクのリストを取得(HTMLで指定された、ng-init=”init()”で指定された、$scope.init()が実行される)

タスクを登録するときは、ページ上部のフォームに入力し、登録ボタンを押します。非同期通信でPOSTされ、登録内容が返ってきてタスクリストに追加されます。

表示を絞り込む際には、「検索したいテキスト」に入力すると、対象のタスクのみが表示されるようになります

さいごに

jQueryだと、データが増える際に要素を追加する処理を各必要がありましたが、Anguler.jsではデータに連動してHTMLが再度描画されるので、とても便利だなと感じました。
今はやりのシングルページアプリケーションも、Anguler.jsであれば少し敷居が低く、開発がしやすいかなと感じしました。今後ぜひ作ってみたいです。

一覧へ戻る