Examples > AngularFire > Getting Started

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

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

JavaScript

var app = angular.module("sampleApp", ["firebase", "demoUtils"]);
app.factory("chatMessages", ["$firebase", '$rootScope', 
  function($firebase, $rootScope) {
     var ref = new Firebase($rootScope.demoUrl);
     return $firebase(ref).$asArray();
  }
]);
app.controller("ChatCtrl", ["$scope", "chatMessages",
  function($scope, chatMessages) {
    $scope.user = "Guest " + Math.round(Math.random()*101);
    $scope.messages = chatMessages;
    $scope.addMessage = function(message) {
        //note, we use $add2 decorator
      $scope.messages.$add2({from: $scope.user, content: message});
      $scope.message = "";
    };
    $scope.messages.$loaded(function(messages) {
        if( messages.length === 0 ) { 
            messages.$add({from: 'Firebase Docs', content: 'Hello world!'});
        }
    });
  }
]);
app.config(function($provide) {
  $provide.decorator('chatMessages', function($delegate) {
    $delegate.$add2 = function(obj) {
        console.log(obj);
        //we can play here
        /*
        $delegate.$add(obj).then(function(){
          console.log('success', arguments);
        }, function(){
          console.log('error', arguments);
        });
        */
      return $delegate.$add(obj);
    };
    return $delegate;
  });
});
app.run(function($rootScope, demoUtils) {
   $rootScope.demoUrl = demoUtils.getRandomDemoUrl('web/af/basics-chat');
});