@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

今更AngularJSでControllerを使ってみる

angularjs

今回はAngularJSのコントローラーを使ってみます。AngularJSはJavaScriptのMVCフレームワークでして、ViewがHTMLで、Modelはng-model等で、Controllerを今回紹介します。
AngularJSのControllerはJavaScriptのfunctionで表し、HTML内にng-controller属性を使ってどのControllerを使うかを定義します。
まずは、HTML内に定義しましょう。ng-controller="関数名"で定義します。

<div id="container" ng-app>
  <div ng-controller="MainCtrl">
    <!-- この部分にMainCtrlで制御する情報を書く -->
  </div>
</div>

続いて、JavaScriptにControllerを定義していきます。

function MainCtrl($scope) {
    // 制御を書く
}

これでOKです。引数に$scopeを書いて居ますが、この変数名は固定で、ng-controller内のデータ等を扱うことが出来るようになります。
コントローラー内で次のように$scopeにデータを書いてみます。

$scope.name = 'データ';

すると、HTML内で{{name}}を使って値を表示することが出来ます。

<div ng-controller="MainCtrl">
  <div>{{name}}</div>
</div>

$scopeにオブジェクト配列を設定することも出来て、HTML内で繰り返し表示することも出来て、ng-repeatを使います。

<div ng-controller="MainCtrl">
  <table border="1">
    <tr ng-repeat="name in names">
      <td>{{name}}</td><td>{{point}}</td>
    </tr>
  </table>
</div>

$scopeに関数を定義し、HTML内でng-clickを定義することでイベントを設定することも出来ます。

<div ng-controller="MainCtrl">
  <input type="text" ng-model="name">
  <button ng-click="sayHello()">こんにちは</button>
</div>

簡単でしたね。
サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>AngularJS Controller Sample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  </head>
  <body>
    <div id="container" ng-app>
      <div ng-controller="MainCtrl">
        <div>{{name}}</div>
        <input type="text" ng-model="name">
        <button ng-click="sayHello()">こんにちは</button>
        <table border="1">
          <tr ng-repeat="name in names">
            <td>{{name.name}}</td>
            <td>{{name.point}}</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
      function MainCtrl($scope) {
          $scope.name = 'sample name';
          $scope.names = [
              {name: 'name1', point: 10},
              {name: 'name2', point: 9},
              {name: 'name3', point: 6},
              {name: 'name4', point: 8}
          ];
          $scope.sayHello = function() {
              alert($scope.name ? 'こんにちは' + $scope.name + 'さん' : '何か入力してね');
          }
      }
    </script>
  </body>
</html>

サンプル

AngularJS

AngularJS