Allow database data using ui-route

Question

I am new to angular / ui-route and firebase.

Do you know if it is possible to resolve firebase data using ui-route?

I tried the following states:

      .state('contacts', {

        abstract: true,
        url: '/contacts',
        templateUrl: './assets/app/views/contacts/contacts.html',
        resolve: {
          contacts: ['contacts',
            function( contacts){
              return contacts.all();
            }],
          contactsFb:  WHAT TO SET ???  
        },

        controller: ['$scope', '$state', 'contacts', 'utils', 'contactsFb',
          function (  $scope,   $state,   contacts,   utils, contactsFb) {

            // Working Fine but not from firebase
            $scope.contacts = contacts;
            // Can't make it works... :-(
            $scope.contacts = contactsFb;

          }]
      })

Here is the factory:

  .factory('contactsFb', function($firebase) {
    var url='https://evet.firebaseio.com/contacts';
    return $firebase(new Firebase(url));
  })

  .factory('contacts', ['$http', function ($http, utils) {
    var path = './assets/app/models/contacts.json';
    var contacts = $http.get(path).then(function (resp) {
      return resp.data.contacts;
    });

    var factory = {};
    factory.all = function () {
      return contacts;
    };
    factory.get = function (id) {
      return contacts.then(function(){
        return utils.findById(contacts, id);
      })
    };
    return factory;
  }])

Can't get this to work ... :-( Maybe you can help me?

Many thanks!

Answer 1

Try something like this:

.state('contacts', {

  abstract: true,
  url: '/contacts',
  templateUrl: './assets/app/views/contacts/contacts.html',
  resolve: {
    loadContacts:  function(contactsFb) {
      return contactsFb.promiseToHaveContacts();
    }  
  },

  controller: function ($scope, contactsFb) {
      $scope.contacts = contactsFb.contacts;
    }
})

.factory('contactsFb', function($firebase, $q) {
  return {
    contacts: null,
    promiseToHaveContacts: function() {
      var deferred = $q.defer();

      if (this.contacts === null) {
        this.contacts = $firebase(new Firebase('https://evet.firebaseio.com/contacts'));
        this.contacts.$on('loaded', function(loadedData) {
          deferred.resolve();
        });
      }
      else {
        deferred.resolve();
      }

      return deferred.promise;
    }
  };
});