AngularJS and Firebase @ YouTube

Realtime Web Apps with AngularJS and Firebase

It’s amazing. As indicated, AngularJS’s 2-way binding is extended into multi-clients by just adding a hook for Firebase. The Firebase nicely handles both persistence and notification with a simple interface. There’re some applauses in the demonstration (around 10:00-11:00), and I would make a similar response.

Code

Just made some modification to the previous server/client communication code, and it just worked as advertised.

<html ng-app="app">
  <head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script src="angularFire.js"></script>

    <style>
      body { margin-top: 10px; }
      input.message { height: 30px; }
    </style>

    <script>
      var app = angular.module('app', ['firebase']);

      function AppCtrl($scope, angularFire) {
        var url = 'https://<my-firebase>.firebaseio.com/items'
        $scope.items = angularFire(url, $scope, 'items');

        $scope.send = function() {
          $scope.items.push($scope.text);
        }

        $scope.clear = function() {
          $scope.items.length = 0;
        }
      }
    </script>

  </head>
  <body ng-controller="AppCtrl">
    <form class="form-inline">
      <input type="text" ng-model="text" placeholder="input message to send" class="message"></input>
      <button ng-click="send()" class="btn">send</button>
      <button ng-click="clear()" class="btn">clear</button>
    </form>

    <table class="table table-striped">
      <tr ng-repeat="item in items">
        <td>{{item}}</td>
      </tr
    </table>
  </body>
</html>
Advertisements

Posted on July 20, 2013, in JavaScript, Web. Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: