Examples > AngularFire > Getting Started

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

by siegesan

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">
    <ul class="chatbox">
        <li ng-repeat="message in messages">{{message.from}}: {{message.content}}</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;
    font-size: 90%;
    font-style: italic;
}
}

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"]);

// 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.baseUrl);
      
     // 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({from: $scope.user, content: message});
      $scope.message = "";
    };
      
    // if the messages are empty, add something for fun!
    $scope.messages.$loaded(function(messages) {
        if( messages.length === 0 ) { 
            messages.$add({from: 'Firebase Docs', content: 'Hello world!'});
        }
    });
  }
]);

// this is just some demo fluff that creates a unique sandbox URL
// so we can play with Firebase and have fun!
app.run(function($rootScope) {
   $rootScope.baseUrl = "https://cometfieldmanager.firebaseio.com/chat";
});

// 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