Yeoman + AngularJS + Twitter Bootstrap3 でゲストブックアプリを作ってみるメモ

(yeoman1.0.4, angularjs1.0.7)

Yeoman

インストール

$ npm install -g yo grunt-cli bower generator-angular

環境構築

$ mkdir guestbook-sample
$ cd guestbook-sample
$ yo angular guestbook
[?] Would you like to include Twitter Bootstrap? Yes
:

Bootstrap3

ver.2 だったので 3 に上げとく

Yeoman で作った AngularJS + Titter Bootstrap のプロジェクトで Bootstrap がまだ Ver.2 だったので 3 にする場合のメモ - 牌語備忘録 - pygo

開発用サーバー起動

grunt server

起動すると自動でブラウザにindex.htmlが表示される

http://127.0.0.1:9000/

実装

app/scripts/controllers/main.js

修正2013-10-05

'use strict';

angular.module('guestbookApp')
  .controller('MainCtrl', function ($scope) {
    $scope.greetings = [
      { name: 'John Lennon', comment: "Oh Yoko", created_at: Date.now()},
      { name: 'Paul McCartney', comment: "Oh Darling", created_at: Date.now()}];

    $scope.addGreeting = function() {
      $scope.greetings.push({name: $scope.greetingName, comment: $scope.greetingComment, created_at: Date.now()});
      $scope.greetingName = '';
      $scope.greetingComment = '';
    };
  });

app/index.html

修正2013-10-05

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

app/views/main.html

修正2013-10-05

<div class="main">
  <h1>Greetings for AngularJS</h1>

  <form ng-submit="addGreeting()" fole="form">
    <div class="form-group">
      <label>Name</label>
      <input type="text" ng-model="greetingName" class="form-control" />
    </div>
    <div class="form-group">
      <label>Comment</label>
      <input type="text" ng-model="greetingComment" class="form-control" />
    </div>
    <input type="submit" class="btn btn-default" value="add" />
  </form>

  <hr />

  <table class="table table-hover">
    <tbody>
      <tr ng-repeat="greeting in greetings | orderBy:'-created_at'">
        <td class="active" width="30%">
          {{ greeting.name }} <br />
          <small class="text-muted">{{ greeting.created_at|date:'medium' }}</small>
        </td>
        <td>{{ greeting.comment }}</td>
      </tr>
    </tbody>
  </table>
</div>