読者です 読者をやめる 読者になる 読者になる

How IT Works

プログラマーやっています。技術よりも人間学的なところが好きです。

ASP.NET+Angular1.x+TypeScriptでTodoアプリのサンプルを作りました

前書き

 タイトルの通りAngular1.x系を使って、Todoアプリを作ってみました。

 基本的にはページを閉じるとデータが消えてしまうので実用性はありませんが、技術的な参考にはなるんじゃないかと思います。

github.com

完成イメージ

f:id:dexia2:20161218114830j:plain:w300

使用した技術

 GitHubのREADMEにも書きましたが、こちらにも一応書きます。

  • ASP.NET Core
    • VS2015で作成
    • APIとWebともに、ASP.NET Core上で動かしています。
    • C#
  • Angular1.x
    • Angular Resource
  • BootStrap
  • JQuery UI
  • TypeScript

特徴

Single Page Application(SPA)

 このアプリはページ遷移を行わないようなSPAになっています。画面の更新は基本的にAngularに任せるようにしています。

 また、データの取得はWebAPI経由で取得しています。更新や削除は今のところインメモリでやっています。

Windows FormsっぽいUI

 UIはJQueryUIのDialogを使用しています。

 この技術を選択した理由としてはAngularとの相性が良さそうだったからです。他のダイアローグのライブラリはiframeを使っているものが多く、Angularらしさがあまり出せない感じでした。

 その点、JQueryUIのDialogはDOMでダイアローグを表現するので、そのままAngularと組み合わせることができました。

 Angularと組み合わせているところは下のよう感じです。

// 画面のキーの採番
var guid = this.getGuid();

//ダイアローグを開く
$(`<div class = "dialog" id = ${guid}></div>`).dialog(dialogOption);

//ダイアローグにAngularのviewを差し込む
var $dialog = $(`#${guid}`);
var includeHtml = `<div ng-include="'${config.path}'"></div>`
var scope = angular.element($dialog).scope();
$dialog.append(this.$compile(includeHtml)(scope));

 viewの展開はng-includeを使っています。これをコンパイルして、ダイアローグに差し込むことで画面を表現しています。

 ちなみにGUIDが出てきていますが、これは画面のインスタンスごとの固有のIDになります。これを使って、画面を閉じたり、返り値をとったり、パラメータを受け渡ししたりしています。

TypeScriptらしい書き方

 TypeScriptを利用しているので、できる限りfunctionではなくクラスを渡してサービスやコントローラを定義するようにしています。

/**
 * Todoサービス
 */
class TodoService {
//省略。。。
}

app.service("TodoService", [
    "$resource",
    TodoService
]);

感想

 普通、Angular1.xを使ったSPAというとui-routerを使うものなのでこれは少し邪道な感じもしますが、一応SPAではあります。

 現状だと、戻る機能が使えなかったり、URLでの遷移ができないという欠点はありますが。

 とはいえ、Angular1.xの基本的な機能の使い方は押さえていて、Windows開発でよく使う技術(ASP.NETC#+TypeScript)で書いたので参考にはなるかなとは思います。

 興味があれば見てみてください。