General query about angularfire2 approach

I’m not sure this is the right place to raise this query, so if there’s a better place for the discussion, please point me there 😃

With an angular2 app, my approach so far has been to separate out different concerns into services. So if I have a component that needs some data, I’d go and create a service with methods like:

public getNavigation(): Observable<MenuItem[]>

Methods that returns an observable of that data that my component can subscribe. Then I can inject that re-usable service into one or more components. I can also mock that service so that my component is testable in isolation without it changing any real data. And my components don’t have a concrete dependency on Firebase, it just wants observable’s of data which could come from a variety of systems and services.

So I’m not sure about the approach in this library at the moment. Do I want my components to be referencing firebase directly, or query logic and suchlike within the component? How do a write tests for this?

I think I’d rather angularfire2 just gave me mapped/synchronized objects and arrays wrapped in an observable rather than things I put directly in a component.

I’d be interested in people’s thoughts.

[jdell64]

@markgoho Thanks. I thought my question was similar to the one asked, but I will do an SO question from now on.

[mip1983]

Hi @jeffbcross , thanks for your help before, it’s enabled me to make some progress trying this out. I brought the code locally into my project to run it (due to the packaging problem in the other issue I raised), but that’s proved to be useful as I can tweak the code.

I know this is early alpha and I’m sure a lot will change anyway, so I’m not sure how useful my feedback is, but I thought I’d share.

I ended up changing the AngularFire list function so it takes an Firebase ref rather than a string, which means I can get my data with ordering (and I presume filtering). e.g.

public getNavigation(): Observable<MenuItem[]> {
        return this.af.list(this.ref.child("navigation").orderByChild("order")) as Observable<MenuItem[]>;
}

I also changed some bits in ‘firebase_list_factory.ts’, so like I say it takes a ref rather than a string:

export function FirebaseListFactory(ref: any, {preserveSnapshot}: FirebaseListFactoryOpts = {}): FirebaseListObservable<any> {
    //var ref = new Firebase(absoluteUrl);
    // Would like to be strongly typed, but the ref can be Firebase or FirebaseQuery
    // Either type def's need to change or this needs to be tweaked with functions for either.

I changed the unwrapMapFn so that it includes the firebase key on the returned object:

function unwrapMapFn(snapshot: FirebaseDataSnapshot): any {
    var returnObj = snapshot.val();
    returnObj.key = snapshot.key();

    return returnObj;
}

This is required so we can preserve things like the sort order. I changed the ‘onChildAdded’ function so that it preserves order:

export function onChildAdded(arr: any[], child: any, prevChildKey: string): any[] {
    if (prevChildKey) {
        // Find the array index of the previous child
        var prevChildIndex = getIndexByKey(arr, prevChildKey);
        // Splice the item into the index + 1 of the previous child
        arr.splice(prevChildIndex + 1, 0, child);
    } else {
        arr.push(child);
    }

    return arr;
}

export function getIndexByKey(arr: any[], prevChildKey: string): number {    
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].key() === prevChildKey) {
            return i;
        }
    }
    return null;
}