davidmaogomezz/AngularJS with Firebase Demo.markdown

## AngularJS with Firebase Demo.markdown

      
    Raw
  

              AngularJS with Firebase Demo.markdown
            
          
    AngularJS with Firebase Demo

A Pen by Avinash Kondagunta on CodePen.
License.

  
## index.html
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>

<body ng-controller="DemoCtrl" class="container"  ng-app="DemoApp">

<h2>Realtime Messaging list with AngularJS and Firebase</h2>
  <h3>Message count: {{getCount()}} items</h3>

 <!--ADD ITEM FORM-->
 <form name="myForm">

     <div>
         <input type="text"
                name="todoNameField"
                ng-model="todoName"
                placeholder="Add new message (min 3 chars)"
                required ng-minlength="3"
                class="form-control"
                ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
                style="margin-bottom: 10px"
                />

         <button ng-click="addItem()"
                         ng-hide="myForm.todoNameField.$invalid"
                         class="btn btn-primary" type="button"
                         >Save Todo</button>
     </div>

 </form>

<hr>


<!--TODO LIST-->
<div ng-repeat="item in todos" class=" list-group-item row">

    <div  class="col-md-6">
        <!--COMPLETED ICON-->
         <span class="glyphicon glyphicon-thumbs-up"
               ng-show="item.completed"> </span>


        <!--todo label-->
        <span>{{item.name}} </span>
        <span  class="text-info"> [ {{item.id}} ]</span>
    </div>


    <div  class="col-md-6">
        <!--Delete Todo button-->
        <a class="btn btn-primary" ng-click="removeItem($index, item, $event)">
            Delete
        </a>

        <a class="btn btn-info" ng-click="changeStatus(item)">
            Change Status
        </a>
    </div>

</div>


## script.js
var myApp = angular.module('DemoApp', ['firebase']);

myApp.constant("FIREBASE_URL", "https://demotodo.firebaseio.com/" );

myApp.controller('DemoCtrl', ['$scope','$firebase','FIREBASE_URL',function($scope, $firebase, FIREBASE_URL) {

    // Get Stored TODOs
    var todosRef = new Firebase(FIREBASE_URL);
    $scope.todos = $firebase(todosRef);
		$scope.test = "Test works!";

  	$scope.getCount = function () {
			var count = 0;
			todosRef.once('value', function(dataSnapshot) {
				count = dataSnapshot.numChildren();
			});
      return count;
    }


    // Update the "completed" status
    $scope.changeStatus   = function (item) {

        // Get the Firebase reference of the item
        var itemRef = new  Firebase(FIREBASE_URL + item.id);

        // Firebase : Update the item
        $firebase(itemRef).$set({
            id: item.id,
            name : item.name,
            completed: !item.completed
        });

    }


    // Remove a Todo
    $scope.removeItem   = function (index, item, event) {

       // Avoid wrong removing
       if (item.id == undefined)return;

       // Firebase: Remove item from the list
       $scope.todos.$remove(item.id);

    }


    // Add new TODO
    $scope.addItem  = function () {

        // Create a unique ID
        var timestamp = new Date().valueOf()

        // Get the Firebase reference of the item
        var itemRef = new Firebase(FIREBASE_URL + timestamp);

        $firebase(itemRef).$set({
            id: timestamp,
            name : $scope.todoName,
            completed: false
        });

        $scope.todoName = "";

    }

}]);

## style.css
.chart {
    background: #eee;
    padding: 3px;
}

.chart div {
  width: 0;
  transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
}

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 5px;
  color: white;
  box-shadow: 2px 2px 2px #666;
}
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<script src="https://code.angularjs.org/1.2.6/angular.min.js"></script>
	<script src="https://cdn.firebase.com/v0/firebase.js"></script>
	<script src="https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js"></script>

	<body ng-controller="DemoCtrl" class="container" ng-app="DemoApp">

	<h2>Realtime Messaging list with AngularJS and Firebase</h2>
	<h3>Message count: {{getCount()}} items</h3>

	<!--ADD ITEM FORM-->
	<form name="myForm">

	<div>
	<input type="text"
	name="todoNameField"
	ng-model="todoName"
	placeholder="Add new message (min 3 chars)"
	required ng-minlength="3"
	class="form-control"
	ng-keyup="($event.keyCode == 13 && todoName.length > 2) ? addItem() : return"
	style="margin-bottom: 10px"
	/>

	<button ng-click="addItem()"
	ng-hide="myForm.todoNameField.$invalid"
	class="btn btn-primary" type="button"
	>Save Todo</button>
	</div>

	</form>

	<hr>


	<!--TODO LIST-->
	<div ng-repeat="item in todos" class=" list-group-item row">

	<div class="col-md-6">
	<!--COMPLETED ICON-->
	<span class="glyphicon glyphicon-thumbs-up"
	ng-show="item.completed"> </span>


	<!--todo label-->
	<span>{{item.name}} </span>
	<span class="text-info"> [ {{item.id}} ]</span>
	</div>


	<div class="col-md-6">
	<!--Delete Todo button-->
	<a class="btn btn-primary" ng-click="removeItem($index, item, $event)">
	Delete
	</a>

	<a class="btn btn-info" ng-click="changeStatus(item)">
	Change Status
	</a>
	</div>

	</div>
	var myApp = angular.module('DemoApp', ['firebase']);

	myApp.constant("FIREBASE_URL", "https://demotodo.firebaseio.com/" );

	myApp.controller('DemoCtrl', ['$scope','$firebase','FIREBASE_URL',function($scope, $firebase, FIREBASE_URL) {

	// Get Stored TODOs
	var todosRef = new Firebase(FIREBASE_URL);
	$scope.todos = $firebase(todosRef);
	$scope.test = "Test works!";

	$scope.getCount = function () {
	var count = 0;
	todosRef.once('value', function(dataSnapshot) {
	count = dataSnapshot.numChildren();
	});
	return count;
	}


	// Update the "completed" status
	$scope.changeStatus = function (item) {

	// Get the Firebase reference of the item
	var itemRef = new Firebase(FIREBASE_URL + item.id);

	// Firebase : Update the item
	$firebase(itemRef).$set({
	id: item.id,
	name : item.name,
	completed: !item.completed
	});

	}



	// Remove a Todo
	$scope.removeItem = function (index, item, event) {

	// Avoid wrong removing
	if (item.id == undefined)return;

	// Firebase: Remove item from the list
	$scope.todos.$remove(item.id);

	}



	// Add new TODO
	$scope.addItem = function () {

	// Create a unique ID
	var timestamp = new Date().valueOf()

	// Get the Firebase reference of the item
	var itemRef = new Firebase(FIREBASE_URL + timestamp);

	$firebase(itemRef).$set({
	id: timestamp,
	name : $scope.todoName,
	completed: false
	});

	$scope.todoName = "";

	}

	}]);
	.chart {
	background: #eee;
	padding: 3px;
	}

	.chart div {
	width: 0;
	transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-webkit-transition: all 1s ease-out;
	}

	.chart div {
	font: 10px sans-serif;
	background-color: steelblue;
	text-align: right;
	padding: 3px;
	margin: 5px;
	color: white;
	box-shadow: 2px 2px 2px #666;
	}