タイトル通り。。。 http://docs.angularjs.org/api/ng.directive:ngInit マニュアル良く読もうね!!俺。。。orz <input type="text" name="name" ng-model="name" value="<?- param ?>" ng-maxlength="5" required /> とかして、あれー。。。なんでー??テンプレートエンジン使ってるから?とか意味もなく、悩んでました。 正解は、 <input type="text" name="name" ng-model="name" ng-init="name='<?- param ?>'" ng-maxlength="5" required /> ってすれば、テンプレートエンジンと組み合わせても全く問題ないですね!!
前回の続きです。 今回はDirective(ディレクティブ)についてです。 ngModelやngRepeatなどを既に使っているのでディレクティブがどんなものかは大体分かっているかと思います。 ビルドインのディレクティブ一覧 => http://docs.angularjs.org/api/ng#directive なので早速ですがディレクティブを作ります。 単純なディレクティブ レイアウトを持たず、動作を追加するディレクティブを作ってみます。 ちょうどTwitter Bootstrapが雛形に使われているので、リンクにツールチップを追加します。 <p> <input type="text" ng-model="world"> <span ng-click="addFramework(world)" class="btn btn-primary">Add</span> </p> <p>He
時間のかかる非同期通信を行っている間は、通信中であることをユーザーに知らせつつユーザーによる画面操作を禁止したほうが良いことがある。UI Bootstrapのモーダルとプログレスバーでこれを行う方法を示す モダンな Webアプリケーションはいわゆる Ajaxという方式でサーバと非同期で通信することで画面に表示するための情報を取得したりユーザーの入力をサーバに送信したりする。同期通信と異なり、非同期通信の場合は通信中もユーザーインターフェイスがユーザーと対話出来るため、通信中にユーザーが画面操作を行うことにより別のアクションを起こされては困る場合には特別の配慮が必要である。 例えば、クレジットカードの決済画面でユーザーが送信ボタンを押しサーバとの通信が行われている数秒の間に送信ボタンが再度押されたり、メニューを操作して別の画面に飛ばれたりしてしまっては困るといった具合だ。クレジットカード決済
はじめに AngularJSにすこしずつ慣れてきたような気がします。 まだまだですが、がんばります。 さて、入門編として、ToDoを作成しました。次は、カレンダーを作りたいと思います。 完成すれば、ToDo機能をカレンダーに組み込んで、カレンダーアプリにしたいと思います。 まぁ、Googleカレンダーを使ったほうが便利ですが。。。 カレンダーの作成 まず、カレンダーデータの作成を行います。 var MyApp = angular.module('calendarApp', []); MyApp.service('CalendarService', [function () { this.header = function() { return ["月", "火", "水", "木", "金", "土", "日"]; } this.calendar = function() { var da
I have this form : http://jsfiddle.net/dfJeN/ As you can see the name value for the input is statically set : name="username" , the form validation works fine (add something and remove all text from the input, a text must appears). Then I try to dynamically set the name value : http://jsfiddle.net/jNWB8/ name="{input.name}" Then I apply this to my validation login.{{input.name}}.$error.required (t
AngularJSのformディレクティブは強力なバリデーション機能を提供します。 以下は基本的な使用例です。 <form name="form"><!-- 1 --> <input type="text" name="firstName" ng-model="user.firstName" required><!-- 2 --> <span ng-show="form.firstName.$error.required">何も入力されていません。</span><!-- 3 --> <button ng-disabled="foo.$invalid" ng-click="submit()">submit</button><!-- 4 --> </form> 番号ごとに説明すると formのname属性を設定します。ここではname="form"としています。 formのプロパティからfor
判決: まあまあ(でもないか) 一体何の話なのか? 私は2年間、Angularにのめり込んでいました。 それぞれの考えを持つさまざまなチームによる、10以上のAngularベースのプロジェクトを見守り、関わってきました。 1年目はフレームワークの採用、APIの変更、ドキュメントの改良、コミュニティの形成を注視して過ごし、徹底的に習得しました。 2年目は実務に全面的に携わり、チームメンバーの意見を聞きました。 私の意見は、 Angular.jsは大多数のプロジェクトには“まあまあ”だが、本格的なWeb アプリ開発には不十分である ということです。 “本格的なWebアプリ”とは? “本格的なWebアプリ”というのは、長期の 保守が可能 で、最新の一般的なブラウザで 実行できる 、 スムーズなUX を備えた、 モバイルフレンドリー なアプリのことです。 専門家が開発したWebアプリは単なるアプリ
AngularJSのサービス AngularJSにおけるサービスとは、アプリにおいて任意のタスクを実行する関数として使用されます。 例えば、AngularJSではajax通信用に$http組み込みサービスを持っています。 もちろん、サービスを自分で定義して使用することも可能です。 AngularJSでビジネスロジックはサービスとして実装されることが推奨されているため、 独自サービスを作成する機会は多いと思います。 その独自サービスをAngularJSで作成するには複数の方法があるので、それらの方法を確認してみましょう。 今回使用した動作環境は以下のとおりです。 なお、本記事で紹介しているコードは、以前作成したangular-seedを使って動作を確認しました。 OS : MacOS X 10.9.2 node.js : 0.10.24 Git : 1.8.5.2 サービスを使う Angul
手前の方にポップアップしてメッセージを伝え、ユーザーの了承を促すアラートウィンドウ。JavaScript標準の window.alertでは味気ないので、もっと HTML5的に表示してみる。 モーダルとだけ言うと日本ではあまり聞き慣れない言葉だが、ユーザーインターフェイス用語としてはかなり昔から存在する「モーダル・ダイアログボックス」を示す。ユーザーとの対話が終了するまで必ず画面の最も手前に居続け、表示されている間はその外にアクセスさせないようになる、よくあるダイアログボックスをいう。Web製作の現場ではポップアップと呼ばれることも多い。 JavaScriptの window.alertや Windows APIの MessageBox で表示されるメッセージウィンドウもモーダルの一種である。 AngularJSそのものはユーザーインターフェイスを提供しないのだが、Bootstrapを組み
例えば「趣味は何ですか?」に対する回答はいくつになるかわかりません。 「料理」と答える人もいれば、「ゴルフ」と「TVゲーム」と「ショッピング」と答える人もいるかもしれない。 今回はこのように、あらかじめ幾つになるかわからない項目に対する入力画面を作るときに、AngularJS使うと簡単にできるよ、というお話です。 この例のような場合によくある入力画面は、複数行の入力欄があり、行ごとに削除ボタンがあって、入力した内容が消せるようになっており、最後の行だけは「削除」ボタンのでなく「追加」ボタンがあって、入力欄を一つずつ動的に増やせるってやつです。 こんなイメージのやつです。これはボタン押しても動きません。 ここに動くコードを置いときました。 http://jsfiddle.net/2Y88u/ 趣味の名前=月に何回やる? 趣味の名前=月に何回やる? 趣味の名前=月に何回やる? これを、Angu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く