Skip to content

Instantly share code, notes, and snippets.

@stefanvangastel
Created September 16, 2015 15:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stefanvangastel/780e3a225a6b25125cad to your computer and use it in GitHub Desktop.
Save stefanvangastel/780e3a225a6b25125cad to your computer and use it in GitHub Desktop.
One file Firebase AngularJS Angularfire example
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Firebase AngularJS Demo</title>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.1.2/angularfire.min.js"></script>
<!-- Angular app -->
<script>
var app = angular.module("app", ["firebase"]);
app.controller("RootCtrl", function($scope, $firebaseArray) {
// Variables for example
$scope.newChat = {}
$scope.lockName = false;
// Create firebase ref (INSERT OUR URL HERE)
var ref = new Firebase("https://<YOUR_APP_NAME_HERE>.firebaseio.com/chats"); /
// Bind (three-way)
$scope.chats = $firebaseArray(ref);
// Add new chat message
$scope.send = function(){
// Add time to new chat
$scope.newChat.time = (new Date).getTime();
// Add it to firebase db (and let the magic happen)
$scope.chats.$add( $scope.newChat );
//Reset msg
$scope.newChat.msg = '';
//Lock name for this session
$scope.lockName = true;
}
});
</script>
</head>
<body ng-controller="RootCtrl">
<div ng-repeat="chat in chats"><strong>{{chat.username}}</strong>({{chat.time | date: 'dd-MM-yyyy HH:mm:ss'}}): {{chat.msg}}</div>
<div>
<input ng-model="newChat.username" placeholder="Your name" ng-disabled="lockName" />
</div>
<div>
<input ng-model="newChat.msg" placeholder="Enter your message" />
<button ng-disabled="!newChat.msg || !newChat.username" ng-click="send()">Send</button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment