AngularJSを使ってみよう

モジュールをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
モジュールという機能の単位を定めて、HTMLドキュメントをコントロールします。
講師:
08:32

字幕

このレッスンでは AngularJS で 機能を作り込む時の 単位となるモジュールというものを作って それで html ドキュメントの中身を コントロールしてみたいと思います 今開いている html ドキュメントですが AngularJS のライブラリを 読み込んでいます そして この html 要素に ng-app のディレクティブが 設定されていますので html のこの下が AngularJS の支配下 ということになります でもまだ body にはほとんど div 要素しかありませんし script は何も書いてません これを追加していきましょう まずは script 要素 JavaScript を書くように 既に script 要素が入れてあるのですけど ここに早速コードを書きます まずアプリケーションの モジュールを定義します myApp として Angular のモジュールを作る というメソッドを呼びだします これは文字通り module です そして引数 2つあるのですが まず第一はこの module に 名前を付けます 変数名と同じ myApp としておきますが この名前は ng-app のディレクティブに 指定してあげます = で今 module として作成した この myApp で アプリケーションをコントロールしますよ ということなので コピーして持ってきます そして module に 機能を付け加えていくのですが 今回は controller というものを 設定します myApp の controller ですね そして やはり第一引数に名前を付けます MyController この MyController もやはり 要素に設定するんですが 今回は div 要素に 加えることにしましょう div 要素に controller として この MyController を加えます ということなのですが ng-controller という ディレクティブを設定します そしてやはり名前ですね これをコピーして 持ってきます modulte 綴りが違いますね module この module も Controller も 第二引数があります module のほうは 配列 [ ] の中に 必要があれば module を どんどん追加していくのですが 今回は追加するものはありません なくても空っぽの配列を 指定する必要があります 次に controller のほうは 第二引数は関数です 今回は名前のない関数を使います ( ) { } ですね わかりやすいように改行を入れておきましょう そして ( ) の中なのですが 何も指定しない場合もあるのですが 多くは $scope というものを設定して この scope の中に いろいろプロパティを加えていく という手法をとります 今回はこの手法に従います そうするとこの scope に いろいろプロパティが設定できるのですが 出元はコピーしましょうか コピーしまして そしてプロパティは自由に 名前を設定できます 今回は person としたいと思います person ですね 設定するのは オブジェクトとします オブジェクトも見やすいように 改行をしまして ここにプロパティを 付け加えていくわけですが まずは name というプロパティです 私の名前を入れます Fumio Nonaka とします そしてカンマ区切りで また違うプロパティ city にしましょう 文字列で Tokyo として もう1個加えるので またカンマです site これは fumiononaka.com と こうして controller に person というプロパティが加わりました それを scope というものを使って 設定しているのですが この person というのは controller を設定した この要素の中で参照することができます では h1 要素を加えましょう そして 参照する時は 2重の波括弧 {{}} です Angular で Angular の中のデータを参照する時ですね {{}} の中に参照したい変数 プロパティを入れます ここでは person というのが 参照できますので scope に設定した person が参照できますので person ただこの中に まだプロパティがあるわけですから プロパティの中の name を参照したいと思います ではここでまず 一旦確認してみましょう ファイルを「保存」して 「ブラウザでプレビュー」します Fumio Nonaka とでてきましたね 文字は打っていないのですが 先程のコードで書いた controller の中に設定した person の中のプロパティをとってきて 表示したということです では html ドキュメントのほうに 戻りましょう では div 要素にもう1つ 要素を加えます 今度は p 要素です やはり {{}} で person の値を 値を参照して city と site も入れたいな ということで person.site こう打っても2つの値が くっ付いちゃいますけど 参照できるのですけど この {{}} の中で JavaScript コードで書くように 簡単な式が設定できます + で文字列を繋ぐことが出来ます 更に間に何かないと くっ付いちゃうと見にくいという場合には 文字列を入れるということも可能です これで保存して確認してみましょう ファイルを「保存」して ブラウザのウィンドウをリロードします Tokyo / fumiononaka.com 間が / で区切られています このレッスンでは AngularJS の モジュールを作って html ドキュメントの中を コントロールしました そのためには まず モジュールを作り アプリケーションの名前を指定します それは ng-app のディレクティブに 指定します そのうえで このアプリケーションに コントローラを設定するのが この controller というメソッドで 付けた名前は 今回はdiv 要素に ng-controller という ディレクティブに設定しました そのうえでその内容を function の形で書きます 今回は scope に person という プロパティを設定し その person のプロパティの中を div 要素の中の要素で 参照しました

AngularJSを使ってみよう

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

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

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

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

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