JavaScript講座JavaScript講座

野中文雄 のAngularJS入門講座

講座レベル3

シングルページwebアプリケーション(SPA)は、ひとつのページで変更が必要な要素やモジュールを動的に切り替えることにより、操作の反応を速め、ユーザーエクスペリエンスを高めるアーキテクチャです。そのためのフレームワークとして今もっとも注目を集めているのがGoogle社の開発するAngularJSでしょう。

野中文雄

本講座は、AngularJSのインストールから始め、サンプルのwebアプリケーションを段階に分けて組み立てながら、このフレームワークの仕組みや構文、JavaScriptコードの書き方について解説します。扱うふたつの作例のひとつ目は、Todoリストです。ひとつのページの中で、表示する項目の数やテキスト、スタイルを動的に切り替えます。ふたつ目は、さらに項目のリストをコンポーネントと呼ばれるパーツに分けて階層化し、テンプレートのHTMLコードを差し替えるなど、SPAの開発に重要となるテクニックについて解説します。

AngularJSのバージョンは1.5を使用します。HTMLとCSSおよびJavaScriptの基礎を学んだ方が対象です。

修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • ディレクティブを使った構文がわかる
  • モジュールとコントローラをJavaScriptコードで定められる
  • データにもとづいてHTMLドキュメンの要素や属性が動的に変えられる
  • コンポーネントを使ってHTMLドキュメントが組み立てられる
  • データバインディングの方向と扱い方がわかる
野中文雄

カリキュラム概要

  1. AngularJSを始める
  2. Todoリストをつくる
    • 要素の属性を動的に変える
    • コントローラで値を与える
    • 動的にリストをつくる
    • コントローラで項目を動的に追加する
    • 項目を数えて表示する
    • 項目を調べて削除する
    todoリストの図
  3. コンポーネントを使う
    • コントローラに定めた値をデータバインディングでHTMLドキュメントに表示する
    • アプリケーションからコンポーネントを切り分ける
  4. コンポーネントを階層化する
    • コントローラに定めた値をデータバインディングでHTMLドキュメントに表示する
    • コンポーネントから表示項目を削除する
    • 項目のデータを増やして新たなコンポーネントで編集する
    • リセットボタンでテキストを編集前に戻す
    • 一方向のバインディングでデータの変更を親コンポーネントに反映させる

サンプル
項目の値がコンポーネントで編集・保存・リセットできる

サンプル図

＊カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

使用アプリケーション・開発言語
Dreamweaver + JavaScript + AngularJS 1.5
講師
野中文雄
定員
6名
対象
HTMLとCSSの基礎知識があり、変数や関数を用いた基本的なJavaScriptコードが書ける方
  1. TOP
  2. 講座
  3. 野中文雄のAngularJS入門講座