Examples > AngularFire > Synchronized Arrays Chat

Example from https://firebase.com/docs/web/bindings/angular/guide.html

by teknohippy

HTML

<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src="https://cdn-gh.firebase.com/demo-utils-script/demo-utils-angular.js"></script>
<div ng-app="sampleApp" ng-controller="ChatCtrl">
    <p>
        Sort by: 
        <select ng-model="orderBy">
            <option value="">--default--</option>
            <option>user</option>
            <option>timestamp</option>
            <option>text</option>
        </select>
    </p>
    <p>Search: <input ng-model="searchText" /></p>
    <ul class="chatbox">
        <!-- arrays are fully sortable and filterable in directives -->
        <li ng-repeat="message in messages | orderBy:orderBy | filter:searchText">
            {{message.user}}: {{message.text}}
            
            <!-- delete a message using the $remove method -->
            <a href="#" ng-click="messages.$remove(message)">X</a>
        </li>
    </ul>
    <form ng-submit="addMessage(message)">
        <input type="text" ng-model="message"/>
        <input type="submit" value="Send Message"/>
    </form>
    <p class="note">Open <a href="http://jsfiddle.net/firebase/cWBQH/embedded/result,js,html" target="_blank">this chat in a new window</a> to have a conversation with yourself. Hey, it's fun, ignore the psychiatrists.</p>
</div>

CSS

ul.chatbox {
    height: 100px;
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 10px;
    border-radius: 10px;
    overflow-y: auto;
    word-break: break-all;
    list-style-type: none;
}
p.result {
    color: #00AA00;
    font-weight: bold;
}
p.result.note {
    color: gray;
    font-weight: normal;
    font-style: italic;
}
p.result.error {
    color: red;
}
input[name="data"] {
    width: 200px;
}
input[name="user"] {
    width: 100px;
}
input {
    font-size: 14px;
    line-height: 16px;
}
.note {
    color: gray;
}

JavaScript

// define our app and dependencies (remember to include firebase!)
// demoUtils creates a unique sandbox URL for us to play in!
var app = angular.module("sampleApp", ["firebase", "demoUtils"]);

// this factory returns a synchronized array of chat messages
app.factory("chatMessages", ["$firebase", "$rootScope", 
   function($firebase, $rootScope) {
      // create a reference to the Firebase where we will store our data
      var ref = new Firebase($rootScope.demoUrl);
        
      // this uses AngularFire to create the synchronized array
      return $firebase(ref).$asArray();
   }
]);

app.controller("ChatCtrl", ["$scope", "chatMessages",
  // we pass our new factory, chatMessages, into the controller
  function($scope, chatMessages) {
    $scope.user = "Guest " + Math.round(Math.random()*101);
     
    // we add chatMessages array to the scope for our ng-repeat
    $scope.messages = chatMessages;
      
    // called by ng-submit a method to create new messages
    $scope.addMessage = function(message) {
      // calling $add on a synchronized array is like Array.push,
      // except that it saves the changes to Firebase!
        $scope.messages.$add({user: $scope.user, text: message, timestamp: Firebase.ServerValue.TIMESTAMP});
      $scope.message = "";
    };
  }
]);

// this is just some demo fluff that creates a unique sandbox URL
// and loads data into it so we can play with Firebase and have fun!
app.run(function(loadDemo, getDemoUrl, $rootScope) {
   $rootScope.demoUrl = getDemoUrl('web/af/arrays-chat/messages');
   loadDemo('web/af/arrays-chat/messages', 'web/af/arrays-chat/messages');
});

// Dependencies used in this fiddle:
// ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js
// cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js
// cdn.firebase.com/js/client/2.0.3/firebase.js
// cdn-gh.firebase.com/demo-utils-script/demo-utils-angular.js