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

ノートデータ処理用のコントローラーの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Webアプリケーション内でノートのデータを処理する為の、Angular.jsのコントローラーを作成する方法について解説致します。
講師:
03:36

字幕

このレッスンでは Webアプリケーション内で ノートのデータを処理するための Angular.jsのコントローラーを 作成する方法について 解説いたします まずはダウンロードしてきた こちらの「note_controller」という フォルダーの中に入っている 「HTMLファイル」と「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう まず 今回作成する コントローラーですが Angular.jsの特徴である MVCモデルの中の Cの部分にあたります コントローラーは Mの「Model」のデータを処理して Vの「View」に表示させる 中間的な役割を担う部分です それでは そのコントローラーの作り方を 見ていきたいと思います 注目して頂きたい部分は こちらの部分となります この部分ですね HTMLの「div」タグの中に 「ng-controller=」と書いて 「"NoteController"」と書いています このように書くことで この「ng-controller」が記述された この「div」タグで囲まれた こちらの部分ですね この部分が この「NoteController」という 名前のコントローラーで 管理できる部分となります そしてこのように HTMLファイル内で 「ng-controller」と書いたら 今度は JavaScriptファイルの中で それに応じた JavaScriptの処理を書いてあげます それでは 「note.js」のファイルを開いてみましょう 注目して頂きたいのは こちらの部分ですね まずは こちらの 「angular.module」の後ろに 続くような形で 「.」と書いて 「controller」と書きます そして 「()」を書いて その中に引数を入れてあげます まずは 先ほど「HTMLファイル」の中に書いた コントローラーの名前と一致させる形で 「NoteController」と書いてあげます そして その後には 「['$scope'」と書いて 「function($scope)」と書いて 「{}」と書いて処理を閉じていますね このように書くことで この「function」の後の 「{}」の中に 今後記述していく 様々なモデルや処理を 先ほど「index.html」に書いた こちらの「NoteController」 この部分ですね この部分の「div」タグで囲まれた これらの部分に 適用させることが可能となってきます 少々難しく感じるかもしれませんが これらの部分は 定型文のような形で 覚えておくと良いでしょう 以上で レッスンは終了です 今回は Angular.jsのコントローラーの 作成方法について 解説いたしました 以降のレッスンでは Webアプリケーション内で利用する ノートのデータを あらかじめ作成しておいて アプリケーション内で 保持しておく方法について 解説いたしますので そちらもあわせてご覧ください

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

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

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

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

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

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