Angular jsを使ってストップウォッチを作る

ユーザ側に経過時間を見せながらログを取るアプリケーションを作る必要があったので，ここにメモ

表示用のhtml

index.html


<!DOCTYPE html>
<html ng-app="app">
  <head>
    <!-- import Library | Framework -->
    <title>ストップウォッチ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
    <script src="./Time_control.js"></script>
  </head>
<body>
    <div ng-contoller="time_controller">
        <!-- 表示用 -->
        <p>{{time_status}}</p>
        <div>
            <input type="button" value="start" ng-click="start()" ng-class="{disabled :start_status}">
        </div>
        <div>
            <input type="button" value="end" ng-click="stop()" ng-class="{disabled :stop_status}">
        </div>
    </div>

</body>

ng-controllerでコントロールの範囲を決めて，その中のng-clickに対してイベントリスナーをJS側で書いていく

Time_control.js

var app = angular.module("app",[]);

app.controller("time_control",function($scope,$interval){
    $scope.time_status = "00:00";
    // 外のメソッドからアクセスしたいため，グローバル変数へ
    time = 0;
    // startのボタンのみ有効
    $scope.start_status = "";
    $scope.stop_status = "disable";
// スタートを押した際にカウントを始める
  $scope.start = function(){
    // スタートボタンは無効化する
    $scope.start_status = "disabled";
    $scope.stop_status = "";
    // 1秒間に1回処理を呼び出すようにする
    timer = $interval(function(){
      time++;
      var sec = parseInt((time % 60) / 10) == 0 ? "0" + (time % 60).toString() : (time % 60).toString();
      var min = parseInt(time / 600) == 0 ? "0" + parseInt(time/60).toString() : parseInt(time/60).toString();
      $scope.time_status = min + ":" + sec;
    },1000);
  }
    // ストップを押したら時間を止めるようにする
  $scope.stop = function(){
    $interval.cancel(timer);
    $scope.start_status = "";
    $scope.stop_status = "disabled";
  };
})

コードはこんな感じ

注意するところはcontollerの中の引数を$scopeだけではなく$intervalも入れること
割とそのエラーで今後ハマりそう。。