汎用関数

関数(メソッド)を *.js に登録する方法を説明します。
0
 +1
 -1
 Reset

次のリンクをクリックすると "ngp_service.html" が呼び出されます。
関数を *.js に登録

プログラムの説明

  1. 汎用的に使える関数(メソッド)を *.js に登録する方法を Button Click を例に説明します。
    基本的なプログラム構成は、こちらを参照して下さい。
  2. 最初に関数(メソッド)を登録した service.js から説明します。
    app.controller() ではなく .service() を使います。
    登録する関数 add() では「cnt + n」の結果をリターンします。
    また、関数 reset() ではカウンターをクリアするために０をリターンします。
    $log.debug() はデバッグ用の印字で、IE では「F12/Console TAB」から実行すると確認出来ます。
    angular.module('myAppService', [])
  .service('AreaService', ['$log', function($log)
  {
    this.add = function(cnt, n)
    { $log.debug('［ADD］');
      return cnt + n;
    };
    this.reset = function()
    { $log.debug('［RESET］');
      return 0;
    };
  }]);
  3. AngularJS サンプルプログラム "ngp_service.html" です。
    <!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="service.js"></script>
<script>
var app = angular.module('myApp', ['myAppService']);
app.controller('MyController', function($scope, AreaService)
{   $scope.count = 0;
    $scope.up = function()
    { $scope.count = AreaService.add($scope.count, 1);  }
    $scope.down = function()
    { $scope.count = AreaService.add($scope.count, -1);  }
    $scope.reset = function()
    { $scope.count = AreaService.reset();  }
});
</script>
</head>
<body>
<div ng-controller="MyController">
  {{count}}<br>
  <button ng-click="up()">+1</button><br>
  <button ng-click="down()">-1</button><br>
  <button ng-click="reset()">Reset</button><br>
</div>
</body>
</html>
  4. angular.min.js に続いて service.js を組み込みます。
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="service.js"></script>
  5. myApp モジュールを作成する時に、'myAppService' モジュールをインポートします。
    'myAppService' は service.js の .module で使われているＩＤです。
    var app = angular.module('myApp', ['myAppService']);
  6. function の定義では、第２引数に AreaService を設定します。
    AreaService は service.js の .service で使われているＩＤです。
    $scope.up 関数では、count と 1 を引数にして AreaService.add() を呼び出します。
    $scope.down 関数では、count と -1 を引数にして AreaService.add() を呼び出します。
    $scope.reset 関数では AreaService.reset() を呼び出します。
    app.controller('MyController', function($scope, AreaService)
{   $scope.count = 0;
    $scope.up = function()
    { $scope.count = AreaService.add($scope.count, 1);  }
    $scope.down = function()
    { $scope.count = AreaService.add($scope.count, -1);  }
    $scope.reset = function()
    { $scope.count = AreaService.reset();  }
});
  7. div でカウンターを表示して、+1, -1, Reset ボタンを設定します。
    <div ng-controller="MyController">
  {{count}}<br>
  <button ng-click="up()">+1</button><br>
  <button ng-click="down()">-1</button><br>
  <button ng-click="reset()">Reset</button><br>
</div>

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