Skip to content
No description, website, or topics provided.
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Pizza++ with Firebase (AngularFire)

  1. Open your project (imported from

  2. Go in the folder /data and open the file pizza.json

  3. Modify the structure to have something similar to this one:

                "id" : "amiciNostriDiavola",
                "nome_pizza" : "Diavola",
                "nome_pizzeria" : "Amici Nostri",
                "img_url" : "images/amici-nostri-diavola.jpg",
                "img_alt" : "Diavola di Amici Nostri"
                "id" : "amiciNostriMargherita",
                "nome_pizza" : "Margherita",
                "nome_pizzeria" : "Amici Nostri",
                "img_url" : "images/amici-nostri-margherita.jpg",
                "img_alt" : "Margherita di Amici Nostri"
  4. Save the file

  5. Open your browser and connect to Firebase (on

  6. Create new project

  7. Open the view "Database" and import data you created at point 3

  8. Go in the "Rules" tab and modify the access rules to:

      "rules": {
        ".read": true,
        ".write": "auth != null"
  9. Press "Publish"

  10. Come back to WebStorm

  11. Add the Firebase and AngularFire libraries to index.html

    <!-- Firebase -->
    <script src=""></script>
    <!-- AngularFire -->
    <script src=""></script>
  12. Initialize firebase in app.js by adding the following code at the beginning (after "user 'strict'")

    // Initialize the Firebase SDK
      var config = {
        apiKey: '<your-api-key>',
        authDomain: '<your-auth-domain>',
        databaseURL: '<your-database-url>',
        storageBucket: '<your-storage-bucket>'
  13. Now it's time to substitute the keys with yours: connect to and enter your project. Then click on the gear icon to access project settings and click on "Add Firebase to your web app"

  14. Come back to WebStorm and paste the code obtained on the Firebase website

  15. Edit the Pizza service to get all pizzas from the Firebase app instance.

    angular.module(...).factory('Pizza', function($firebaseArray) {
        var pizzaService = {
           getData: function () {
               var ref = firebase.database().ref().child("pizzas");
               // download the data into a local object
               return $firebaseArray(ref);
        return pizzaService;
  16. Call the getPizzas() function from the pizzaView.js controller instead of the "old" service:

    angular.module(...) ... .controller('View1Ctrl', ['$scope','Pizza',function($scope,Pizza) {
        $scope.dati.pizzas = Pizza.getData();
  17. Update the SinglePizza service to get single pizza information from the Firebase app instance.

    angular.module(...).factory('SinglePizza', function($firebaseObject) {
       var singlePizzaService = {
           getSinglePizza: function (pizzaId) {
               var ref = firebase.database().ref().child("pizzas").child(pizzaId);
               // download the data into a local object
               return $firebaseObject(ref);
       return singlePizzaService;
  18. Consequently, call the getSinglePizza() function from the detailsView.js controller.

    angular.module(...).controller('detailsViewCtrl', ['$scope', '$routeParams', 'SinglePizza',
        function($scope, $routeParams, SinglePizza) {
            $scope.dati = {};
            $ = SinglePizza.getSinglePizza($routeParams.pizzaId);
You can’t perform that action at this time.