AngularJSを使ってみよう

$httpサービスを使ってJSONファイルを読み込む

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
$httpサービスでJSONファイルを読み込み、データをHTMLドキュメントに反映させます。
講師:
06:01

字幕

このレッスンでは AngularJS の http というサービスを使って json ファイルを読み込んで それを html ドキュメントに 反映してみたいと思います 今 読み込もうとしている json ファイルは開いてはいるのですけど 現在 html ドキュメント 及び JavaScript ファイルのほうでは この json ファイルは使ってはいません どうなっているかというと JavaScript ファイルのほうに データが全部配列で 記載してあるんですね これを json ファイルのほうに 差し替えてみたいと思います どうするかというと まず ここは json ファイルから読み込みますので 要らなくなります カットしてしまって 変数に入れる予定なんですが まだ その変数の処理 書いていませんけど data という名前にしましょう と もうここで決めてしまいます そして json ファイルの場所 一応確認しておきましょう 保存のダイアログで見ると js というフォルダ JavaScript のファイルと同じ階層にあります ここに data.json とありますので これを読み込んでみようということです では JavaScript ファイルのほうに 戻りまして 処理を書いていきます http というサービスを使うのですが それは この controller のメソッド 呼び出しの第二引数 現在は function しかないですけど ここにサービスを加えていきます その場合 配列に入れて加えます function のおしまいはここですので 角括弧を閉じて配列閉じます この頭に function の前に サービスを加えて行きます では文字列で 名前が決まっていまして http と そして配列ですから カンマ区切りですね あと scope 使っているので これも入れておきます $scope カンマ区切りですね そうすると scope は既に 名前のない function のほうで 受け取っているのですが http も受け取れるようになります $http と こちらは文字列ではありません 変数ですから さて この中の処理に加えていくのですけど 引数で http を受け取りました これを使います $http そして get というメソッドです その中に先程確認した json のファイルのパスを書き加えます 同階層の js フォルダの中の data.json でしたね さて この読み込みが 終わったら処理を行うわけです 読み込まないと設定できませんので 読み込みが終わった だというのは うまくいったら .success です そして メソッドですので丸括弧 ( で 始まりますが どこで閉じるかというと ここです この処理が終わった所まで ということで この処理を この中に加えなければいけません これは関数で加えます function ですね そして引数で json の データを受け取ります ここで名前決めましたよね ですからこの名前を data と入れてあげて { 始まり } 閉じ インデント加えましょう こうしてあげると json データの読み込みが うまくいった時 データを受け取るので それを設定しましょうと このデータの形は先程あった あの配列と同じ形になっているので このまま設定ができるということになります では保存しましょう ファイルを保存して そしてこちらが html ドキュメントなんですが 「ファイル」メニューの 「ブラウザでプレビュー」します 何もでてきません 実はこれエラーになっています エラーを確認するので 「開発管理」> 「JavaScript コンソール」です 一番最初の この赤文字です XMLHttpRequest が 読み込みできませんよ とあります この XMLHttpRequest というのは 制限がありまして 同じサーバーから データを読み込まないといけないです そしてローカルでは 確認ができないですね ということですので 確認をするためには サーバーに上げる必要があります もちろんきちんとサーバーに上げて 確認すれば良いのですけど ローカルサーバーが建ててあれば そちらで試す方法もできます このコースではローカルサーバーで確認して 簡易的にチェックしたいと思います URl をペーストして 貼り付けて Enter です エラーがでなくなりました そしてリストと形で データが読み込まれています このレッスンでは AngularJS の http というサービスを使って json ファイルを読み込みました その場合はこの controller の メソッドの中で第二引数 配列の形でサービスを カンマ区切りで記述し そして function の引数として http を受け取ったうえで その get メソッドで読み込んだ後 success ということで 処理を記述するということになります そしてこの関数が読み込んだ json ファイルを 引数として受け取るということでした

AngularJSを使ってみよう

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

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

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

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

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