global domination with angularjs and firebase - controller and service (part 2)

this is continued from part 1

the full source is on github

We have everything set up, let's build some Terminators.

The first step is to reference our firebase, where we're going to store these Terminators.

angular.module('appToTakeOverTheWorldApp')
 .constant('FIREBASE_URL', 'https://<YOUR_APP_NAME_HERE>.firebaseio.com/');

The app name is the name of your firebase. From part 1, mine is app2takeovertheworld

We're going to put all our CRUD logic into a Terminator service, then call these methods in our controller.

Create a new file app/scripts/services/Terminator.js and add it to the bottom of app/index.html

<script src="scripts/services/Terminator.js"></script>

'use strict';

angular.module('appToTakeOverTheWorldApp')
.service('Terminator', ['$firebase', 'FIREBASE_URL', function($firebase, FIREBASE_URL){

    var ref = new Firebase(FIREBASE_URL + 'terminators');

    var terminators = $firebase(ref);

    return {
        all: terminators,
    }
}])

Here we create a reference to the terminators collection in our firebase backend. It's okay that it doesn't exist yet. It'll be generated automatically when we start adding terminators.

In our controller we'll get rid of all that awesomeThings baloney and reference our Terminator service:

'use strict';

angular.module('appToTakeOverTheWorldApp')
.controller('MainCtrl', ['$scope', 'Terminator', function ($scope, Terminator) {

    $scope.terminators = Terminator.all;

    console.log($scope.terminators)

}]);

Okay lets take a look at what we've done. Throw this into app/views/main.html:

<ul>
  <li ng-repeat='terminator in terminators'>{{ terminator }}</li>
</ul>

and low and behold....

blank screen.

That's expected though cause we haven't built any machines. (these are more like agents from the matrix, in that they're abstract data in a computer simulation rather than real hardware. bear with me)

check out the console:

That's our reference to the nonexistant terminators collection.

All the above methods are described in the angularFire documentation.

Using these methods we can fill out our service:

return {
    all: terminators,
    create: function(terminator){
        // add to database, return promise
        return terminators.$add(terminator)
    },
    delete: function(terminatorId){
        return terminators.$remove(terminatorId)
    }
}

Then call these methods in our MainCtrl:

$scope.createTerminator = function(){
    Terminator.create($scope.terminator).then(function(data){
                    // reset the text box
        $scope.terminator.name = ''
    })
};

$scope.deleteTerminator = function(terminatorId){
    Terminator.delete(terminatorId).then(function(data){
        console.log('Terminator deleted!')
    })
}

Then our main.html view looks like this:

<h3>All terminators</h3>
<ul>
  <li ng-repeat='(terminatorId, terminator) in terminators'>
    {{ terminator.name }} 
    <div class='btn btn-default' ng-click='deleteTerminator(terminatorId)'>Delete</div>
  </li>
</ul>

<input type='text' ng-model='terminator.name'><div class='btn btn-danger' ng-click='createTerminator()'>Create Terminator</div>

Now we can create and delete our "Terminators". Check out your firebase database to see data created and removed in real time