firebaseためしてみた

Firebase - Build Realtime Apps
無料アカウント作って
5 min. tutorial
ってのをすると簡易チャットの出来上がり(下記ソース)

<html>
  <head>
    <script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
  </head>
  <body>
    <div id='messagesDiv'></div>
    <input type='text' id='nameInput' placeholder='Name'>
    <input type='text' id='messageInput' placeholder='Message'>
    <script>
      var myDataRef = new Firebase('https://baxzzmi04ol.firebaseio-demo.com/');
      $('#messageInput').keypress(function (e) {
        if (e.keyCode == 13) {
          var name = $('#nameInput').val();
          var text = $('#messageInput').val();
          myDataRef.push({name: name, text: text});
          $('#messageInput').val('');
        }
      });
      myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
      });
      function displayChatMessage(name, text) {
        $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
      };
    </script>
  </body>
</html>

たしかに簡単
ついでに気になってた
AngularJS + Firebase
でAngularFireってのも
5 min. tutorial
あったのでやってみた

<html ng-app="myapp">
  <head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.min.js'></script>
    <script src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js'></script>
  </head>
  <body ng-controller="MyController">
    <div id="messagesDiv">
      <div ng-repeat="msg in messages"><em>{{msg.from}}</em>: {{msg.body}}</div>
    </div>
    <input type="text" ng-model="name" placeholder="Name">
    <input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message...">
    <script>
      var app = angular.module("myapp", ["firebase"]);
      function MyController($scope, $firebase) {
        var ref = new Firebase("https://gq6zmt4xgt1.firebaseio-demo.com/");
        $scope.messages = $firebase(ref);
        $scope.addMessage = function(e) {
          if (e.keyCode != 13) return;
$scope.messages.$add({from: $scope.name, body: $scope.msg});
          $scope.msg = "";
        };
      }
    </script>
  </body>
</html>

初AngularJSなのでよくわかんないけど
これでjquery版と全く同じ機能
コード量が減って見通しはよくなった?