AngularJSを使ってみよう

画像ファイルを表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
img要素にディレクティブで画像ファイルのパスを定めて表示します。
講師:
05:42

字幕

このレッスンでは AngularJS を使って img 要素に読み込む 画像を指定したいと思います 今画面には人物の情報があり その横にサムネイルの画像があります この画像を Angular のデータから 取ってくるというふうにしたいと思います 今開いている html ドキュメントには まだ img 要素の差し込みは行っていません けれども人物のテキスト情報は ここでは AngularJS のデータをとってきています まずアプリケーションですね ng-app には myApp という 設定がされていて その初期化がここで行われています モジュールが作られていますね 名前が myApp となっています そして controller MyController が設定され その第二引数の function の中で データが設定されています プロパティの名前が item その中に情報が入っているわけで 今度は controller は この div 要素ですね そこに ng-controller で設定してあり そしてその中の要素の h2 h3 とありますが そこで2重の波括弧で item の中の name item の中の reknown という この2つの プロパティの値が表示された という状態です 確認しておきましょう 「ファイル」>「ブラウザでプレビュー」 しておきます 情報だけですね テキスト情報だけが設定されています あと css の設定もされていますので ロールオーバーで形が変わったりもしますし 後 名前 それからその肩書の部分の 色やフォントの設定もされています html ドキュメントのほうに戻って img 要素を加えましょう この li 要素の下に div 要素と同階層ですね img を加えます ソース src ですね 参照します images の中の この人なんですけれど 開きます そして タグを閉じると これで img 要素が差し込まれました 但し これは AngularJS は 使っていません 普通の src 属性で 読み込んでいます 確認しましょう ファイルを一旦「保存」して ブラウザの方に移ります ブラウザのウィンドウを リロードしましょう ちゃんとサムネイルがでてきましたけれど これを AngularJS を 使った形で設定したいと思います まずデータのほうには少し仕掛けがありまして 今読み込んだ この画像のファイル名なんですが それはこちらで AngularJS に設定した controller に 設定したプロパティの shortname に対応しています そこに _tn サムネイルの意味なんですけど それを付け加えれば 画像と対応するというふうにしてあります ではここをどうするかというと この shortname を持ってこい ということですね これを使いたいということで 使いたいと思いますが その前に この src 属性 これを AngularJS の ディレクティブに変えます AngularJS のディレクティブは ng で始まりますね ng-src としておいて そうするとこの中に 2重の波括弧が使えるようになります shortname をコピーして 持ってきます JavaScript コードと違いますので 文字列を終えて 変数を繋いでと こんな書き方はする必要はありません もう 2重の波括弧を 入れてしまえば良いです ではこれで「保存」して 確認してみましょう ブラウザをリロードすると うまくいかないんじゃないか と思った方は 鋭いですね 表示がされません ちょっと失敗をしてみました では失敗を修正しましょう テキストの情報を読み込む時 例えば この name ですね item.name としてますよね というのは item というプロパティの中に name というプロパティがあり あるいは reknown という プロパティがあるので item. というふうにしなければいけないと 画像のほうも当然そうです item.shortname とすれば良いでしょう それから alt 属性ぐらい 入れておきましょうか alt の photo とします ちょっと } が1つ多いですね これを削除して では「保存」を押して ブラウザでもう1度確認します ブラウザのウィンドウをリロードしましょう サムネイルがでてきました このレッスンでは img 要素に AngularJS からデータをとってきて 画像を差し込みました その場合には まず属性がディレクティブ ng-src とします そしてその文字列の中に データを差し込みたい場合には 2重の波括弧の中に オブジェクトとプロパティという形で 指定できるということでした

AngularJSを使ってみよう

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

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

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

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

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