resolve firebase data using ui-route

Question

I'm new in angular/ui-route and firebase.

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

I tryed 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 make it works... :-( Maybe you can help me ?

Many thanks!

rob · Accepted Answer · 2014-02-11 04:39:45Z

5

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;
    }
  };
});

edited Feb 11, 2014 at 4:39

answered Feb 11, 2014 at 3:25

rob

18.7k13 gold badges73 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ced YahooB Over a year ago

But actually The contacts detail display are not working anymore. I need the others methods such as all() or get() using utils.findById and I don't manage to match the syntaxe :-(

Ced YahooB Over a year ago

I try to adapt the ui-router sample using Firebase Backend... Then, I don't know what to set in the promiseGetContact() methods which is mandatory to display the details. Here is some code : plnkr.co/edit/JLVLOAeYxdcHr84qEh5o

rob Over a year ago

If you just need a function on the factory that get's a contract by it's ID you can do this: plnkr.co/edit/egi65sJY1hzKDjQ5OG6h?p=preview

Ced YahooB Over a year ago

This actually doesn't work... this.contacts is an Object { 0={...}, $bind=function(), $add=function(), more...} where the id of the item doesn't correspond to the position.

Collectives™ on Stack Overflow

resolve firebase data using ui-route

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related