AngularJSを使ってみよう

AngularJSとは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AngularJSでどのようなことができるのか、またコースを通じてつくるサンプルも簡単にご紹介します。
講師:
06:24

字幕

このレッスンでは AngularJS というフレームワークを使うと どのようなことができるのか 簡単にご紹介します また このコースを通じて作る サンプルもご紹介します サンプルはこちらです アーティストの名簿ということで 一人一人の情報が表示されています これらはソートをかけることが出来ます 人物情報というのは 下に書いてある部分ですけれど 名前順 昇順がデフォルトですけれど 降順にも並べ替えができます 更に検索もできまして 例えばこの辺に Hillary さんといるのですけど hil... l まで入れると 一人に絞られますね あるいは Jennifer さん jen で絞られました このような検索の機能を フィルターというのですけど 付け加えることができます 更に 誰か一人をクリックすると その人の情報が表示され それから順番に表示する人を 切り替えることができます これらはすべて AngularJS が 動的に情報を差し替えています しかも今ページが 2つあるように見えているのですが 実際にはページは メインは1つです その中を動的にまた 要素の構成を切り替えて ページが複数あるように見える そういったアプリケーションを作る フレームワークが AngularJS です 今開いている html ドキュメントが メインとなる index.html です script 要素で AngularJS の ライブラリが読み込まれています それから Java Script ファイルも 2つ定義されていて このタブの中に含まれています ずいぶんとさっぱりしていますね というのは この div 要素に 特別な属性のように見えるのですけど この ng- で始まるのは AngularJS に対する 命令の役割を持ちます ディレクティブと呼ぶのですが ng-view というディレクティブは ここをテンプレートで 切り替えるということになります ですから この中ではいろんなものが 入ってくるんですが とりあえずメインでは この ng-view という ディレクティブを指定するだけです そして実際にここに差し込まれる html の要素 これはテンプレートという名前に なっているのですけれど 別に html ドキュメントとして 指定されています ただ html ドキュメントの中を 抜き出した形になっていますので html 要素では始まりません この部分が先程の ng-view の所に 差し込まれるということです そして別のページに見えましたけれど これが一覧表のほうです 一覧表で一人をクリックすると 詳細ページに跳びました これがまた別のテンプレートになっています このテンプレートもやはり index のほうに差し込まれるので 実際の html ドキュメントとしては index.html 1つなんですね それをテンプレートで切り替える ということになります そして一覧表の方なんですが たくさん人がいたのですけど li 要素で1つ1つ表示していますが li 要素は1つしかありません ここもまた ディレクティブ 特別な命令で ng-repeat とあるのですが データを json から読み込んでいますけど json から読み込んで 1つ1つ取り出し その1つ1つの情報に対して それぞれ li 要素を作って差し込むという これもまた AngularJS が 行ってくれます そして何か見かけない2重波括弧で 囲まれた部分がありますね name reknown それから この img の要素にも入っていますが item.shortname これは json から読み込んだ プロパティをここで指定しています json ファイル こちらに開いているんですけど 配列の形で一人一人のオブジェクトの中に プロパティが name とか shortname reknown というふうに指定されています これらを取り出して このリストの中に その情報を含める ここは名前ですね それからその肩書のようなものです ファイル名を取り出して 動的に この li 要素の中身を 構成しているということです さて テンプレートは list と details と2つあるのですが このテンプレートをどのように切り替えるか ということを アプリケーションとして指定しています これは index のほうの ng-app というディレクティブで指定している myApp これが全体をコントロールする メインのアプリケーションの Java Script の指定になります app.js のほうで指定しているのですが この myApp がそうですね そして その中で今 テンプレート list と details があるのですが それぞれをコントロールする コントローラと呼びますけれど ListController それから DetailsController テンプレートに対応して それとで定められています これはまた別の Java Script ファイルになっていまして コントローラは AngularJS のメソッド controller というもので ListController それから DetailsController というものが定められています その中で 例えばここですね data.json この json データです これを読み込んで処理を行いなさい ということが指定されています こちらもその部分は 同様なのですけれど json データの読み込みと そして読み込んだものを それぞれAngularJS のほうで 要素として差し込み 必要なデータを埋め込む ということができるわけです このレッスンでは AngularJS というフレームワークで どのようなことを どのようにやっているのか ということを簡単にご紹介し コースを通じて作るサンプルもご紹介しました

AngularJSを使ってみよう

AngularJSはHTMLを拡張するフレームワークで、Webページを動的に生成できます。このコースではJavaScriptの基礎を学んだ方を対象に、AngularJSのインストールからWebアプリの作成までを実際にコードを書きながら解説します。JSONファイルから読み込んだデータリストの作成やデータの並べ替え・検索などを説明します。

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

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

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

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