Skip to content

Instantly share code, notes, and snippets.

@owenl131

owenl131/index.html

Created May 13, 2015 04:45
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 owenl131/f73d6efe06882651f529 to your computer and use it in GitHub Desktop.
Save owenl131/f73d6efe06882651f529 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link rel="stylesheet" href="/resources/tutorial/css/example.css" />
</head>
<body ng-controller="MyController" style="font-family:verdana">
<div class="chat container">
<header>420Glitches Group Chat</header>
<div class="chat-toolbar">
<label for="nameInput">Username:</label>
<select ng-model="name">
<option value="Owen L ">Owen L </option>
<option value="Kai Jun ">Kai Jun </option>
<option value="Yuan Wei ">Yuan Wei </option>
</select>
</div>
<ul id="example-messages" class="example-chat-messages">
<li ng-repeat="msg in messages">
<strong class="example-chat-username">{{ msg.from }}</strong>-
{{ msg.body }}
</li>
</ul>
<footer>
<input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput" placeholder="Type a message..." size="30">
</footer>
</div>
<script>
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller("MyController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
var ref = new Firebase("https://420glitches.firebaseio.com/");
$scope.messages = $firebaseArray(ref);
$scope.addMessage = function(e) {
if (e.keyCode === 13 && $scope.msg) {
var name = $scope.name;
$scope.messages.$add({
from: name,
body: $scope.msg
});
$scope.msg = "";
}
}
}
]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment