Firebase test

by Soviut

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.3.0/angularfire.min.js"></script>
<body ng-app="App">
    <div ng-controller="MainCtrl">
        <h1>Angular App</h1>
        <ul>
            <li ng-repeat="(key, message) in messages track by key">
                <h2>{{ message.name }}</h2>
                <p>{{ message.description }}</p>
            </li>
        </ul>
        
        <form>
            <input type="text" ng-model="name" placeholder="Name"><br/>
                <textarea ng-model="description" ng-keydown="postMessage($event)" placeholder="Message..."></textarea>
        </form>
    </div>
</body>

CSS

body {
    font-family: arial, helvetica, san-serif;
}

h2, p {
    margin: 0;
}

JavaScript

var app = angular.module('App', ['firebase']);

app.controller('MainCtrl', function($scope, angularFire) {
    var ref = new Firebase('https://zamtools.firebaseio.com/');
    $scope.messages = [];
    $scope.$watch('messages', function(value) {
        console.log(value);
    });
    angularFire(ref, $scope, 'messages', {});
    
    $scope.postMessage = function(e) {
        if (e.keyCode != 13) return;
        $scope.messages.push({
            name: $scope.name,
            description: $scope.description
        });
        $scope.description = '';
    };
});