spencerrwise/Ionic-Public-Chat-Firebase.markdown

## 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>

## Ionic-Public-Chat-Firebase.markdown

      
    Raw
  

              Ionic-Public-Chat-Firebase.markdown
            
          
    Ionic Public Chat Firebase

Simple chat ionic, using Firebase
Forked from Alexandre Carvalho's Pen Ionic Public Chat Firebase.
A Pen by Captain Anonymous on CodePen.
License.

  
## 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');

});

## style.css
[scroll-glue]{
        height: 200px;
        overflow-y: scroll;
        border: 2px solid grey;
      }
	<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>
	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');

	});
	[scroll-glue]{
	height: 200px;
	overflow-y: scroll;
	border: 2px solid grey;
	}