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-8">
<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)