app.js
                    
/*
Author: Sandeep Panda
FireBase Demo App
*/
angular.module('firebaseDemo', ['firebase', 'ngSanitize', 'ngRoute']);
angular.module('firebaseDemo').controller('BroadcastController', function($scope, broadcastFactory) {
$scope.isEditable = false;
$scope.broadcastName = '';
$scope.isButtonEnabled = function() {
return ($scope.broadcastName === 'undefined') || ($scope.broadcastName.length < 1);
};
$scope.startBroadcast = function() {
$scope.isEditable = true;
$scope.broadcastFromFireBase = broadcastFactory.getBroadcast($scope.broadcastName);
$scope.broadcastFromFireBase.$set('');
$scope.broadcastFromFireBase.$bind($scope, 'broadcast');
};
});
angular.module('firebaseDemo').controller('BroadcastViewerController', function($scope, broadcastFactory) {
$scope.dropdownMessage = 'Retrieving Broadcasts...';
$scope.broadcasts = broadcastFactory.getAllBroadcasts();
$scope.broadcastSelected = function() {
$scope.broadcast = broadcastFactory.getBroadcast($scope.broadcastToView);
}
$scope.broadcasts.$on('loaded', function() {
$scope.dropdownMessage = 'Select a broadcast';
});
});
angular.module('firebaseDemo').factory('broadcastFactory', function($firebase, FIREBASE_URL) {
return {
getBroadcast: function(key) {
return $firebase(new Firebase(FIREBASE_URL + '/' + key));
},
getAllBroadcasts: function() {
return $firebase(new Firebase(FIREBASE_URL));
}
};
});
angular.module('firebaseDemo').directive('demoEditor', function(broadcastFactory) {
return {
restrict: 'AE',
link: function(scope, elem, attrs) {
scope.$watch('isEditable', function(newValue) {
elem.attr('contenteditable', newValue);
});
elem.on('keyup keydown', function() {
scope.$apply(function() {
scope[attrs.model] = elem.html().trim();
});
});
}
}
});
angular.module('firebaseDemo').constant('FIREBASE_URL', 'https://angularfiredemo.firebaseio.com/broadcasts');
angular.module('firebaseDemo').config(function($routeProvider, $locationProvider) {
$routeProvider.when('/write', {
controller: 'BroadcastController',
templateUrl: 'write.html'
}).when('/view', {
controller: 'BroadcastViewerController',
templateUrl: 'view.html'
}).otherwise({
redirectTo: 'write'
});
$locationProvider.html5Mode(true);
});
                    index.html
                    
<!DOCTYPE html>
<html ng-app="firebaseDemo">
<head>
<meta charset="utf-8" />
<title>AngularFire Demo</title>
<link rel="stylesheet" href="style.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="https://code.angularjs.org/1.2.16/angular-sanitize.js" data-semver="1.2.16"></script>
<script src="https://code.angularjs.org/1.2.16/angular-route.js" data-semver="1.2.16"></script>
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<br/>
<div class="row">
<div class="col-xs-5 col-xs-offset-1 text-right">
<a class="btn btn-lg btn-primary" href="write">Write Something</a>
</div>
<div class="col-xs-5 text-left">
<a class="btn btn-lg btn-success" href="view">View a Broadcast</a>
</div>
</div>
<div ng-view></div>
</div>
</body>
</html>
                    style.css
                    
#editor{
background-color:#f2f2f2;
min-height:200px;
width:100%;
outline: none;
box-shadow: inset 0px 0px 15px #CCC;
border-radius: 6px;
border: .5px solid #CCC;
margin-top: 15px;
}
                    write.html
                    
<hr/>
<div class="row">
<div class="col-xs-4 col-xs-offset-3">
<input type="text" class="form-control input-lg" ng-model="broadcastName" placeholder="Type your broadcast name here"/>
</div>
<div class="col-xs-5">
<button class="btn btn-lg btn-success" ng-click="startBroadcast()" ng-disabled='isButtonEnabled()'>Start</button>
</div>
</div>
<h1 class="text-center">Write Something. . .</h1>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div id="editor" demo-editor model="broadcast" class="well">
</div>
</div>
</div>
                    view.html
                    
<h1 class="text-center">Live Broadcast</h1>
<div class="row">
<div class="col-xs-4 col-xs-offset-4">
<select ng-model="broadcastToView" ng-change="broadcastSelected()" class="form-control" ng-options="k as k for (k, v) in broadcasts">
<option value="">{{dropdownMessage}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div id="editor" class="well" ng-bind-html="broadcast.$value">
</div>
</div>
</div>