Like Dislike

by chrisguzman

HTML

<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.0.17/firebase.js"></script>
<!-- The purpose is to build a place where ideas live and have a like and dislike button for each idea. We want to keep track of the number of up votes and down votes there needs to be. We'll display a certain image depending on whether it has more likes or dislikes. -->
<section ng-app="myApp">
    <!-- Let the Angular JS begin! -->
    <!-- not really sure why section id is necessary is necessary. Probably for CSS -->
    <section id="wrapper">
        <!-- ng-repeat is the first div to create. I don't really understnad what it should be set to though. Example shows "hood in hoods| filter: query" It looks like some sort of for loop or something. Also need to put in ng-controller. Does ng-controller need to be listed twice for ng-repeat and ng-init? ng-repeat needs to take from the IdeaController where it gets the list that it will input into it -->
        <div ng-repeat="idea in ideas" ng-controller="IdeaController" class="idea box">
            <!--I'm assuming the ng-init goes within the above div. The ng-init directieve stores the data and binds the entire idea div with a funciton called 'init' within the controller. This will be executed at least once for each idea -->
            <div class="card" id="{{idea.id}}" ng-controller="MyController" ng-init="init(idea.value)">
              <!--The next step after making the card that goes within the div of repeatable ideas is the h3 tags which should have all the ideas there. I have no idea what ng-cloak does-->
                <h3 class="idea" >{{idea.value}}</h3>
                <!-- I'm assuming the buttons go instead the ng-repeat div, which it does! This updateCount funciton must be in the myApp.controller.  <a href="#" ng-click="updateCount('like')">like</a> -->

            </div>
        </div>
    </section>
</section>
<!--...

JavaScript

//This declares firebase as a dependency, since it's in the square brackets as the second argument in angular.module

var myApp = angular.module('myApp', ["firebase"]);

myApp.controller('MyController',



//This controller is linked to the div of each idea since the ng-controller is set to "MyController"
function MyController($scope, $firebase) {
    //We're going to create an init function within the controller which is going to take the argument of idea, so we're going to set $scope.init as a variable that will actually be a function that will take in variable. Within teh function within init, we want to create the $scope.idea and then bind that also to the firebase url. Each firebase url needs to be specific to that idea as well
    $scope.init = function (idea) {



        //lets create teh idea attribute for scope. Where does the idea argument come from in the controller. I'm confused by how there is an argument of idea, but i dont see how it comes in or is defined by anything. perhaps its just declaring an object that will be filled out by something
        //the purpose here is to set a firebase reference, which seems to be done at scope.data
        $scope.idea = idea;
        var furl = "https://helloworldtest.firebaseio.com/";
        $scope.data = $firebase(new Firebase(furl + idea));

        //this is where the magic happens in terms of checking when the idea changes in anyway
        //I have no idea on what on does, or how it uses 'loaded' or 'change' as arguments here. This part is quite confusing.
        $scope.data.$on('loaded', CheckIdea);
        $scope.data.$on('change', CheckIdea);


        //We have to make an updateCount function that will update the idea div
        // interesting how this is $scope and it setting an attribute to a function, in the same way javascript does this with var, which implies $ is equivalent to var in certain ways. 
        $scope.UpdateCount = function (Likes) {
            var LikesRef = new Firebase(furl +...