Javascript > AngularJS

下位ページ

Content

参考サイト


とりあえず有効にする

  1. ライブラリを読み込む
  2. 有効にする
    • <html ng-app>
  3. 有効なったか確認してみる
    • {{1+2}}と書いたら3と表示されるか?

モジュールを作成して動かす

モジュールを作って動かすのが基本らしい

  1. モジュールを定義する
    • モジュール内にコントローラ、サービスなど「部品」を構成する
      • コントローラ、サービスって何?
  2. ng-app属性にモジュールを関連付けする
  3. コントローラを作成する


モジュールを作る

angular.module(name [,requires] [,config])
name: モジュール名(string)
requires: 依存するモジュール(Array<string>) ← じつは必須?無ければ、空([])にしておく
config: モジュールの構成情報を設定する関数(Function*1)

使うコントローラを定義する


  • スコープ:利用する関数や変数が及ぶ範囲
  • コントローラ:スコープを準備する仕組み

タグの中で使うコントローラを定義する
<div ng-controller="myController"></div>

バインディングしたデータを表示させる

$scope.msg = "hello"

{{msg}}
{{...}}で表示
ng-non-bindable属性をつけたタグの中では、そのまま表示させる

双方向データバインディング

  • ng-modelでデータと紐付け

要素を繰り返して表示する

ng-repeat
ng-repeat-start, ng-repeat-end 複数項目の塊で繰り返しを指定する
http://www.buildinsider.net/web/angularjstips/0033
最終更新:2017年11月26日 12:10