Event

ボタンをクリックすると div に input からタイプした TEXT を表示します。
こんにちは、maedaさん!

次のリンクをクリックすると "ngp_event.html" が呼び出されます。
ボタンクリックのプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_event.html" です。
    <!DOCTYPE html>
    <html ng-app="myApp">
    <head>
    <meta charset="UTF-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    </head>
    
    <body>
    <form ng-controller="myController">
      <label for="name">名前:</label>
      <input id="name" name="name" type="text" ng-model="name" />
      <button ng-click="onclick()">送信</button>
      <div>{{msg}}</div>
    </form>
    
    <script>
      // myAppモジュールにmyControllerコントローラーを登録
      var app = angular.module('myApp', []);
      app.controller('myController', ['$scope',
        function($scope)
        { // 変数msgを初期化
          $scope.msg = 'こんにちは、誰かさん!';
          // clickイベントリスナーを設定
          $scope.onclick = function()
          { $scope.msg = 'こんにちは、' + $scope.name + 'さん!'; };
        }]);
    </script>
    
    </body>
    </html>
    
  2. html を AngularJS の myApp モジュールに関連付けます。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app="myApp">
    
  3. form に ng-controller を指定して、input と button を定義します。
    送信ボタンをクリックすると onclick() 関数が呼び出されて、div の {{msg}} に TEXT が表示されます。
    <form ng-controller="myController">
      <label for="name">名前:</label>
      <input id="name" name="name" type="text" ng-model="name" />
      <button ng-click="onclick()">送信</button>
      <div>{{msg}}</div>
    </form>
    
  4. ボタンのクリックで起動される Controller です。
    $scope.msg に div で表示される TEXT を格納します。
    <script>
      // myAppモジュールにmyControllerコントローラーを登録
      var app = angular.module('myApp', []);
      app.controller('myController', ['$scope',
        function($scope)
        { // 変数msgを初期化
          $scope.msg = 'こんにちは、誰かさん!';
          // clickイベントリスナーを設定
          $scope.onclick = function()
          { $scope.msg = 'こんにちは、' + $scope.name + 'さん!'; };
        }]);
    </script>
    
  5. AngularJS で提供されているイベント関係のディレクティブです。
    ディレクティブ名キャプション 概要
    ng-click クリックした時
    ng-dblclick ダブルクリックした時
    ng-mousedown マウスボタンが押されたとき
    ng-mouseup マウスボタンが離されたとき
    ng-mouseenter要素にマウスポインターが入った時
    ng-mouseleave要素からマウスポインターが出た時
    ng-mousemove 要素上をマウスポインターが移動した時
    ng-mouseover 要素上にマウスポインターが重なった時
    ng-mouseout 要素上に重なっていたマウスポインターが外れた時
    ng-focus 要素にフォーカスした時
    ng-blur 要素からフォーカスが外れた時
    ng-keydown キーを押した時
    ng-keypress キーを押し続けている時
    ng-keyup キーを離した時
    ng-change 値を変更し時
    ng-copy コピーした時
    ng-cut カットした時
    ng-paste ペーストした時
    ng-submit サブミットした時

ボタンクリックの Event 操作なら AngularJS を使わない方が解りやすくて簡単かも知れません。
次のソースは AngularJS を使わない例ですが、使ったときと比べてみて下さい。
AngularJS のボタンクリックは、他の機能と組み合わせるときに役に立つようです。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-16">
<title>平方根の計算</title>
<script>
function keisan(form)
{ if (isNaN(form.num.value) == true)
  { window.alert("数値を入力して下さい♪");
    return;
  }
  form.root.value = Math.sqrt(form.num.value);
}
</script>
</head>

<body>
<h2>平方根の計算</h2>
<form>
<input type="text" name="num" value="" size=20>
<input type="button" nama="ans" value="=" onClick="keisan(this.form)">
<input type="text" name="root" value="" size=30>
</form>

</body>
</html>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)