ASP.NET＋Angular1.x＋TypeScriptでTodoアプリのサンプルを作りました
前書き
タイトルの通りAngular1.x系を使って、Todoアプリを作ってみました。
基本的にはページを閉じるとデータが消えてしまうので実用性はありませんが、技術的な参考にはなるんじゃないかと思います。
完成イメージ
使用した技術
GitHubのREADMEにも書きましたが、こちらにも一応書きます。
特徴
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.NET＋C#＋TypeScript）で書いたので参考にはなるかなとは思います。
興味があれば見てみてください。
