読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

AngularJSを使ってタイムキーパーを作ってみよう #1-2【フォーム送信処理の実装】

前回(AngularJSを使ってタイムキーパーを作ってみよう #1-1【AngularJSの導入】 - Web Design Note)の作業で、AnuglarJSが使える環境ができたので、実際にAngularJSのコードを書いてみたいと思います。
今回は、以下の挙動を作ります。

  1. フォームに「時間」を入力する
  2. 「追加」ボタンを押す
  3. 入力された「時間」がhtmlと共に出力される

よくあるToDoアプリを参考に

まずは、これらのサイトを眺めながら、なとなく予備知識をインプット。

で、タイムキーパーを実装するにあたっては、挙動が似ている「ToDoアプリ」を参考にしました。

初め、この動画で紹介されている方法を、そのまま実装してみたのですが、なぜかコンソールでエラーが検出されてしまいました。

f:id:designnote:20141130165602p:plain

Error: [ng:areq]・・・なんでしょう。
試しに、以下の記述をソースから消してみると、エラーが消えたので、どうやら、コントローラーの記述の部分でエラーが起きているようです。

<div ng-controller="mainCtrl">

バージョンアップでコントローラーの書き方が変わった

いろいろ調べてみると、どうやら、AngularJSのバージョンアップで、コントローラーの記述の仕方が変わったのが原因でした。

また、本家サイトの方にも、ToDoアプリのコードが実装事例として載っているので、こちらも参考になりました。

こうして、script.jsを以下のように書き換えたところ、コンソールからもエラーが消えました。

script.js(修正前)

var agendaCtrl = function($scope) {
  $scope.agendas =[];
    $scope.addAgenda = function() {
      $scope.agendas.push({time:$scope.settingTime,});
      $scope.settingTime ='';
    }
});

script.js(修正後)

angular.module('timekeeper',[])
  .controller('agendaCtrl',function($scope) {
    $scope.agendas =[];
    $scope.addAgenda = function() {
      $scope.agendas.push({time:$scope.settingTime,});
      $scope.settingTime ='';
    }
  });

完成したindex.htmlはこちら。html要素やhead要素は前回から変わらないので、省略してます。

See the Pen gbwZeM by tnk-mitsuru (@tnk-mitsuru) on CodePen.

上記のコードで、以下の操作ができるようになりました。
記述量の少なさが素晴らしいですね。

  1. フォームに「時間」を入力する
  2. 「追加」ボタンを押す
  3. 入力された「時間」がhtmlと共に出力される

次は、出力した時間を合計します。→AngularJSを使ってタイムキーパーを作ってみよう #1-3【入力値の合計】 - Web Design Note