AngularJSで、時間のかかる通信の間にモーダルを使ってプログレスバーを表示する - ブログ - ワルブリックス株式会社
時間のかかる非同期通信を行っている間は、通信中であることをユーザーに知らせつつユーザーによる画面操作を禁止したほうが良いことがある。UI Bootstrapのモーダルとプログレスバーでこれを行う方法を示す モダンな Webアプリケーションはいわゆる Ajaxという方式でサーバと非同期で通信することで画面に表示するための情報を取得したりユーザーの入力をサーバに送信したりする。同期通信と異なり、非同期通信の場合は通信中もユーザーインターフェイスがユーザーと対話出来るため、通信中にユーザーが画面操作を行うことにより別のアクションを起こされては困る場合には特別の配慮が必要である。 例えば、クレジットカードの決済画面でユーザーが送信ボタンを押しサーバとの通信が行われている数秒の間に送信ボタンが再度押されたり、メニューを操作して別の画面に飛ばれたりしてしまっては困るといった具合だ。クレジットカード決済
AngularJSで HTML5的なアラートウィンドウを表示する - ブログ - ワルブリックス株式会社
手前の方にポップアップしてメッセージを伝え、ユーザーの了承を促すアラートウィンドウ。JavaScript標準の window.alertでは味気ないので、もっと HTML5的に表示してみる。 モーダルとだけ言うと日本ではあまり聞き慣れない言葉だが、ユーザーインターフェイス用語としてはかなり昔から存在する「モーダル・ダイアログボックス」を示す。ユーザーとの対話が終了するまで必ず画面の最も手前に居続け、表示されている間はその外にアクセスさせないようになる、よくあるダイアログボックスをいう。Web製作の現場ではポップアップと呼ばれることも多い。 JavaScriptの window.alertや Windows APIの MessageBox で表示されるメッセージウィンドウもモーダルの一種である。 AngularJSそのものはユーザーインターフェイスを提供しないのだが、Bootstrapを組み
AngularJSでBootstrapのModalを出す方法メモ - DRYな備忘録
問題 AngularJSと、Bootstrapのui.bootstrap使ってて BootstrapのModal機能とか使いたくなるけれど Angular的なControllerや$scopeの扱いが混乱したのでメモ 参考 公式: Angular directives for Bootstrap サンプル 親View。対応するControllerのメソッドをふつうに呼んでるだけ↓ <!-- モーダル開く親側のView --> <ul> <li data-ng-repeat="task in tasks"> <span>{{task.name}}</span><a href="#" data-ng-click="openDeleteConfirm(task)">さくじょ</a> </li> </ul> 親Controller。もちろんopenDeleteConfirmをexportしてる。そ
AngularJSと UI Bootstrapで日付と時刻の入力をする - ブログ - ワルブリックス株式会社
カレンダーをポップアップさせて日付を選択する方式の日付入力を AngularJSで実現する方法 Webのフォームを実装する際にいつも面倒な項目といえば日付時刻だ。年・月・日とそれぞれ別のinput要素やselect要素を設けるにせよ、書式を決めてひとつのinput要素に入力してもらうにせよ、ユーザーの入力が正しいことをそれなりに深く検証しなければならない（例えば4月31日などという入力を許すべきではないし、2月29日という入力を許容するかどうかは年までチェックする必要がある）。まして日付だけでなく時刻までユーザーが間違いにくいように入力させるとなればなおさら面倒ということになる。 ユーザーの日付入力を補助するためによく使われるのが Datepicke（デートピッカー）と一般的に呼ばれるUIコンポーネントだ。日付を入力するためのテキストボックス（やその横のボタンなど）をクリックすれば、カレン
Angular directives for Bootstrap
UI Bootstrap Bootstrap components written in pure AngularJS by the AngularUI Team Code on Github Download (2.5.0) Create a Build Angular 2 For Angular 2 support, check out ng-bootstrap , created by the UI Bootstrap team. Dependencies This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is re
AngularJSではじめるHTML5開発 – Part1 Getting Started at nkjmkzk.net
これから数回に分けてAngularJSでHTML5アプリを開発していきたいと思います。 開発環境は最高のHTML5プラットフォームであるForce.comですが、Force.comおよびAngularJSをまったく使ったことがない開発者の方々でも試せることを前提にした内容です。 ただし一点、一応IE以外で検証ください。 今回は最初の最初、ゼロからはじめてForce.com上でAngularJSが動くまでを解説していきます。 まずこのPart1で開発する部分をデモでみてみましょう。 デモ それでは実装へ。 開発組織の入手 Force.comの開発環境は「Developer Edition」と呼ばれ、誰でも、いくつでも、いつまででも無料です。さらに本番環境で利用できるほぼすべての機能が利用できます。なんということでしょう。 ということで、まずは下記のサイトからこのDeveloper Editi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
