最近AngularJSってのを勉強中。Yeomanってのでangular-fullstackをセットアップすると何やらベストプラクティスっぽい雛形ができて便利らしい。それのクライアントサイドのコンポーネントにモーダルダイアログのサンプルがあるけど使っていないっぽい。
モーダルのサンプルは何かのリソースを削除するときの確認ダイアログなので、ユーザー削除時に確認ダイアログを出してみよう。
準備
angular-fullstackをセットアップするところまでは、いろいろ他の人が書いているのでここでは書きません。例えばこことか。
選択した項目は次のとおりです。
Babel, HTML, Less, uiRouter, Bootstrap Y, UI Bootstrap Y, Mongoose, authentication boilerplate Y, Google/Facebook/Twitter, socket.io N, Grunt, Jasmine
変更点
変更するファイルは /client/app/admin/admin.controller.js です。
変更前
/client/app/admin/admin.controller.js
'use strict';
(function() {
class AdminController {
constructor(User) {
// Use the User $resource to fetch all users
this.users = User.query();
}
delete(user) {
user.$remove();
this.users.splice(this.users.indexOf(user), 1);
}
}
angular.module('sampleApp.admin')
.controller('AdminController', AdminController);
})();
変更後
/client/app/admin/admin.controller.js
'use strict';
(function() {
class AdminController {
constructor(User, Modal) {
// Use the User $resource to fetch all users
this.users = User.query();
this.modal = Modal;
}
delete(user) {
var deleteConfirmationModal = this.modal.confirm.delete((user) => {
user.$remove();
this.users.splice(this.users.indexOf(user), 1);
});
deleteConfirmationModal(user.name, user);
}
}
angular.module('sampleApp.admin')
.controller('AdminController', AdminController);
})();
よくわかんないけど、これでいいのかな？
結果
できた 
ではまたね。