Skip to content

Instantly share code, notes, and snippets.

@spencerrwise

spencerrwise/Ionic-Public-Chat-Firebase.markdown

Forked from anonymous/Ionic-Public-Chat-Firebase.markdown
Created November 22, 2014 01:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save spencerrwise/c60779bf32b69c720e12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save spencerrwise/c60779bf32b69c720e12 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Tabs Example</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.min.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular.min.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-animate.js"></script>
<script src="http://code.ionicframework.com/nightly/js/angular/angular-sanitize.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<script src="http://code.ionicframework.com/nightly/js/ionic-angular.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script src="https://rawgithub.com/Luegg/angularjs-scroll-glue/master/src/scrollglue.js"></script>
</head>
<body>
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
<ion-nav-view name="contact-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<div ng-controller="HomeTabCtrl">
<div scroll-glue>
<ul>
<li ng-repeat="msg in messages">[<em>{{msg.from}}</em>] Msg: {{msg.body}}</li>
</ul>
</div>
<div class="list">
<input type="text" ng-model="name" placeholder="Name">
<input type="text" ng-model="msg" ng-keydown="addMessage($event)" placeholder="Message...">
</div>
<button class="button button-full button-positive ng-click="sendMsg()"> Send </button>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
Ionic-Public-Chat-Firebase.markdown
Raw
script.js
angular.module('ionicApp', ['ionic', 'firebase'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "home.html",
controller: 'HomeTabCtrl'
}
}
})
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl', function($scope, $state, $firebase) {
var ref = new Firebase("https://gs1u27f4k74.firebaseio-demo.com/");
$scope.messages = $firebase(ref);
$scope.addMessage = function(e) {
$scope.sendMsg = function() {
$scope.messages.$add({from: $scope.name, body: $scope.msg});
$scope.msg = "";
}
}
$scope.clear = function(){
$scope.name = "";
}
console.log('HomeTabCtrl');
});
Raw
style.css
[scroll-glue]{
height: 200px;
overflow-y: scroll;
border: 2px solid grey;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment