Angular.jsで作るノートパッドWebアプリケーション

個別データ表示用のClickイベントの登録

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボタンにClickイベントを登録して、作成した新規ノートデータ追加関数を発動させる方法について解説致します。
講師:
02:59

字幕

このレッスンでは ボタンに clickイベントを登録して 前回のレッスンで作成した 新規ノートデータ追加関数を 発動させる方法について解説いたします まずはダウンロードしてきた こちらの「add_event」という フォルダの中に入っている htmlファイルと cssファイル そして JavaScriptファイルを エディタで開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それではさっそく レッスンを始めていきましょう 「note.js」ファイルを エディタで確認してみましょう 前回のレッスンで こちらの「$scope.addNote」 という形で 新規ノートを追加するための 関数を定義しましたね 今回は この関数を ボタンをクリックすることによって 呼び出して 発動させる方法について解説いたします それでは htmlファイルに戻ります 今回 注目していただきたい部分は こちらの部分となります こちらの部分は 「追加ボタン」という形で 「button」タグで作成していますね こちらの「button」タグの中に この部分 「ng-click」というものを記述してあげます そして「=」と書いて その後に 「"addNote()"」という形で 前回のレッスンで作成した 新規ノートを追加するための 関数を書いてあげるわけです このように書いてあげることで このボタンをクリックしたときに この「addNote」の関数が 実行されるわけですね それでは具体的に どのように動作するのか この htmlファイルをブラウザで 確認してみたいと思います こちらのファイルをブラウザで開きます すると このように表示されてきましたね 先ほどの「button」タグは この部分となります それでは クリックしてみましょう すると このように 「新しいノート」というタイトルが付いて 新規のノートデータが作成されてきましたね もう一度 押してみましょう すると同様に 「新しいノート」という形で追加されました このように 新規のノートデータが 追加されてくれば プログラムの実装は きちんとできている といった形になります 以上で レッスンは終了です 今回は ボタンに clickイベントを登録して あらかじめ作成しておいた 新規ノートデータ追加関数を 発動させる方法について解説いたしました 以降のレッスンでは 入力フォームの入力状態を監視して 新たに内容が入力されたら 新規でノートデータを追加する方法について 解説いたしますので そちらも併せてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

1時間35分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年11月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。