Dear Angular Friends,
I made an app (simple html page of 66 lines) with Angular and Firebase (AngularFire). Please have a look at it.
Any one who has GMail account can login in to this app and chat with others.
Demo: http://praveengandhi.github.io/ngChat.html
Source: https://github.com/PraveenGandhi/PraveenGandhi.github.io/blob/master/ngChat.html
In AngularJs we have seen 2-way data binding, with AngularFire we archive 3-way data binding which is cool, isn't it.
Code below:
<html ng-app="myChatRoom">
<head>
<title>Chat</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="img/stvd.png">
</head>
<body>
<div class="container">
<div ng-controller="ChatCtrl">
<div id="login">
<span ng-show="auth.user">
<img ng-src="{{auth.user.thirdPartyUserData.picture}}" width="40" height="40"/>
Hello {{auth.user.displayName}}...! | <a href="#" ng-click="auth.$logout()" class="btn btn-default">
<span class="glyphicon glyphicon-log-out"></span> Logout</a>
</span>
<a class="btn btn-info btn-lg btn-block" ng-hide="auth.user" ng-click="auth.$login('google')">
<span class="glyphicon glyphicon-envelope"></span> Log in with Gmail</a>
</div>
<div ng-show="auth.user">
<p class="bg-info velocity-opposites-transition-slideLeftIn" data-velocity-opts="{ stagger: 150 }" ng-repeat="message in messages">
<img ng-src="{{message.from.thirdPartyUserData.picture}}" width="30" height="30"/><b>{{message.from.displayName}}</b> says: {{message.content}}
</p>
<br/>
<form ng-submit="addMessage()">
<div class="form-group">
<label class="sr-only" for="message">Write your message</label>
<input ng-model="message" id="message" class="form-control input-block" placeholder="Write your message"/>
</div>
<button type="submit" class="btn btn-primary btn-block"><span class="glyphicon glyphicon-send"></span> Send</button>
</form>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/velocity.ui.min.js"></script>
<script src="js/angular-velocity.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script type="text/javascript">
var app = angular.module("myChatRoom", ["firebase",'angular-velocity']);
app.factory("ChatService", ["$firebase", function($firebase) {
var ref = new Firebase("https://welfare.firebaseio.com/chat");
return $firebase(ref.limit(10));
}]);
app.controller("ChatCtrl", ["$scope", "ChatService", "$firebaseSimpleLogin",
function($scope, chatService, $firebaseSimpleLogin) {
var ref = new Firebase("https://welfare.firebaseio.com/");
$scope.auth = $firebaseSimpleLogin(ref);
$scope.messages = chatService;
$scope.addMessage = function() {
$scope.messages.$add({from: $scope.auth.user, content: $scope.message});
$scope.message = "";
};
}
]);
</script>
</body>
</html>
No comments:
Post a Comment