Last active
August 29, 2015 14:10
-
-
Save kichiemon/45571d89cf13c9fafd20 to your computer and use it in GitHub Desktop.
7ステップで出来るAngularFireチュートリアルをやってみた ref: http://qiita.com/iKichiemon/items/6d0754a025f46d2a2cac
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
myDataRef.on('child_added', function(snapshot) { | |
//We'll fill this in later. | |
}); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var message = snapshot.val(); | |
displayChatMessage( message.name, message.text ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myApp = angular.module("myApp", ["firebase"]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
myApp.controller('MyController', ['$scope', '$firebase', | |
function($scope, $firebase) { | |
//Code here | |
} | |
]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ref = new Firebase("https://rig9dtf5xj7.firebaseio-demo.com/"); | |
$scope.messages = $firebase(ref).$asArray(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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