JSFiddle - React, Tailwind, and code Playground

by chrisguzman

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.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>
<div ng-app="fluttrmvcapp" ng-controller="PostIdeaController">
  <input type="text" ng-model="newIdea" placeholder="What's your idea?">
  <button type="submit" ng-click="addIdea()">Add New Idea</button>
  <ul ng-repeat="idea in IdeaListSingles">
    <li>{{idea}}</li>
  </ul>
</div>

JavaScript

var fluttrmvc = angular.module("fluttrmvcapp", ["firebase"]);


fluttrmvc

//Simply, creates a factory for postedIdea branch and 
//a controller to bind angularfire object in factory to angular js
//under IdeaListSingles, which is used to print list of ideas with ng-repeat
//controller also has add idea function that is referenced with ng-click



.factory("FirebasePostedIdeaService", ["$firebase", function ($firebase) {
    var furl = "https://crowdfluttr.firebaseio.com/postedIdea/";
    var ref = new Firebase(furl);
    return $firebase(ref);
}])

//Reference: https://www.firebase.com/quickstart/angularjs.html
//use the FirebasePostedIdeaService factor, which can be treated as a variable
//Although FirebasePostedIdeaService has the .../postedidea/ url, FirebaseParentService
//has parent URL, because reading from the list takes the key value end points of the tree
//but you have to be more specific it seems to post the idea
.controller('PostIdeaController', ["$scope", "FirebasePostedIdeaService", function ($scope, FirebasePostService) {
    $scope.IdeaListSingles = FirebasePostService



    //adding an idea involves creating a new function using .$add
    //there is also .remove and .update


    //interesting that scope.newIdea is not referenced anywhere else before, 
    //since it's being created there
    //if we wanted to update or delete an idea, how would it be referenced before except
    //with a specific url to that idea, but how do we do that? answer is definitely in weather app tutorial




    $scope.addIdea = function(){
        //So first, you create $scope.IdeaListSingles equals to the Firebase reference  & then you go $add
    	$scope.IdeaListSingles.$add($scope.newIdea);
    	//what exactly is clearing out here??
    	$scope.newIdea = "";
    }
}]);