AngularJSを使ってみよう

要素への最小限の記述で動かしてみる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
JavaScriptコードは書かず、最小限の要素への記述でAngularJSでHTMLドキュメントをコントロールします。
講師:
05:58

字幕

このレッスンではまずは AngularJS を動かしてみます AngularJS のライブラリを 読み込んで html に必要最小限の記述をして とにかく動いた状態を 確認してみたいと思います では今 DreamWeaver で html ドキュメントを開いていますが 本当に最小限の記述だけで まだ AngularJS の準備は全然できていません 最初に行うことは AngularJS の ライブラリを読み込むということですね これは head の要素の中で 読み込みます script の要素で ソース (src )ですね そして「参照」で ライブラリは フォルダ div の中の Angular... の中の Angular.min.JS これが最小化された一番基本となる AngularJS のライブラリです これを選択して開きます そして script タグを閉じると まずは読み込みはできました 次にちょっと準備が必要なので body にその準備を書き込みます ここは普通に html の記述になります まずは input 要素で type は type 属性は text にしましょう それから h2 要素で タイトルというかメッセージを書きます Welcome 閉じます まだ AngularJS 全然使っていません 結果はわかるでしょうけど 一応確認しましょうか ファイルを「保存」して 「ブラウザでプレビュー」します 入力のフィールドができて そして Welcome という文字が 表示されました 何も変わったことは起きませんね まだ Angular の設定をしていないからです では次に Angular の設定をして 要素と AngularJS の 関連付けをしていきましょう まず AngularJS でアプリケーションとして コントロールする 要素を決めなければいけません 一番大元の要素にすることが普通です html の要素ですね ここに Angular に対する命令として ng 命令は大体 ng- で始まるのですけど app と打つと html 要素の中を アプリケーションとして Angular にコントロールさせる という宣言になります 命令と考えて頂ければ 良いのですが AngularJS ではディレクティブ という言い方をします これで この html 要素の中が アプリケーションとして AngularJS によりコントロールされます では具体的にどんなコントロールしようか ということなのですが 今度は input 要素です ここにまたディレクティブ 命令ですね ng-model というふうに設定しますと この要素をデータの格納場所として 認識させることになります そして名前を付けなければいけないので 簡単に name としておきましょう この input 要素には 名前を入力するという そういう予定なので name という名前を付けました そうすると AngularJS は この中のデータを name という名前で データの格納場所として 認識します そうするとそこから データを取り出すことができます では今度は この h2 要素で データを取り出します name という名前のデータが ある筈なのだけれども それを Welcome の後に表示してくれないか ということです そういう場合 参照する その名前なんですけれど 2重の波括弧で囲います この中にどの値を参照したいのか ということで name という名前を付けた データを参照して AngularJS に ここにその name の 中身を表示して下さいという そういう意味になります ではこれで確認したいと思います ファイルを保存して ブラウザでプレビューします Welcome とあって 入力フィールドがある 先程と変わりません でも タイプすると その中身がでてくるんですね 消すと消えるということで 先程言いました通り この input 要素の中身を name という名前で データを認識しています そして Welcome の後に その name という名前のデータの 中身をここに出せ といったことになりますので その通りのことを実行しているわけです この簡単な記述で AngularJS により html の中の要素を関連付けて そして表示するということができたわけです このレッスンでは AngularJS の ライブラリを読み込んで AngularJS に この html ドキュメントの中の要素を コントロールさせ そして その中のデータを認識させて 別の所に表示するということをご紹介しました 其の場合 まずコントロールする 一番親の要素に ng-app と付ける それからコントロールしたい要素に ディレクティブという 命令を書くんですが 今回は ng-model で この中のデータをデータ格納場所として 認識しなさいということで 名前を付けました それを2重の波括弧で付けた名前を 入力することで そこからデータを取り出して 表示することができました

AngularJSを使ってみよう

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

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

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

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

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