How to control loading data in angularFire

Question

Suppose I have a Firebase like this:

firebase tree

In a factory I create a model:

.factory ('$model', function ($firebase) {
    var ref = new Firebase('https://xxxxx.firebaseio.com/admins/proefje');
    var model = $firebase (ref); // this loads all the data!
    model.loaded = false;

And in my controller I use the model:

.controller('DailyCtrl', function ($scope, $model) {
    $scope.title = 'Daily';
    $scope.data = $model.daily.data;

There are 2 problems:

when the controller is activated, data is still beeing loaded. I think I have to restructure the app a bit to solve this.
As parts of the data get quite large, I want to control how much data is loaded. I do not want to load all data at once. I tried the limit() function, but that seems not implemented in angularFire. Its not in the docs. I could try to load parts over the $child() function, but the I would still be loading an entire table.

Any thouhts on this?

Look at angularfire angularfire.com for some samples, they may help you. — Chandermani
@chandermani: After reading a example again, i realized that i can control loading with var model = $firebase (ref.limit(n)); That link made me realize that it is problably best to ditch angularFire, and work with the firebase API, as it is much more flexible. — JvdBerg

Anant Anant · Accepted Answer · 2014-01-10T17:45:07

To solve (1), you can make use of the resolve() method in ngRoute. This way you can wait for the the 'loaded' event from $firebase(ref) to fire before reaching the controller.

AngularFire does support limits, simply pass ref.limit() to the $firebase method. You may also directly use the Firebase API as appropriate.

How to control loading data in angularFire

1 Answers