resolve firebase data using ui-route
angular-ui-router, angularjs, firebase
Solution
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;
}
};
});
Problem
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!