Skip to content

Instantly share code, notes, and snippets.

@kichiemon
Last active August 29, 2015 14:10
Show Gist options
  • Save kichiemon/45571d89cf13c9fafd20 to your computer and use it in GitHub Desktop.
Save kichiemon/45571d89cf13c9fafd20 to your computer and use it in GitHub Desktop.
7ステップで出来るAngularFireチュートリアルをやってみた ref: http://qiita.com/iKichiemon/items/6d0754a025f46d2a2cac
angularFire
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
myDataRef.on('child_added', function(snapshot) {
//We'll fill this in later.
});
var message = snapshot.val();
displayChatMessage( message.name, message.text );
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//Code here
}
]);
var ref = new Firebase("https://rig9dtf5xj7.firebaseio-demo.com/");
$scope.messages = $firebase(ref).$asArray();
<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>
<html>
<head>
<script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>
<script>
var myDataRef = new Firebase('https://mmafryy6x7l.firebaseio-demo.com/');
$('#messageInput').keypress(function (e) {
if (e.keyCode == 13) {
var name = $('#nameInput').val();
var text = $('#messageInput').val();
myDataRef.push({name: name, text: text});
$('#messageInput').val('');
}
});
myDataRef.on('child_added', function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
$('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment