Button Click

Button Click のプログラムです。

次のリンクをクリックすると "ngp_click.html" が呼び出されます。
Button Click

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_click.html" です。
    <!doctype html>
    <html ng-app="myApp">
    <head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', function() {
      this.count = 0;
      this.inc = function() { this.count++; }
      this.dec = function() { this.count--; }
    });
    </script>
    </head>
    <body>
    <div ng-controller="myController as myCtrl">
      {{myCtrl.count}}
      <button ng-click="myCtrl.inc()">+1</button>
      <button ng-click="myCtrl.dec()">-1</button>
    </div>
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. myApp モジュールを作成して myController コントローラーを登録します。
    this.inc 関数で count をカウントアップします。
    this.dec 関数で count をカウントダウンします。
    <script>
    var app = angular.module("myApp", []);
    app.controller('myController', function() {
      this.count = 0;
      this.inc = function() { this.count++; }
      this.dec = function() { this.count--; }
    });
    </script>
    
  4. div で myController を定義します。
    {{myCtrl.count}} でカウンターを表示します。
    カウントアップのボタンを貼り付けて myCtrl.inc() 関数を呼び出します。
    カウントダウンのボタンを貼り付けて myCtrl.dec() 関数を呼び出します。
    <div ng-controller="myController as myCtrl">
      {{myCtrl.count}}
      <button ng-click="myCtrl.inc()">+1</button>
      <button ng-click="myCtrl.dec()">-1</button>
    </div>
    

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