AngularJSで画面制御ただしJavaScriptは書かない

AngularJSはモデルとビューの間のデータを自動的に同期してくれます。

モデルとは内部データです
ビューはhtmlです

つまりhtml上に入力した値が自動的に内部データに反映され、内部データが変更されれば自動的にhtmlも更新されます。

詳しくはリファレンスを見てください。

データバインディング | AngularJS 1.2 日本語リファレンス | js STUDIO

簡単な例

次のhtmlをブラウザで開いてinput要素の値を変更してみましょう。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body>
    <input type="text" ng-model="myValue">
    <h1>{{myValue}}</h1>
  </body>
</html>

f:id:ledsun:20140121175043p:plain

input要素に入力した値がinput要素の下に表示されるのが分かります。

ng-model="myValue"はinput要素の入力値をmyValue変数にバインドしています。　　
{{myValue}} はmyvalue変数の値を表示しています。

AngularJSは自動的に次のような処理を行っています。

ユーザはinput要素の値を変更
AngularJSはinput要素の値をmyValue変数に反映
AngularJSはmyValue変数の値でhtml上の表示を更新

{{ }}はAngularマークアップと呼びます。マークアップはhtmlに直接書けます。

応用例

データバインディングとAngularマークアップのおかげで、入力値に合わせて表示を変えるような処理にはJavaScirptを書く必要がありません。

隠すチェックボックス

次のhtmlではチェックボックスへのチェックの有無に応じて文章の表示/非表示を切り替えます。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body>
    <label>説明を隠す<input type="checkbox" ng-model="showDesc"></label>
    <div ng-show="!showDesc">江戸時代（えどじだい）は、日本の歴史において徳川将軍家が日本を統治していた時代である。徳川時代（とくがわじだい）とも言う。この時代の徳川将軍家による政府は、江戸幕府（えどばくふ）あるいは徳川幕府（とくがわばくふ）と呼ぶ。</div>
  </body>
</html>

f:id:ledsun:20140121175412p:plain

f:id:ledsun:20140121175417p:plain

ng-showを使うとhtml要素の表示/非表示を制御できます。

ngShow | AngularJS 1.2 日本語リファレンス | js STUDIO

算数クイズ

次のhtmlでは入力された計算結果が正しいかどうかによって表示を変更します。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body>
    1 + 1 =　<input ng-model="answer" placeHolder="答えは？">
    <div>
      {{answer == 2 && '正解です' || '間違っています'}}
    </div>
  </body>
</html>

f:id:ledsun:20140121175619p:plain

f:id:ledsun:20140121191752p:plain

{{ }}内にはAngular式と呼ばれる式を書くことができます。

式(Expressions) | AngularJS 1.2 日本語リファレンス | js STUDIO

必須入力項目

次のhtmlでは名前欄に入力すると、登録ボタンが有効になります。

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  </head>
  <body>
    <form name="form1">
      名前<input type="text" ng-model="name" required><button ng-disabled="form1.$invalid">登録</button>
    </form>
  </body>
</html>

f:id:ledsun:20140121191005p:plain